此文章为学习笔记
原文章链接：备战2021：Vite2项目最佳实践

目录：
+ 定义别名
+ 路由
+ 数据请求封装
+ Mock 插件应用
+ 状态管理
+ 样式管理
+ 导入 UI 库

Vite + Vue3.0

定义别名

定义前：页面中引入组件的路径是相对路径或绝对路径。

定义方法：

此时 comps 就指向了路径/src/components。

在页面中使用：

注意：修改 vite.config.js 配置文件需要重启项目。

路由

安装路由

$ npm install vue-router@next -S -D

配置路由

/src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // @ 是 /src 的别名
    { path: '/', component: () => import('@/views/Home.vue') },
    { path: '/user', component: () => import('@/views/User.vue') }
  ]
})

export default router

配置 main.js

import router from "@/router"
createApp(App).use(router).mount('#app')

使用

App.vue

效果

数据请求封装

统一封装数据请求服务，有利于解决以下问题：

• 统一配置请求
• 请求、响应统一处理