当前位置：首页 > news >正文

【VUE3】搭建项目准备工作

news 2025/7/29 11:37:18

0 目录

1 项目初始化

2 代码风格配置

3 提交代码检查配置

4 项目目录调整

5 安装ElementUI组件库

6 Pinia持久化

7 配置仓库统一管理

8 数据请求工具封装

9 路由设计

10 其他

1 项目初始化

1.1 使用脚手架创建项目

pnpm create vue

1.2 安装依赖

pnpm i

2 代码风格配置

见【VUE3】Eslint 与 Prettier 的配置_eslint-plugin-prettier-CSDN博客中的 8总结

注意：改完操作后记得重启，让最新的规则生效！

3 提交代码检查配置

3.1 初始化git

git init

3.2 安装husky

pnpm dlx husky-init && pnpm install

3.3 安装lint-staged（只检查修改的文件）

pnpm i lint-staged -D

3.4 配置packaged.json

{// ..."lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
}{"scripts": {// ..."lint-staged": "lint-staged"}
}

3.5 修改 .husky/pre-commit 文件

pnpm lint-staged

4 项目目录调整

删除src文件夹中assets、components、stores、views目录下所有文件

删除router/index.js文件中的默认路由

清除App.vue、main.js中多余代码

在src中新建api、utils文件夹

创建assets/main.scss，可以在里面写全局样式

安装sass依赖

pnpm add sass -D

5 安装ElementUI组件库

5.1 安装命令

pnpm install element-plus

5.2 配置按需导入

5.2.1 安装依赖

pnpm install -D unplugin-vue-components unplugin-auto-import

5.2.2 插入代码

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()],}),],
})

注意：在使用ElMessage组件时，不要手动导入，否则会与自动导入冲突，从而导致样式失效

示例：

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// 配置按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),// 配置按需导入AutoImport({imports: ['vue', 'vue-router', 'pinia'],resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

注意：imports: ['vue', 'vue-router', 'pinia'],可以让与其相关的方法无需导入，本篇为未配置时的代码

6 Pinia持久化

6.1 安装依赖

pnpm add pinia-plugin-persistedstate -D

6.2 在main.js中使用

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))

6.3 使用实例（先创建/stores/modules/user.js）

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user',() => {const token = ref()return { token }},{ persist: true }
)

7 配置仓库统一管理

7.1 创建文件stores/index.js

将main.js中的pinia配置统一移到此处，并在main.js中导入（此处不演示）

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'// 导出pinia配置
export default createPinia().use(persist)
// 导出仓库模块(调用其他仓库时统一走该文件)
export * from '@/stores/modules/user.js'

7.2 在main.js中导入

// ...
import pinia from './stores/index.js'
//...
app.use(pinia)

8 数据请求工具封装

8.1 安装axios

pnpm add axios

8.2 新建utils/request.js文件，并创建实例与拦截器

文档：axois创建实例 axios拦截器

示例：

import axios from 'axios'
import { useUserStore } from '@/stores'const apiServer = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 100000 // 超时时间(ms)
})// 添加请求拦截器
apiServer.interceptors.request.use((config) => {// 请求发送前const userStore = useUserStore()// 挂载tokenif (userStore.token) config.headers.Authorization = userStore.tokenreturn config},(error) => {// 请求出错return Promise.reject(error)}
)// 添加响应拦截器
apiServer.interceptors.response.use((response) => {// 响应数据前// 业务处理成功if (response.data.status === 0) return response// 业务处理失败ElMessage({ message: response.data.message || '服务异常', type: 'error' })return Promise.reject(response.data)},(error) => {// 响应出错ElMessage({ message: response.data.message || '服务异常', type: 'error' })return Promise.reject(error)}
)export default apiServer

注意：

1. 可以无需安装dotenv类似的插件，直接创建.env文件配置环境变量

2. 给客户端使用的变量要加VITE_前缀

3. 通过import.meta.env.xxx直接使用，无需导入

9 路由设计

9.1 在App.vue中配置路由出口

<script setup></script><template><div><router-view></router-view></div>
</template><style scoped></style>

9.2 配置基础路由

示例：router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores'// createRouter 创建路由实例
// 配置 history 模式
// 1. history模式：createWebHistory     地址栏不带 #
// 2. hash模式：   createWebHashHistory 地址栏带 #
// console.log(import.meta.env.DEV)// vite 中的环境变量 import.meta.env.BASE_URL  就是 vite.config.js 中的 base 配置项
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{ path: '/login', component: () => import('@/views/login/LoginPage.vue') }, // 登录页{path: '/',component: () => import('@/views/layout/LayoutContainer.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/profile',component: () => import('@/views/user/UserProfile.vue')},{path: '/user/avatar',component: () => import('@/views/user/UserAvatar.vue')},{path: '/user/password',component: () => import('@/views/user/UserPassword.vue')}]}]
})export default router

9.3 配置导航守卫

示例：router/index.js

// 登录访问拦截 => 默认是直接放行的
// 根据返回值决定，是放行还是拦截
// 返回值：
// 1. undefined / true  直接放行
// 2. false 拦回from的地址页面
// 3. 具体路径 或 路径对象  拦截到对应的地址
//    '/login'   { name: 'login' }
router.beforeEach((to) => {// 如果没有token, 且访问的是非登录页，拦截到登录，其他情况正常放行const useStore = useUserStore()if (!useStore.token && to.path !== '/login') return '/login'
})