紧接着前面的文章:https://blog.csdn.net/weixin_51416826/article/details/138679863?spm=1001.2014.3001.5502
当我们生成一个Vue3项目后必须要增加一些依赖和配置,比如安装组件库、配置ESLint和Prettier、接下来咱一步步推进~
安装组件库
一般开发为了提高效率都会用一个开源组件库,这里当然少不了,至于用什么,全凭老板拍板。这里咱选用Element Plus,下面开始讲必备配置~
配置按需加载
所谓“按需”便是用啥导啥!
先安装两个插件: unplugin-vue-components 和 unplugin-auto-import 这两款 vite
插件来开启按需加载及自动导入,插件会自动解析模板中的使用到的组件,并导入组件和对应的样式文件。
npm i unplugin-vue-components -D
npm i -D unplugin-auto-import
# or
pnpm add -D unplugin-vue-components
pnpm add -D unplugin-auto-import
然后在 vite.config.js
文件中配置使用一下插件(如果没有使用vite,就要找Webpack.config.js文件)
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
配置项目内组件 & API 的自动引入
在使用 Vue
的过程中,每个 script
以及 js
文件中或多或少需要引入一些像 ref、reactive
等 VueAPI
,包括 VueRouter、Pinia
等都要引入一些 API
,还有我们自己写的组件也都需要我们手动去引入使用。那既然配置了组件库自动引入,我们接下来也配置API、以及页面组件的自动引入。
还是在vite.config.js
文件中
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
// 需要去解析的文件
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/ // .md
],
// imports 指定自动引入的包位置(名)
imports: ['vue', 'pinia', 'vue-router'],
resolvers: [ElementPlusResolver()],
}),
Components({
// imports 指定组件所在目录,默认为 src/components
dirs: ['src/components/', 'src/view/'],
// 需要去解析的文件
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
resolvers: [ElementPlusResolver()],
}),
],
})
配置 ESLint 和 Prettier
前面的文章已经介绍了这个,请移步:
https://blog.csdn.net/weixin_51416826/article/details/139156237?spm=1001.2014.3001.5502
Pinia构建用户仓库和持久化
首先安装Pinia
pnpm add pinia-plugin-persistedstate -D
封装pinia并持久化
在src目录下创建stores文件夹,在文件夹下创建index.js文件
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(persist)
export default pinia
// 仓库统一导出
export * from './modules/user'
在stores/modules/下创建user.js
// pinia 替代 Vuex 的具体用法
import { userGetInfoService } from '@/api/user'
import { defineStore } from 'pinia'
import { ref } from 'vue'
// 用户模块
export const useUserStore = defineStore(
'big-user',
() => {
const token = ref('')
const user = ref({})
return {
token,
user,
}
},
{
persist: true // 持久化
}
)
main.js中引入使用
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index'
import pinia from './stores/index'
const app = createApp(App)
app.use(pinia)
app.use(router)
app.mount('#app')
配置路由
创建src/router/index.js,同时配置拦截规则
import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{ path: '/login', component: () => import('@/views/login/LoginWeb.vue') },
{
path: '/',
component: () => import('@/views/layout/LayoutPage.vue'),
redirect: '/article/manage',
children: [
{
path: '/article/manage',
component: () => import('@/views/article/ArticleManage.vue')
},
{
path: '/article/channel',
component: () => import('@/views/article/ArticleChannel.vue')
},
{
path: '/user/info',
component: () => import('@/views/user/UserInfo.vue')
},
{
path: '/user/avatar',
component: () => import('@/views/user/UserAvatar.vue')
},
{
path: '/user/password',
component: () => import('@/views/user/UserPassword.vue')
}
]
}
]
})
//登录访问拦截
router.beforeEach((to) => {
// 如果没有token or 非登录页 拦截到登录
const userStore = useUserStore()
if (!userStore.token && to.path !== '/login') return '/login'
return true
})
export default router
此项目大家仅供参考,照搬不可取~