1、初始化项目

（1）、打开命令行终端，执行命令：npm -v。npm为6.x版本

终端执行：npm init vite 项目目录名 --template vanilla

npm为7.x版本

终端执行：npm init vite 项目目录名 -- --template vanilla

注意：当前使用vite版本为2.x如果npm命令不存在，请先安装node，下载安装地址：http://nodejs.cn/download/ （2）、cd 项目目录名（3）、npm i

2、安装依赖包/插件

（1）、包：vue@2.6.14，vue2最高版本，生产依赖。通过终端输入：npm view vue versions 命令查询，地址：https://cn.vuejs.org/v2/guide/
（2）、包：vue-router@3.5.3，vue-router3最高版本，兼容vue2.x，生产依赖。通过终端输入：npm view vue-router versions 命令查询，地址：https://v3.router.vuejs.org/zh/installation.html（3）、包：vuex@3.6.2，vuex3最高版本，兼容vue2.x，生产依赖。通过终端输入：npm view vuex versions 命令查询，地址：https://v3.vuex.vuejs.org/zh/
（4）、UI包：element-ui，兼容vue2.x，生产依赖。通过终端输入：npm view element-ui versions 命令查询，地址：https://element.eleme.cn/#/zh-CN/component/installation
（5）、工具包：dayjs，比 moment 轻量n级的日期格式库，生产依赖，地址：https://dayjs.fenxianglu.cn/category/
（6）、包：whatwg-fetch，兼容旧版浏览器IE10+，生产依赖，地址：https://github.com/github/fetch
（6）、插件：vite-plugin-vue2，提供 vue2.x 单文件组件支持的插件，开发依赖，地址：https://www.npmjs.com/package/vite-plugin-vue2
（7）、插件：@vitejs/plugin-legacy，打包出兼容传统浏览器的代码，开发依赖，地址：https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
（8）、插件：unplugin-vue-components，按需导入组件，开发依赖，地址：https://github.com/antfu/unplugin-vue-components
（9）、插件：vite-plugin-pages，自动生成路由列表，开发依赖，地址：https://www.npmjs.com/package/vite-plugin-pages
（10）、包：@vue/compiler-sfc，编译 vue2.x | vue3.x 单文件组件，开发依赖，自动生成路由在配置meta时，需要依赖次包，地址：https://www.npmjs.com/package/@vue/compiler-sfc
（11）、包：vue-template-compiler@2.6.14，将 vue2.x 模板预编译为渲染函数，版本跟vue2.x版本保持一致，vite-plugin-vue2 插件依赖次包，开发依赖，地址：https://www.npmjs.com/package/vue-template-compiler
（12）、插件：vite-plugin-html，(HTML 压缩能力，EJS 模板能力，多页应用支持，支持自定义输入，支持自定义模板)，开发依赖，地址：https://github.com/vbenjs/vite-plugin-html
（13）、包：sass， CSS预处理器，开发依赖，地址：https://www.sass.hk/
生产依赖安装命令：

npm i vue@2.6.14 vue-router@3.5.3 vuex@3.6.2 element-ui dayjs whatwg-fetch

开发依赖安装命令：

npm i vite-plugin-vue2 @vitejs/plugin-legacy unplugin-vue-components vite-plugin-pages @vue/compiler-sfc vue-template-compiler@2.6.14 vite-plugin-html sass -D

3、配置vite

（1）、在项目的根目录下新建vite.config.js 文件，代码如下：

