pnpm 包管理器-创建项目

优势：比同类工具快 2倍左右，同时节省磁盘空间

安装方式：

1	$ npm install -g pnpm

创建项目：

1	$ pnpm create vue

ESLint & prettier 配置代码风格

环境同步：

安装插件 ESlint，开启保持自动修复
禁用了插件 Prettier，并关闭保存自动格式化

// ESlint插件 + Vscode配置 实现自动格式化修复
// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
},
// 保存代码，不自动格式化
"editor.formatOnSave": false,
"workbench.iconTheme": "vscode-icons"

配置文件 .eslintrc.cjs：

prettier 风格配置 https://prettier.io
1. 单引号
2. 不使用分号
3. 每行宽度至多80字符
4. 不加对象|数组最后逗号
5. 换行符号不限制（win mac 不一致）
vue组件名称多单词组成（忽略index.vue）
props解构（关闭）

rules: {
    // Eslint代码风格美化
    // 1. 禁用格式化插件 prettier  format on save 关闭
    // 2. 安装Eslint插件，并配置保存时自动修复
    'prettier/prettier': [
        'warn',
        {
            singleQuote: true, // 单引号
            semi: false, // 无分号
            printWidth: 80, // 每行宽度至多80字符
            trailingComma: 'none', // 不加对象|数组最后逗号
            endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
        }
    ],
    'vue/multi-word-component-names': [
        'warn',
        {
            ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
        }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
}

基于 husky 的代码检查工作流

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

husky 配置

git初始化 git init
初始化 husky 工具配置 https://typicode.github.io/husky/

1	$ pnpm dlx husky-init && pnpm install

修改 .husky/pre-commit 文件

pnpm lint

问题： 默认进行的是全量检查，耗时问题，历史问题。

lint-staged 配置

安装

1	$ pnpm i lint-staged -D

配置 package.json

{
  "name": "vue3-eventadmin", // 自定义项目名称
  // 省略...
  "scripts": {
    // 省略...
    "lint-staged": "lint-staged"
  },
  // 省略...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

修改 .husky/pre-commit 文件

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
  
yarn lint-staged
# pnpm lint-staged

调整项目目录

默认生成的目录结构不符合项目的需求，需要对其进行自定义改动

删除初始化的默认文件，包括assets、components、stores、views内的不需要的文件
修改剩余代码内容

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: []
})

export default router

src/App.vue

<script setup></script>

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<style scoped></style>

src/main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.mount('#app')

新建 api 文件夹、 utils 文件夹

拷贝初始化资源文件、安装预处理器插件

将项目需要的全局样式和图片文件，复制到 assets 文件夹中, 并将全局样式在main.js中引入

1	import '@/assets/main.scss'

安装 sass 依赖

1	$ pnpm add sass -D

VueRouter4 路由代码解析

创建路由实例由 createRouter 实现
路由模式：
1. history 模式使用：createWebHistory() ， http://xxx/user
2. hash 模式使用：createWebHashHistory()， http://xxx/#/user
3. 参数是基础路径，默认/

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: []
})

export default router

import.meta.env.BASE_URL 是Vite 环境变量：https://cn.vitejs.dev/guide/env-and-mode.html

vite.config.js 中的 base 配置项：

export default defineConfig({
    plugins: [vue()],
    base: '/jd', // 自定义base地址，http://xxx/jd/user
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

引入 element-ui 组件库

官方文档： https://element-plus.org/zh-CN/

安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

自动按需：

安装插件

1	$ pnpm add -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        ...
        AutoImport({
            resolvers: [ElementPlusResolver()]
        }),
        Components({
            resolvers: [ElementPlusResolver()]
        })
    ]
})

直接使用，默认 components 文件夹下的文件也会被自动注册

<template>
    <div>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
        <test-view>我是自定义的components组件</test-view>
        ...
    </div>
</template>

Pinia-构建用户仓库和持久化

官方文档： https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

安装插件 pinia-plugin-persistedstate

1	$ pnpm add pinia-plugin-persistedstate -D

使用 main.js

1
2
3

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

配置 store/user.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore(
    'big-user',
    () => {
        const token = ref('')
        const setToken = (newToken) => {
            token.value = newToken
        }
        const removeToken = () => {
            token.value = ''
        }
        return {
            token,
            setToken,
            removeToken
        }
    },
    {
        persist: true // 配置持久化
    }
)

Pinia-配置仓库统一管理

pinia 独立维护

现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一
优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

仓库统一导出

现在：使用一个仓库 `import { useUserStore } from ‘./stores/user.js’ 不同仓库路径不一致
优化：由 stores/index.js 统一导出，导入路径统一 ./stores，而且仓库维护在 stores/modules 中

// stores/index.js

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
  
const pinia = createPinia()
pinia.use(persist)
  
export default pinia
  
// import { userUserStore } from './modules/user'
// export { userUserStore }
export * from './modules/user'

<!-- App.vue -->
<script setup>
    import { useUserStore } from '@/stores'
    
    const userStore = new useUserStore()
</script>

<template>
    <div>我是App</div>
    <p>{{ userStore.token }}</p>
    <el-button type="success" @click="userStore.setToken('我是Alien')">
        登录
    </el-button>
    <el-button type="danger" @click="userStore.removeToken()">退出</el-button>
</template>

<style scoped></style>

数据交互-请求工具设计

创建 axios 实例

们会使用 axios 来请求后端接口，一般都会对 axios 进行一些配置（比如：配置基础地址等）

一般项目开发中，都会对 axios 进行基本的二次封装，单独封装到一个模块中，便于使用

安装 axios

1	$ pnpm add axios

新建 utils/request.js 封装 axios 模块

利用 axios.create 创建一个自定义的 axios 来使用

http://www.axios-js.com/zh-cn/docs/#axios-create-config

import axios from 'axios'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
    // TODO 1. 基础地址，超时时间
})

instance.interceptors.request.use(
    (config) => {
        // TODO 2. 携带token
        return config
    },
    (err) => Promise.reject(err)
)

instance.interceptors.response.use(
    (res) => {
        // TODO 3. 处理业务失败
        // TODO 4. 摘取核心响应数据
        return res
    },
    (err) => {
        // TODO 5. 处理401错误
        return Promise.reject(err)
    }
)

export default instance

完成 axios 基本配置

import { useUserStore } from '@/stores/user'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'

const baseURL = 'http://big-event-vue-api-t.itheima.net'
// 基础地址，超时时间
const instance = axios.create({
    baseURL,
    timeout: 100000
})
// 请求拦截器
instance.interceptors.request.use(
    (config) => {
        const userStore = useUserStore()
        if (userStore.token) { // 携带token
            config.headers.Authorization = userStore.token
        }
        return config
    },
    (err) => Promise.reject(err)
)
// 响应拦截器
instance.interceptors.response.use(
    (res) => {
        // 摘取核心响应数据
        if (res.data.code === 0) {
            return res
        }
        // 处理业务失败，给错误信息，抛出错误
        ElMessage({ message: res.data.message || '服务异常', type: 'error' })
        return Promise.reject(res.data)
    },
    (err) => {
        // 处理401权限不足错误
        ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })
        console.log(err)
        if (err.response?.status === 401) {
            router.push('/login')
        }
        return Promise.reject(err)
    }
)

export default instance
export { baseURL }