前端-Vue3项目创建以及初始化
目录
一.安装pnpm
二.创建Vue3项目
打开项目后有可能会提示：
三.修改eslint和prettier的配置
四.基于 husky 的代码检查工作流
五.调整项目的目录
六.引入 element-ui 组件库
七.Pinia - 构建用户仓库 和 持久化
八.配置axios
一.安装pnpm
pnpm的安装
https://blog.csdn.net/weixin_52159554/article/details/150926868?sharetype=blogdetail&sharerId=150926868&sharerefer=PC&sharesource=weixin_52159554&spm=1011.2480.3001.8118
二.创建Vue3项目
pnpm create vue
进入创建好的项目路径，使用pnpm i安装项目依赖
pnpm i
安装好依赖后使用pnpm dev查看项目是否创建成功
pnpm dev
使用ctrl+鼠标右键点击链接进入网页，显示以下网页表明Vue3项目搭建成功。
然后用Vscode打开项目：
打开项目后有可能会提示：
这个提示是 VSCode 在提醒你：
你现在的项目是 Vue 3，而你启用了 Vetur 插件。
不过在 Vue 3 项目中，官方推荐使用 Volar 插件来代替 Vetur。
解决方法（推荐做法）：
-
卸载或禁用 Vetur
-
打开命令面板（Ctrl + Shift + P）。
-
输入 “Extensions: Show Installed Extensions”。
-
搜索 “Vetur”，点击 “Disable” 或 “Uninstall”。
-
-
安装 Volar
-
在扩展市场中搜索 “Volar”。
-
全名是 “Vue Language Features (Volar)”。
-
Volar现在已经改名为Vue-office
-
安装完成后，重启 VSCode。
-
-
（可选）安装 TypeScript Vue Plugin
如果你的项目使用 TypeScript，请在tsconfig.json中添加：-
{"compilerOptions": {"types": ["vue"]} }
-
三.修改eslint和prettier的配置
前端-配置Prettier与ESLint9https://blog.csdn.net/weixin_52159554/article/details/153408695?spm=1001.2014.3001.5501
四.基于 husky 的代码检查工作流
如果没有的话，需要先安装git：
Git-Git和TortoiseGit的安装以及使用https://blog.csdn.net/weixin_52159554/article/details/150977723
然后重启VScode。
在项目中初始化git仓库：
git init # 初始化 Git 仓库，会生成 .git
使用git add和git commit备份代码：
从上面的图片中可以看出，提交的代码明明有问题但是还是完成了代码的git，此时需要使用husky。
husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )
pnpm dlx husky-init && pnpm install
修改 .husky/pre-commit 文件：
完成上面步骤后，在备份代码：
此时会提示代码有问题，无法完成备份。
按照错误提示修改代码：
五.调整项目的目录
创建全局样式文件：
在main.js文件中导入全局样式文件：
-
安装 sass 依赖
pnpm add sass -D
六.引入 element-ui 组件库
element-plus官网https://element-plus.org/zh-CN/guide/installation
安装element-plus：
pnpm add element-plus
安装按需引入的插件：
pnpm add -D unplugin-vue-components unplugin-auto-import
然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中：
全选复制粘贴就可以：
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({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})],base: '/',resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})配置好后，就可以在组件中使用element-plus提供的组件，而且不需要收到导入，安装的插件会自动在需要的导入：
七.Pinia - 构建用户仓库 和 持久化
安装persist插件：
pnpm add pinia-plugin-persistedstate -D
main.js:
import './assets/main.scss'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'
import persist from 'pinia-plugin-persistedstate'
const app = createApp(App)app.use(createPinia().use(persist))
app.use(router)app.mount('#app')
stores/user.js:
import { defineStore } from 'pinia'
import { ref } from 'vue'export const useUserStore = defineStore('userData',() => {const token = ref('')const setToken = (newToken) => {token.value = newToken}const clearToken = () => {token.value = ''}return {token,setToken,clearToken}},{persist: true}
)
pinia分离：
index.js:
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'const pinia = createPinia()pinia.use(persist)export default piniaexport * from './modules/user'
user.js:
import { defineStore } from 'pinia'
import { ref } from 'vue'export const useUserStore = defineStore('userData',() => {const token = ref('')const setToken = (newToken) => {token.value = newToken}const clearToken = () => {token.value = ''}return {token,setToken,clearToken}},{persist: true}
)
main.js:
import './assets/main.scss'
import { createApp } from 'vue'import pinia from './stores'import App from './App.vue'
import router from './router'
const app = createApp(App)app.use(pinia)
app.use(router)app.mount('#app')
app.vue
<script setup>
import { useUserStore } from './stores'const userStore = useUserStore()
</script><template><div>{{ userStore.token }}<br /><el-button type="primary" @click="userStore.setToken('ssss')">修改Token的值</el-button><el-button type="primary" @click="userStore.clearToken">删除Token的值</el-button></div>
</template><style scoped></style>
八.配置axios
安装axios:
pnpm add axios
// 导入用户状态管理（Pinia 中的 userStore）
import { useUserStore } from '@/stores/user'
// 导入 axios，用于发送 HTTP 请求
import axios from 'axios'
// 导入 vue-router 实例，用于在响应拦截中进行页面跳转
import router from '@/router'
// 导入 Element Plus 消息提示组件
import { ElMessage } from 'element-plus'// 定义基础请求路径（接口域名）
const baseURL = 'http://big-event-vue-api-t.itheima.net'// 创建 axios 实例，用于封装全局配置
const instance = axios.create({baseURL, // 请求的基础路径timeout: 100000 // 超时时间（单位：毫秒），超过此时间将抛出错误
})/* -------------------- 请求拦截器 -------------------- */
instance.interceptors.request.use((config) => {// 获取用户存储（Pinia）const userStore = useUserStore()// 如果用户已登录且存在 token，则在请求头中携带 Authorizationif (userStore.token) {config.headers.Authorization = userStore.token}// 返回修改后的请求配置return config},(err) => Promise.reject(err) // 请求发送失败时直接抛出错误
)/* -------------------- 响应拦截器 -------------------- */
instance.interceptors.response.use((res) => {// 当接口返回 code === 0 时，表示请求成功if (res.data.code === 0) {return res}// 否则弹出错误提示信息ElMessage({message: res.data.message || '服务异常',type: 'error'})// 将错误信息以 Promise.reject 抛出，便于外部捕获return Promise.reject(res.data)},(err) => {// 捕获接口异常（如 4xx / 5xx）ElMessage({message: err.response?.data?.message || '服务异常',type: 'error'})console.log(err) // 输出错误信息方便调试// 如果状态码为 401（未授权 / 登录过期），跳转回登录页if (err.response?.status === 401) {router.push('/login')}// 抛出错误对象return Promise.reject(err)}
)// 默认导出封装好的 axios 实例
export default instance
// 同时导出基础路径，以便其他模块使用
export { baseURL }