紧接着前面的文章：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此项目大家仅供参考，照搬不可取~
