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

Vue3+Ts+Sass搭建

      • git cz的配置
      • mock 数据
          • 配置viteMockServe
      • 建立mock/user.ts文件夹
          • 测试一下mock是否配置成功
      • axios二次封装
          • 解决env报错问题,ImportMeta”上不存在属性“env”
      • 统一管理相关接口
          • 新建api/index.js
      • 路由的配置
          • 建立router/index.ts
          • 将路由进行集中封装,新建router.ts
          • main.ts的vue-router的挂载
      • 解决Vue3的el-input无法输入

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<

你可能感兴趣的:(【前端工程化】,sass,前端,css,vue)