vue3项目创建+配置

一. 创建项目

  注意：vue3项目node版本必须16以上版本

// 1. npm
npm init vue@latest
npm create vue

// 2.pnpm
pnpm create vue

配置选择：Vue Router、Pinia、ESLint、Prettier

二. 配置eslint

1、需配置文件

        1.1.eslintrc.cjs文件中追加代码

rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printwidth: 80, // 每行宽度至多80字符
        trailingComma: 'none' // 换行符号不限制(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'
  }

        1.2  vscode 左下角齿轮 --> 设置  --> 右上角打开settings.json文件
               配置保存时自动修复 format on save 关闭

  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  // 关闭保存自动格式化
  "editor.formatOnSave": false,

2、 vscode配置

        2.1 需禁用插件 ‘vetur’、‘prettier’、

        2.2需安装插件 ‘volar (vue-Fooicial)’、‘ESlint’

三. husky 代码检查工作流（非必要）

        husky是一个 git hooks 工具。

        作用就是可以在你提交代码到git时检查代码是否有ESLint的报错

       1.配置

        1.1 git初始化 git init

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

pnpm dlx husky-init && pnpm install

        1.3 修改 .husky/pre-committ文件

                删除npm test，改为pnpm lint

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

2. 扩展配置：提交git时只检查指定后缀文件，并且只检查新修改的代码

        2.1 安装

pnpm i lint-staged -D

        2.2 配置 package.json

{
  
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged",
  },

  // ... 省略 ...

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


}

        2.3 把上面修改过的pnpm lint 改为配置的 pnpm lint-staged

       扩展配置完成后：提交git时只会对新修改的代码进行校验并且只检查指定后缀文件

四. 路由配置

官方文档：Vue Router | Vue.js 的官方路由

1. 安装：pnpm add vue-router  (如果前面已经勾选了配置则不用）

2.配置 router/index.js

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

// createRouter用于创建路由实例
// 配置 history 模式
// history模式：  createWebHistory      路由不带#号
// hash模式：     createWebHashHistory  路由带#号

// vite 中的环境变量 import.meta.env.BASE_UR 默认为 '/' 可在 vite.config.js中的base配置
const router = createRouter({
  // createWebHistory(基础路径)
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
            { path: '/login', component: () => import('@/views/login/LoginPage.vue') },
            ...
          ]
})

export default router

3. main.js 导入

  // ... 省略 ...
import router from './router'
app.use(router)
  // ... 省略 ...

4. 使用

// 在 vue3 CompositionAPI 中
import { useRoute, useRouter } from 'vue-router'
// 1. 获取路由对象 router useRouter
const router = useRouter()

// 2. 获取路由参数 route useRoute
const route = useRoute()

// 使用：router.push('/xxx')

五. 配置element-plus

1. 安装： pnpm add element-plus

2. 配置按需导入：

    官方文档：一个 Vue 3 UI 框架 | Element Plus

3. 配置按需导入后直接可以使用组件，无需引入；

    并且 components 下的文件也会被自动注册

4. eslintrc中声明全局变量名，解决 ElMessage 报错问题

module.exports = {  
  ...
  global: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoaoding: 'readonly',
  }
}

六. axios配置

官方文档：axios中文网|axios API 中文文档 | axios

1. 安装：pnpm add axios

2.引入创建：utils/request.js

import axios from 'axios'
// import { useCounterStore } from "@/store";
// import router from "@/router"

const baseURL = 'http://.....'

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

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    // const useStore = useCounterStore()
    // if(useStore.token){
      // config.headers.xxx = useStore.token
    // }
    return config
  },
  (err) => {
    Promise.reject(err)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    if(res.data.code == 1) {
      return res
    }
    // 处理业务失败
    ElMessage.error(res.data.msg || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // TODO 5. 处理401错误
    // 错误特殊情况 => 401权限不足 => token过期
    // if(err.response?.status === 401){
      // router.push('/login')
    // }

    // 错误默认情况
    ElMessage.error(err.response.data.msg || '服务异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

3. 使用：

3.1 创建js文件封装方法并导出：api/xxx.js

import request from "@/utils/request";

export const userRegisterService = (data) => {
    // return request.post('/api/reg',{ ...data })
    return request({
        url:'/xxx/xxx',
        method:'post',
        data
    })
}

3.2 组件内引用使用

import { userRegisterService } from "@/api/login"

const btnZcFn = async () => {
  let res = await userRegisterService(data)
}