vue工程添加项目文件

工程源码下载：GPS定位系统VUE版本源码下载

目录结构设计

需要新增的文件夹和文件，以及功能，在下图中，我用中文标注了。

左边的是当前新工程的默认结构，右边的是需要新增的文件，我们可以先把需要的文件夹和对应的文件先新建好，后面再给大伙讲下如何添加对应的代码和修改。

头像图片：

小车图片：

修改默认文件

需要修改的默认文件就三个，其他的文件全是新增的，三个文件修改如下：

App.vue

<script setup>
</script>
 
<template>
    <router-view></router-view>
</template>
 
<style>
* {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    text-decoration: none;
    font-style: normal
}
/* 全局样式设置 */
</style>

main.js 修改如下：

import { createApp } from 'vue'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from '@/router/index.js'
import vrouter from 'vue-router'
import ElementPlus from 'element-plus'  
import * as ElIcon from '@element-plus/icons-vue' // 图标
import Pagination from '@/components/paging.vue' //分页
import zhCn from "element-plus/es/locale/lang/zh-cn" // 翻页功能用中文进行提示
import 'nprogress/nprogress.css' // 引用页面加载进度条
import BaiduMap from 'vue-baidu-map-3x' // 引用百度地图

const app = createApp(App)
app.component('Pagination', Pagination)
app.use(router)
app.use(vrouter)
app.use(ElementPlus,{ locale:zhCn})

// 设置百度地图
app.use(BaiduMap, {
    ak: '自己申请的ak', // 百度地图连接的ak值
    v:'3.0',  // 默认使用3.0
    type:"WebGL" // 'WebGL' // ||API 默认API  (使用此模式 BMap=BMapGL)
});

Object.keys(ElIcon).forEach((key) => {
    app.component(key, ElIcon[key])
})
app.mount('#app')

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false, // 关闭map文件生成
  lintOnSave:false, // 关闭每次保存都进行检测。
  devServer:{
    port:7070 // 设置网站启动端口
  }
})

到这一步，修改默认配置以及目录结构的设计就完成了，后面就将对应文件的代码补充进去就完成了。

部分新增文件内容

由于新增的文件较多，我这里只提供部分比较重要的文件内容，其他的部分页面代码可以直接去下载源码进行参考。

.env.development 配置文件内容如下：

# just a flag
ENV = 'development'

# asp.net 启动时的api地址
VUE_APP_BASE_API = 'http://localhost:5291'

.env.production 配置文件内容如下：

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = ''

.\gps-app\src\router\index.js 文件内容如下：

import { createRouter, createWebHistory } from "vue-router"
import NProgress from 'nprogress'

const router = createRouter({
    // history: createWebHashHistory(),
    history: createWebHistory(),
    mode: 'history',
    routes: [
        {
            path: '/Index',
            name: 'Index',
            component: () => import('../views/Index.vue'),
            children: [
                {
                    path: '/Home',
                    name: 'Home',
                    meta:{
                        title:"首页"
                    },
                    component: () => import('../views/Home.vue')
                },
                {
                    path: '/Table',
                    name: 'Table',
                    meta:{
                        title:"报表"
                    },
                    component: () => import('../views/Table.vue')
                },
            ]
        },
        {
            path: '',
            name: 'Login',
            meta:{
                title:"登录"
            },
            component: () => import('../views/Login.vue')
        },
    ]
});

router.beforeEach((to, from, next) => {
    NProgress.start(); //开启进度条
    next();
});
router.afterEach((to, from) => {
    //NProgress.stop(); //进入之后关闭进度条
    NProgress.done() // 完成进度条
});

// 全局后置钩子
router.afterEach(to => {
    // 设置title
    document.title = to.meta.title;
})
export default router

.\gps-app\src\Utils\request.js 文件内容如下：

import axios from 'axios'
import { ElMessage } from 'element-plus'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 50000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    var token = localStorage.getItem('token');
    if(token != null)
    {
      config.headers.Authorization = `${token}`
    }
    return config
  },
  error => {
    // do something with request error
    // console.log(error) // for debug
    return Promise.reject(error)
  }
)

// 拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (!res) {
      // console.log(res.message || '暂无数据！')
      return res
    } else {
      return res
    }
  },
  error => {
    console.error('err' + error.message) // for debug  
    ElMessage({  
      message: error.message || '网络请求错误',  
      type: 'error',  
      duration: 5 * 1000  
    })  
    return error
    //return Promise.reject(error)
  }
)

export default service

其他几个页面的vue文件，请参考工程源码，代码太多了，不好展示~~