学做网站能找到工作么重庆搭建工厂
0 目录
1 项目初始化
2 代码风格配置
3 提交代码检查配置
4 项目目录调整
5 安装ElementUI组件库
6 Pinia持久化
7 配置仓库统一管理
8 数据请求工具封装
9 路由设计
10 其他
1 项目初始化
1.1 使用脚手架创建项目
pnpm create vue1.2 安装依赖
pnpm i2 代码风格配置
见 【VUE3】Eslint 与 Prettier 的配置_eslint-plugin-prettier-CSDN博客 中的 8总结
注意：改完操作后记得重启，让最新的规则生效！
3 提交代码检查配置
3.1 初始化git
git init3.2 安装husky
pnpm dlx husky-init && pnpm install3.3 安装lint-staged（只检查修改的文件）
pnpm i lint-staged -D3.4 配置packaged.json
{// ..."lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
}{"scripts": {// ..."lint-staged": "lint-staged"}
}3.5 修改 .husky/pre-commit 文件
pnpm lint-staged4 项目目录调整
删除src文件夹中assets、components、stores、views目录下所有文件
删除router/index.js文件中的默认路由
清除App.vue、main.js中多余代码
在src中新建api、utils文件夹
创建assets/main.scss，可以在里面写全局样式
安装sass依赖
pnpm add sass -D5 安装ElementUI组件库
5.1 安装命令
pnpm install element-plus5.2 配置按需导入
5.2.1 安装依赖
pnpm install -D unplugin-vue-components unplugin-auto-import5.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 -D6.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 axios8.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 router9.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'
})10 其他
10.1 安装图标库
pnpm i @element-plus/icons-vue10.2 富文本编辑器
官网：VueQuill | Rich Text Editor Component for Vue 3