【项目管理后台】Vue3+Ts+Sass实战框架搭建二

git cz的配置

• 安装： npm install -g commitizen
• 安装：pnpm install -D cz-git
• package.json文档中

// package.json
 "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  }

• 新增.commitlintrc.cjs

// .commitlintrc.js
module.exports = {
  rules: {
    // @see: https://commitlint.js.org/#/reference-rules
  },
  prompt: {
    messages: {
      type: '选择你要提交的类型 :',
      scope: '选择一个提交范围（可选）:',
      customScope: '请输入自定义的提交范围 :',
      subject: '填写简短精炼的变更描述 :\n',
      body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
      confirmCommit: '是否提交或修改commit ?',
    },
    types: [
      {
        value: 'feat',
        name: 'feat:        新增功能 | A new feature',
        emoji: '✨',
      },
      { value: 'fix', name: 'fix:         修复缺陷 | A bug fix', emoji: '🐛' },
      {
        value: 'docs',
        name: 'docs:        文档更新 | Documentation only changes',
        emoji: '📄',
      },
      {
        value: 'style',
        name: 'style:       代码格式 | Changes that do not affect the meaning of the code',
        emoji: '💄',
      },
      {
        value: 'refactor',
        name: 'refactor:    代码重构 | A code change that neither fixes a bug nor adds a feature',
        emoji: '♻️',
      },
      {
        value: 'perf',
        name: 'perf:        性能提升 | A code change that improves performance',
        emoji: '⚡️',
      },
      {
        value: 'test',
        name: 'test:        测试相关 | Adding missing tests or correcting existing tests',
        emoji: '✅',
      },
      {
        value: 'build',
        name: 'build:       构建相关 | Changes that affect the build system or external dependencies',
        emoji: '📦️',
      },
      {
        value: 'ci',
        name: 'ci:          持续集成 | Changes to our CI configuration files and scripts',
        emoji: '🎡',
      },
      {
        value: 'revert',
        name: 'revert:      回退代码 | Revert to a commit',
        emoji: '⏪️',
      },
      {
        value: 'chore',
        name: 'chore:       其他修改 | Other changes that do not modify src or test files',
        emoji: '🔨',
      },
    ],
    useEmoji: true,
    // scope 类型（定义之后，可通过上下键选择）
    scopes: [
      ['components', '组件相关'],
      ['hooks', 'hook 相关'],
      ['utils', 'utils 相关'],
      ['element-ui', '对 element-ui 的调整'],
      ['styles', '样式相关'],
      ['deps', '项目依赖'],
      ['auth', '对 auth 修改'],
      ['other', '其他修改'],
    ].map(([value, description]) => {
      return {
        value,
        name: `${value.padEnd(30)} (${description})`,
      }
    }),
    // 是否允许自定义填写 scope，在 scope 选择的时候，会有 empty 和 custom 可以选择。
    allowCustomScopes: true,
    skipQuestions: ['body', 'breaking', 'footer'],
    subjectLimit: 100, // subject 限制长度
    // 设置只有 type 选择了 feat 才询问 breaking message
    allowBreakingChanges: ['feat'],
  },
}

mock 数据

• 当后端接口还没有的时候，这个用于前端自己造数据
• 安装依赖地址
• 安装：pnpm install -D vite-plugin-mock mockjs

pnpm install -D vite-plugin-mock@2.9.6

配置viteMockServe

//导入
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {
  return {
    plugins: [
      vue(),
      //配置
      viteMockServe({
        localEnabled: command === 'serve', //保证开发阶段使用mock接口
      }),
    ],
  }
}

• localEnabled如果有波浪线报错
• 解决办法：卸载 vite-plugin-mock插件，然后重新安装2.9.6版本的插件

建立mock/user.ts文件夹

//getUser 此函数执行会返回一个数组，数组里包含用户信息
function getUser() {
  return [
    {
      userId: 1,
      avatar:
        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      username: 'admin',
      password: '111111',
      desc: '平台管理员',
      roles: ['平台管理员'],
      buttons: ['cuser.detail'],
      routes: ['home'],
      token: 'Admin Token',
    },
    {
      userId: 2,
      avatar:
        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      username: 'system',
      password: '111111',
      desc: '系统管理员',
      roles: ['系统管理员'],
      buttons: ['cuser.detail', 'cuser.user'],
      routes: ['home'],
      token: 'System Token',
    },
  ]
}