import { defineConfig } from 'vite' import path from 'path' import {createVuePlugin} from 'vite-plugin-vue2' import legacyPlugin from '@vitejs/plugin-legacy' //按需导入组件 start import Components from 'unplugin-vue-components/vite' import { ElementUiResolver } from 'unplugin-vue-components/resolvers' //按需导入组件 end import Pages from "vite-plugin-pages" // 定义index.html文件 import { createHtmlPlugin } from 'vite-plugin-html' const resolve = dir => path.resolve(__dirname,dir) export default defineConfig(({command,mode}) => {   // 开发环境 mode = development command = serve   // 生产环境 mode = production command = build   return {     plugins: [       //提供 vue2.x 单文件组件支持的插件       createVuePlugin(),       //打包出兼容传统浏览器的代码         legacyPlugin({         targets: ['> 1%, last 2 version, ie >= 11'],         additionalLegacyPolyfills: ['regenerator-runtime/runtime']       }),       //按需导入组件       Components({         //在此列表中的组件也会按需自动导入和注册         dirs: ['./src/components'],         //此UI库的组件也会自动导入和注册（element-ui对应ElementUiResolver，Naive UI对应NaiveUiResolver，vant对应VantResolver，iview对应ViewUiResolver等等）         // 配置之后，无需在 main.js 引入 element-ui 了,想要使用element-ui 哪个组件，可直接在 template 中引入         resolvers: [ElementUiResolver()]       }),       //自动生成路由列表配置，如果需要配置 name 和 meta 信息，可以在单文件组件中顶部写入 <route>{name:'',meta:{}}</route> 进行配置       Pages({         // 自动生成的对应目录，默认就是src/pages，所以这样可以不设置，除非需要使用别的路径         dirs: ['src/pages'],         // 是否动态导入组件         importMode: path => path.includes("_async") ? "async" : "sync"       }),       // 定义index.html       createHtmlPlugin({         //是否压缩html         minify:true,         // 注入index.html的数据，ejs格式         inject:{           data:{             title:'我是标题',             mode:mode,             injectScript:`<script></script>`           }         }       })     ],     //静态资源路径改为相对路径，默认是绝对路径/     base: "./",     server: {       //自动打开浏览器       open: true,       //正常显示当前局域网IP访问地址，如果没有配置此项，执行npm run dev后，会在终端显示：Network: use `--host` to expose       host: "0.0.0.0",       // api 代理       proxy:{         '/api':{// 将’/api‘请求转到代理请求’http://192.168.3.136:8080/api‘           target:"http://192.168.3.136:8080",           changeOrigin:true,           secure:false,           //如果不想/api被传递，需要重写路径 /api -> http://192.168.3.136:8080           rewrite: path => path.replace(/^\/api/, '')         }       }     },     resolve: {       // 导入文件时，可以省略文件的后缀，默认支持js后缀，不支持vue后缀。下面配置导入文件时可省略的后缀，此配置是覆盖，非合并       extensions: ['.vue', '.js', '.json'],       // 配置路径别名       alias:{         '@':resolve('src')       }     }   } })

4、创建、修改、删除相关的文件和文件夹

（1）、在项目的根目录下创建 src 目录，在 src 目录下面创建 pages、components、router、store、api、utils、assets 等目录（可根据自己需求创建） 根目录终端执行命令：

md src

然后

cd src

最后

md pages & md components & md router & md store & md api & md utils & md assets

（2）、删除项目根目录下的 style.css。在根目录终端执行命令:

del style.css

（3）、在项目的根目录下创建 public 目录，放置不需要编译的静态资源。根目录终端执行命令：

md public

（4）、修改项目根目录下index.html 文件，代码如下：

<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8" />     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title><%- title %></title>     <%- injectScript %>     <% if (mode !== 'development') { %>     <script></script>     <% } %>   </head>   <body>     <div id="app"></div>     <script type="module" src="/src/main.js"></script>   </body> </html>

（5）、在 src 目录下，创建 App.vue 文件，作为根组件。终端进入 src 目录，之后执行：

cd. > App.vue

（6）、将项目的根目录下的main.js放置src目录下，并修改 main.js 文件，代码如下：

// fetch方法兼容IE10+，兼容Safari6.1+，兼容Edge、Chrome、Firefox // IE浏览器出现“XMLHttpRequest: 网络错误 0x80070005, 拒绝访问” 解决办法：https://blog.csdn.net/bozhu1/article/details/118567244 import 'whatwg-fetch' import Vue from 'vue' // 导入绑在vue原型上的插件 import './utils/plugin' import App from './App.vue' import router from "./router"; import store from './store' new Vue({   router,   store,   render: h => h(App) }).$mount("#app")

（7）、在 utils 目录下新建 plugin.js 文件，代码如下：

import Vue from 'vue' import Loading from 'element-ui/lib/loading' import MessageBox from 'element-ui/lib/message-box' import Notification from 'element-ui/lib/notification' import Message from 'element-ui/lib/message' import 'element-ui/lib/theme-chalk/index.css' import dayjs from 'dayjs' Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message; Vue.prototype.$date = dayjs;

（8）、在router 目录下新建index.js 文件，代码如下：

import Vue from 'vue' import VueRouter from 'vue-router' import routes from "~pages"; Vue.use(VueRouter) const router = new VueRouter({routes}) export default router

（9）、在 store 目录下新建index.js 文件，代码如下：

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({   state:{     count:0   },   getters:{        },   mutations:{     add(state,val){       state.count++     }   },   actions:{        } })

5、运行项目

（1）、终端命令行执行 ：

npm run dev

6、打包项目、预览打包的项目

（1）、终端命令执行：

npm run build

（2）、终端命令执行：

npm run preview

7、vite全局环境变量

内置全局变量

1、import.meta.env.MODE：运行模式，通过--mode来设置 2、import.meta.env.BASE_URL：部署的公共基础路径，由config文件中的base确定 3、import.meta.env.PROD：boolean值，是否运行在生产环境 4、import.meta.env.DEV：boolean值，是否运行在开发环境(永远与import.meta.env.PROD相反)

8、经过测试兼容IE10+