封面图

嗨~大叫好啊，我是阿壮，一个有情怀的程序员。我做的是后端，然而平时也无意识的去理解一些前端技术，争取有一天能够成为一个”全干“程序员。明天分享以下 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 // 本地预览生产构建产物

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