Vue3项目初始化：

紧接着前面的文章：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

此项目大家仅供参考，照搬不可取~