此文章为学习笔记
原文章链接:备战2021:Vite2项目最佳实践
目录:
+ 定义别名
+ 路由
+ 数据请求封装
+ Mock 插件应用
+ 状态管理
+ 样式管理
+ 导入 UI 库
Vite + Vue3.0
定义别名
定义前:页面中引入组件的路径是相对路径或绝对路径。
![](https://i-blog.csdnimg.cn/blog_migrate/781f8ae75b996ef0cc893c0e1d337132.png)
定义方法:
![](https://i-blog.csdnimg.cn/blog_migrate/6d3afbb34b1ce28c9d21d6b4ec9cd51a.png)
此时
comps
就指向了路径/src/components
。
在页面中使用:
![](https://i-blog.csdnimg.cn/blog_migrate/553f80a413f7477349858cbbd0af3259.png)
注意:修改
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
![](https://i-blog.csdnimg.cn/blog_migrate/caaf83ce04917fad6e293afe5e63746f.png)
配置 main.js
import router from "@/router"
createApp(App).use(router).mount(