緊接著前面的文章：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# orpnpm 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/componentsdirs: ['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此項目大家僅供參考，照搬不可取~
