五分钟快速实现Vite 2.X+ Vue3.X+Element Plus工程化，脚手架搭建

Vite速度雀食快，比webpack不知高到哪里去。下面带大家五分钟实现工程化! 第一步：

npm init vite@latest

快速创建项目~

取个名字，选完框架 over。30秒。（vite现在也支持react等其他框架）

接下来传统三件套：

cd <project name>

npm install

npm run dev

一分钟过去了，一个基础框架搭建完毕，接下来引入vue router 和vuex：

npm i vue-router@next -S

配置路由，src目录新建文件，main.js添加配置：

import App from "./App.vue";
import router from "./router";

const app = createApp(App);
app.use(router);
app.mount("#app");

router/index.js:

// 开启历史模式
// vue2中使用 mode: history 实现
const routerHistory = createWebHistory();

const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      component: () => import("../views/Home.vue"),
    },
    {
      path: "/contact",
      component: () => import("../views/Contact.vue"),
    },
  ],
});

export default router;

App.vue文件修改为：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div class="nav-btn">
    <router-link to="/"> Home</router-link>
    <router-link to="/contact">Contact </router-link>
  </div>
  <router-view></router-view>
</template>

此时点击页面的Home和Contact会看到路由和组件的变化。接下来引入vuex：

npm i vuex@next -S

store/index.js配置：

import { createStore } from "vuex";

export default createStore({
  state: {
    counter: 0,
  },
});

main.js配置：

import App from "./App.vue";
import router from "./router";
import store from "./store"

const app = createApp(App);
app.use(router);
app.use(store);
app.mount("#app");

最后我们引入element plus （不是element ui，plus适用于vue 3），element plus可以实现按需引入和全部加载，此处我们实现全部引入：

npm install element-plus -S

配置main.js：

import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";

const app = createApp(App);
app.use(router);
app.use(store);
app.use(ElementPlus);
app.mount("#app");

到这里，四分半，一个项目已经搭建完成！按需引入一些依赖就ok了需要注意的是vue 3.X中新增的setup语法糖，我们在使用组件时，自动注册，不需要export，但在使用jest时，会报出实验性语法不支持的错误，所以需要写测试的同学需要注意，有好的解决方法也可以同步一下