为什么越来越多的人弃坑 Webpack 用 Vite？

封面图

嗨~大叫好啊，我是阿壮，一个有情怀的程序员。我做的是后端，但是平时也有意识的去了解一些前端技术，争取有一天可以成为一个”全干“程序员。今天分享以下 Vite 的使用感受。
使用 Vue CLI 创建的项目默认的打包工具是 webpack，webpack 缺点是打包速度真的有些慢，每次浏览器都要等几秒才会反应过来，这次我们使用 Vite 作为打包工具，我在实际体验中发现速度比 webpack 快很多，而且现在 vite2 已经推出，bug 也比以前少了不少，推荐大家可以尝试一下，以下是具体的步骤

创建项目

使用 yarn 创建 Vue3+TypeScript+Vite 的项目

yarn create vite my-vue-app --template vue-ts

集成 Element Plus

1. 安装

yarn add element-plus

2. 编辑 main.ts

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";

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

集成 Vuex

1. 安装

yarn add vuex@next --save

2. 新建 store/index.ts

import { createStore } from "vuex";
import User from "./modules/user";

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    User,
  },
});

2. 新建 store/modules/user

const state = {
  count: 0,
};
const getters = {
  getCount() {
    return state.count;
  },
};
const mutations = {};
const actions = {};
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};

3. 编辑 main.ts

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store/index";

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

集成 Vue Router

1. 安装

yarn add vue-router@4

2. 新建 router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Layout from "../layouts/index.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Layout",
    component: Layout,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

3. 编辑 main.ts

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";

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

集成 less

1. 安装

yarn add less less-loader

集成 prettier

1. 安装

yarn add prettier

2. WebStorm 设置

vite 命令

vite // 启动开发服务器
vite build // 为生产环境构建产物
vite preview // 本地预览生产构建产物

我是阿壮，一个有情怀的程序员，微信搜一搜: 科技猫，获取第一时间更新，我们下期见