export default [
  // 用户登录接口
  {
    url: '/api/user/login', //请求地址
    method: 'post', //请求方式
    response: ({ body }) => {
      //获取请求体携带过来的用户名与密码
      const { username, password } = body
      //调用获取用户信息函数,用于判断是否有此用户
      const checkUser = getUser().find(
        (item) => item.username === username && item.password === password,
      )
      //没有用户返回失败信息
      if (!checkUser) {
        return { code: 201, data: { message: '账号或者密码不正确' } }
      }
      //如果有返回成功信息
      const { token } = checkUser
      return { code: 200, data: { token } }
    },
  },
  // 获取用户信息
  {
    url: '/api/user/info',
    method: 'get',
    response: (request) => {
      //获取请求头携带token
      const token = request.headers.token
      //查看用户信息是否包含有次token用户
      const checkUser = getUser().find((item) => item.token === token)
      //没有返回失败的信息
      if (!checkUser) {
        return { code: 201, data: { message: '获取用户信息失败' } }
      }
      //如果有返回成功信息
      return { code: 200, data: { checkUser } }
    },
  },
]

测试一下mock是否配置成功

• 好的，看着可以使用，那么正式在项目中使用，这里main.ts就先删除

axios二次封装

• 为更好的与后端进行交互，需要使用axios插件实现网络请求

• 一般对axios进行二次封装

• 使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

• 使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理 http 网络错误)

import axios from 'axios'
import { ElMessage } from 'element-plus'
//创建axios实例，创建后可以设置一下其他配置，基础路径，超时请求
let request = axios.create({
  baseURL: (import.meta as any).env.VITE_APP_BASE_API,
  timeout: 5000,
})
//请求拦截器
request.interceptors.request.use((config) => {
  //config,配置请求头，经常携带公共参数token
  return config
})
//响应拦截器
request.interceptors.response.use(
  (response) => {
    return response.data
  },
  (error) => {
    //处理网络错误
    let msg = ''
    let status = error.response.status
    switch (status) {
      case 401:
        msg = 'token过期'
        break
      case 403:
        msg = '无权访问'
        break
      case 404:
        msg = '请求地址错误'
        break
      case 500:
        msg = '服务器出现问题'
        break
      default:
        msg = '无网络'
    }
    // 提示错误信息
    ElMessage({
      type: 'error',
      message: msg,
    })
    return Promise.reject(error)
  },
)
export default request

解决env报错问题，ImportMeta”上不存在属性“env”

• import.meta.env.VITE_APP_BASE_API,报错类型“ImportMeta”上不存在属性“env”
• 方法一：忽略类型校验

//@ts-ignore
 baseURL: import.meta.env.VITE_APP_BASE_API,

• 方法二：使用类型断言

baseURL: (import.meta as any).env.

• 其余方法我这试着没生效，类似 “types”: [“vite/client”],

统一管理相关接口

新建api/index.js

// 统一管理相关接口
import request from '@/utils/request'
// 统一ts接口参数类型定义
import type { setlogin, getloginDate } from './type'
// 统一管理
enum API {
  LOGIN_URL = '/user/login',
}
//统一暴露请求函数
export const getLogin = (data: setlogin) =>
  request.post<any, getloginDate>(API.LOGIN_URL, data)

• 页面上使用即可

import { getLogin } from '@/api/index'
const getlogin = () => {
  getLogin({ username: 'admin', password: '111111' })
}

路由的配置

• 安装：pnpm install vue-router

建立router/index.ts

// 通过vue-router插件实现模板路由
import { createRouter, createWebHashHistory, RouterOptions } from 'vue-router'

import { constantRoute } from './routers'
// 创建路由器
let router = createRouter({
  // 路由模式
  history: createWebHashHistory(),
  routes: constantRoute,
  //路由切换滚动条
  scrollBehavior() {
    return {
      left: 0,
      top: 0,
    }
  },
})
export default router

将路由进行集中封装，新建router.ts

//index.ts下routes类型报错问题，增加类型定义
import { RouteRecordRaw } from 'vue-router'
// 对外暴露配置的路由
export const constantRoute: RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'login', //命名路由
    component: () => import('@/view/login/index.vue'),
  },
  {
    path: '/',
    name: 'home',
    component: () => import('@/view/home/index.vue'),
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/view/404/404.vue'),
  },
  //重定向，打开任何不存在的页面，跳转到404
  {
    path: '/:pathMatch(.*)*',
    redirect: '/404',
    name: 'Any',
  },
]

main.ts的vue-router的挂载

//引入Vue-Router
import router from './router'
app.use(router)

解决Vue3的el-input无法输入

• 原因Vue3里面这两个值不能相同