Initialize a vite + vue project

Create project

First create a viteproject using the following command

npm create vite

Then follow the prompt command to cd to the newly created project directory, use npm installthe dependency packages required for installation, and then use it npm run devto start the project

Configure vite.config.js

1. Add process.envconfiguration. If the history configured by vue-router below is different, you can omit this step.

   define: {
     "process.env": process.env,
   },
   

   

   Otherwise an error will be reportedprocess is not defined

   

2. Use gzip compression

   First use the following command to downloadvite-plugin-compression

   npm i vite-plugin-compression
   

   and then introducevite-plugin-compression

   import viteCompression from "vite-plugin-compression";
   

   pluginsused in

   plugins: [vue(), viteCompression()],
   

   

   

3. After configuring the path alias,
   you don’t need to write it from the beginning if you want to introduce it later. You can just write it directly from the beginning of the configuration. It is equivalent to writing the previous one instead of the later one.

   resolve: {
    alias: {
       //根据自己需要自行添加即可
      "/img": "/src/assets/img/",
      "/scss": "/src/assets/scss/",
      "/views": "/src/views/",
    },
   }
   

   

4. Configure front-end services. For details, please see the official website examples.

   server: {
    host: "127.0.0.1",
    port: 8080, //vite项目启动时自定义端口
    open: true, //vite项目启动时自动打开浏览器
    strictPort: false, // 设为 false 时，若端口已被占用则会尝试下一个可用端口，而不是直接退出
    hmr: true, //开启热更新，默认就是开启的
   },
   

   

Modify main.js

The default is as follows

It will createApp(App)be declared separately to facilitate subsequent registration of global attributes.

Install vue-router

According to the official website tutorial document,
use the following command to installvue-router

npm install vue-router

Create a new router directory in the src directory under the project directory, and then create a new index.js file in the router directory.

Write the following code in index.js

import { createRouter, createWebHistory } from "vue-router";
const routes = [
  // 这里就自定义自己的页面路由了，我写这个就是加个示例
  {
    path: "/",
    name: "home",
    component: () => import("/views/home.vue"),
  },
  {
    path: "/about",
    name: "about",
    component: () => import("/views/about.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  console.log("beforeEach to:", to);
  console.log("beforeEach from", from);
  next();
});

export default router;

Then introduce it in main.js and use it again.

import router from "./router";
app.use(router)

Install vuex

Use the following command to install vuex according to the official website tutorial document

npm install vuex@next --save

Create a new store directory in the src directory under the project directory, and then create a new index.js file in the store directory.

Write the following code in index.js

import { createStore } from "vuex";

// 创建一个新的 store 实例
export default createStore({
  state() {
    return {};
  },
  mutations: {},
});

Then introduce it in main.js and use it again.

import store from "./store";
app.use(store)

Install axios and qs

Use the following command to install axios according to the official website tutorial document

npm install axios

Create a new axios directory in the src directory under the project directory, and then create a new index.js file in the axios directory.

Write the following code in index.js. This is to add the axios interceptor. You don’t need to use this if you don’t need it.

import Axios from "axios";
// 添加请求拦截器
Axios.interceptors.request.use(
  function (config) {
    console.log("请求配置", config);
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
Axios.interceptors.response.use(
  function (response) {
    console.log("服务器的响应", response);
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default Axios;

Install using the following commandqs

npm i qs

Then introduce it in main.js, and then register the global attributes. Instead of introducing it in main.js, you can also introduce it on the page every time you use it.

//引入axios和qs
import Axios from "./axios";
import Qs from "qs";
app.config.globalProperties.$axios = Axios;
app.config.globalProperties.$qs = Qs;

Install sass

I am more accustomed to using scss, so I installed sass

npm install sass -D

Install element-plus

npm install element-plus --save

full import

Introduced in main.js, under use, locale is also introduced here because when using the paging component, it is in English, and it needs to be introduced and changed to Chinese.

//引入element-plus
import ElementPlus from "element-plus";
import locale from "element-plus/lib/locale/lang/zh-cn";
import "element-plus/dist/index.css";
app.use(ElementPlus, { locale });