cover

Hi, I am Zhuang, a programmer with feelings. What I do is the back end, but I also consciously understand some front-end technology, and strive to become a “full work” programmer one day. Today, I would like to share my experience of using Vite. The default packaging tool for projects created with Vue CLI is Webpack. The disadvantage of Webpack is that the packaging speed is really a little slow, and it takes a few seconds for the browser to respond. This time, we used Vite as the packaging tool, which I found much faster than Webpack in my actual experience. And now vite2 has been launched, the bug is less than before, I recommend you can try it, the following is the specific steps

Create a project

Use YARN to create projects for Vue3+TypeScript+Vite

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

Integration Element Plus

  1. The installation
yarn add element-plus
  1. Edit the 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");

Integrated Vuex

  1. The installation
yarn add vuex@next --save
  1. The new store/index. Ts
import { createStore } from "vuex";
import User from "./modules/user";

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    User,
  },
});
  1. The new 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, };
  1. Edit the 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");

Integrated Vue Router

  1. The installation
yarn add vue-router@4
  1. The new 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;
  1. Edit the 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");

Integrated less

  1. The installation
yarn add less less-loader

Integrated prettier

  1. The installation
yarn add prettier
  1. WebStorm set

Vite command

Vite // Start the development server Vite Build // Vite Preview for the production environment

I am a strong, a programmer with feelings, WeChat search a search: technology cat, access to the first time update, we see next period