1. 建立项目文件
2. 文件目录下cmd => 运行 npm create vite@latest => 选择vue => 选择js or ts
3. 基础组件下载

npm install vue-router@4 --savenpm install element-plus --savenpm install vuex@next --savenpm install mitt --save   // 组件通信npm install axiosnpm install vite-plugin-html -D // 处理html模板插件npm install -D sass  // CSS预处理器

4. App.vue

<script setup>
</script><template><div id="app"><router-view /></div>
</template><style scoped>
</style>

5. src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',//首页name: 'home',component: () => import('../views/OneMap.vue'),},]
})export default router

6. src/store/index.js

import { createStore } from 'vuex'export default createStore({state: {timeLineTime: '',},getters: {},mutations: {},actions: {},modules: {}
})

7. src/utils/mitt.js

import mitt from 'mitt'const bus = mitt()
export default bus

8. src/utils/request.js

import axios from 'axios'import router from '@/router/index.js'// const baseURL = 'http://192.168.1.199:9000'
const baseURL = "http://192.168.1.8:8086"const instance = axios.create({// TODO 1. 基础地址，超时时间baseURL,timeout: 100000
})// 请求
instance.interceptors.request.use((config) => {return config},(err) => Promise.reject(err)
)// 响应
instance.interceptors.response.use((res) => {console.log(res)// TODO 4. 摘取核心响应数据if (res.data.code === 0) {return res}// TODO 3. 处理业务失败ElMessage.error(res.data.message || '服务异常')return Promise.reject(res.data)},(err) => {console.log(err)// TODO 5. 处理401错误if (err.code === 401) {router.push('/')}// 默认情况下ElMessage.error(err.message || '服务异常')return Promise.reject(err)}
)export default instance
export { baseURL }

9. main.js

import './assets/main.css'import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'import router from './router'
import store from './store'import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'const app = createApp(App)for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}app.use(ElementPlus, {locale: zhCn})app.use(store).use(router).use(ElementPlus).mount('#app')

10. vite.config.js

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from "vite-plugin-html"const getTarget = (mode, target) => {return loadEnv(mode, process.cwd())[target];
};// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {return {plugins: [vue(),//加入配置createHtmlPlugin({inject: {data: {title: getTarget(mode, "VITE_APP_TITLE"),},},}),],server: {host: '0.0.0.0',port: 8991,// 是否开启 httpshttps: false,},}
})

11. index.html

<%- title %>

12. .env.development

# 页面标题
VITE_APP_TITLE = 环境项目名称# 开发环境配置
ENV = 'development'# npm_config_port = 9028VITE_APP_BASE_API = ''

13. .env.production

# 页面标题
VITE_APP_TITLE = 生产环境项目名称# 生产环境配置
ENV = 'production'# VITE_APP_BASE_API = ''

14. .env.staging

# 页面标题
VITE_APP_TITLE = 测试环境项目名称NODE_ENV = production# 测试环境配置
ENV = 'staging'VITE_APP_BASE_API = '/stage-api'