封面图

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

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