vite2+vue3+Ts+vuex+router+element-plus项目初始化教程

1、首先检查脚手架是否大于4.5以上，如果低于4.5，请升级版本

vue --version //检查版本，低于4.5执行以下命令

npm install -g @vue/cli  //安装脚手架命令

npm update -g @vue/cli  //升级脚手架命令，如果之前装过，执行这个命令即可

2、确保node版本大于12.0.0，低于当前版本的自己升级

node -v//检查node版本
http://nodejs.cn/    //升级地址

3、开始创建项目，命令行中输入以下命令

npm init vite@latest

4、输入自己的项目名称，这里我选择的vue-vite

 5、然后根据自己的情况选择对应的模块，这里我选择vue+ts（新版的入口为先选vue之后再选vue+ts）

6、进入当前项目，安装依赖

7、安装完成后输入npm run dev，出现以下界面，则项目创建成功

8、接下来安装sass、vuex、router、element-plus

npm install vue-router@4 -S//安装router
npm install vuex@next -S//安装vuex
npm install -D sass//安装sass
npm install element-plus -S//安装element-plus

9、安装完成后重新启动项目，此时我们会看到这样一句话（this will be run only when your dependencies or config have changed），意思就是"只有当依赖项或配置发生更改时，才会运行此操作"，所以vite之所以速度快，是因为vite将项目分成了两部分，一部分是我们项目的依赖，就是package.json文件中的一些依赖库，这是不经常变的，所以第一次启动时（或更改了依赖时），vite就会将依赖文件打包到node_modules文件下.vite的文件夹中，出现了下图的提示，后续如果我们不更改依赖的话，vite就不会重新再次打包，大大加快了启动速度及打包速度，第二部分是我们的源代码，就是src文件夹下的文件，所以当我们在开发时期，不改变依赖的情况下，重新打包的部分就只有我们的源代码，依赖文件并没有进行重复打包

10、尝试关掉当前项目， 重新进行启动，发现依赖文件并没有再次打包，所以速度快就是在这里

11、接下来就是配置element-plus,我们使用按需引入，注意我们使用的是vite，不是webpack

npm install vite-plugin-style-import -D

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'element-plus',
        esModule: true,
        ensureStyleFile: true,
        resolveStyle: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
        resolveComponent: (name) => {
          return `element-plus/lib/${name}`;
        },
      }]
    })
  ]
})

12、在main.ts下，我们按需引入对应的组件，此项功能我们单独抽出到某个文件中进行操作，更多详细操作，请看官方https://element-plus.gitee.io/#/zh-CN/component/quickstart

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from './utils/element-plus';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

// element-plus.ts
import { ElButton, ElSelect } from 'element-plus';
// 如果要使用.scss样式文件，则需要引入base.scss文件
import 'element-plus/packages/theme-chalk/src/base.scss';
import { App } from 'vue';

const allComponents = [ElButton, ElSelect];

export default {
  install(app: App<Element>){
    allComponents.forEach(com => {
      app.use(com);
    })
  }
}

13、src文件夹下，创建router文件夹，并在此文件夹下新建index.ts文件，配置router功能环境，并在main.ts中引入

// src/router/index.ts文件内容
import {createRouter,createMemoryHistory,Router} from 'vue-router';

const routers = [{
    name:'index',
    path:'/',
    component: () => import('@/views/index.vue')
}];

const router:Router = createRouter({
    history:createMemoryHistory(),
    routes:routers
});

export default router;

import { createApp } from 'vue'
import ElementPlus from './utils/element-plus'
import router from './router/index'//次步新增代码
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)//次步新增代码
app.mount('#app')

14、vite设置别名，注意此处因为引入了path包，项目又使用ts功能，所以我们需要安装node的ts解析文件（npm i -D @types/node），可以根据情况自己设置更多别名

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'element-plus',
        esModule: true,
        ensureStyleFile: true,
        resolveStyle: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
        resolveComponent: (name) => {
          return `element-plus/lib/${name}`;
        },
      }]
    })
  ],
  resolve: {
    alias: {//设置别名
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {//设置启动端口
    port: 8090
  }
})

修改tsconfig.json，注意每加一个别名，这个文件下的也要对应增加

"baseUrl": ".",
"paths": {
     "@/*": ["src/*"]
}

15、src文件夹下新建store文件夹，并在此文件夹下新建index.ts文件，配置vuex功能环境，并在main.ts中引入，如需查看vue3中对vuex的分包管理，可查看https://blog.csdn.net/Ag_wenbi/article/details/109989024?spm=1001.2014.3001.5501

// src/store/index.ts文件内容
import {createStore} from 'vuex'

export default createStore({
    state:{
        count:0
    }
})

import { createApp } from 'vue'
import ElementPlus from './utils/element-plus'
import router from './router/index'
import store from './store/index'//次步新增代码
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(store)//次步新增代码
app.mount('#app')

16、sass功能，只需要在style标签中配置lang="scss"即可，这里不再做演示