你在寻找Vue3移动端项目框架嘛？请看这里

• Z时代
• 2024-01-10
• 分类：综合

现在web开发变得更加美妙高效，在于开发工具设计得更好了，丰富性与易用性，都有所提高。丰富性带来了一个幸福的烦恼，就是针对实际应用场景，如何选择工具 ?

1. Vue Cli和Vite之间的选择

Vite的开发环境体验好，基于浏览器原生ES6 Modules提供的功能，不对ES高版本语法进行转译，省略掉耗时的打包流程， 可是考虑到：

1) 项目要用到真机调试功能，开发环境下调试代码时不能使用ES高版本的语法，用着不顺畅。

后面发现可用@vitejs/plugin-legacy解决此问题。

import legacy from \'@vitejs/plugin-legacy\';

2) 受制于历史项目包袱，感受到Vite的一些痛点：

• Vite最新版2.7.x版本自带的less-loader, 将背景色的rgba属性转换成四位16进制在有些手机上存在兼容性问题。
• 与某些第三方工具库（比如说Cache-Router）不兼容,编译会报错。
• Vite的缓存机制，有时候让人有些困惑，代码修改了，重启之后都不生效，要手动删除node_modules下的.vite文件夹才生效。 
• 给命令行动态添加自定义参数不太方便。
• Vite不支持装饰器语法，而有的第三方库用到了装饰器语法

3) Vite脚手架默认不集成TypeScript，Vue-Router，Vuex功能，使用起来不太方便

4) Vue Cli作为久经考验的成熟构建工具，稳定坑少，使用者众多，在生态环境和插件数量方面更好。

所以最终选择vue-cli最为Vue项目的脚手架。若是新项目，个人还是比较推荐使用Vite，构建速度确实快。

安装最新版本vue脚手架

npm install -g @vue/cli@next

安装成功后通过查看版本命令，确认是否安装成功

vue -V
@vue/cli 5.0.0-rc.1

2 创建vue3项目

vue create vue3-demo

Vue CLI v5.0.0-rc.1
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) // 不选择默认的vue3配置，是因为没有vue-router+typescript功能,需要自己引入
> Manually select features // 手动选择特性

Vue CLI v5.0.0-rc.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Choose Vue version
 (*) Babel               // 添加babel
 (*) TypeScript          // 添加类型约束功能
 ( ) Progressive Web App (PWA) Support
 (*) Router              // 添加路由功能
 (*) Vuex                // 添加状态管理功能
 (*) CSS Pre-processors  // 添加样式预编译功能  
 (*) Linter / Formatter  // 添加代码质量校验提示和格式化功能
 ( ) Unit Testing
 ( ) E2E Testing

Vue CLI v5.0.0-rc.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x    // 选择vue3

Vue CLI v5.0.0-rc.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? (y/N) N  // 是否使用class组件语法, ，选N  项目中用Composition API

 为了在Vue中使用TypeScript中，许多开发者选择了Class-Style Component 解决方案，时至今日，还有另外一个方案，Composition API 撰写的代码会完美享用类型推导，并且也不用做太多额外的类型标注。这也同样意味着你写出的 JavaScript 代码几乎就是 TypeScript 的代码。即使是非 TypeScript 开发者也会因此得到更好的 IDE 类型支持而获益。

常规风格

export default {
    data(){
        return {
            selectOptions: [\'A1\', \'A2\'],
            results: [],
            // ...
        }
    }
}

class 组件风格

import { Vue, Component } from \'vue-property-decorator\'
@Component
export default class Game extends Vue {
    // 定义data
  private selectOptions = [\'A1\', \'A2\']
  private results: string[] = []
    ...
}

? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes  // 是否使用babel工具自动为转换后的 TypeScript 代码注入 polyfiills，此处选择 Y 
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes   // 使用history网址路径风格，hash路径有点丑陋
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less    // sass在国内安装经常出错，所以选less
? Pick a linter / formatter config: Prettier  // 校验配置选择 eslint+prettier组合，沿袭项目使用习惯
? Pick additional lint features: Lint on save // 保存代码时校验代码质量, 提交代码时才去校验代码质量有些滞后
? Where do you prefer placing config for Babel, ESLint, etc. In dedicated config files // 将Babel，ESlint等配置文件从package.json中独立出来，因为json文件不能写注释
? Save this as a preset for future projects? Y // 将此配置保存起来，用于将来的项目 ，下次用vue-cli生成项目时，可以看到之前保存的配置项

启动服务

cd vue3-demo && yarn serve

在VSCode中打开app.vue发现文件中有许多红色的告警波浪线，安装Volar扩展，，绝大多数语法报错消失。顺便说一下为什么要使用Volar扩展，Vetur对<script setup>里面定义的响应式变量支持度不够好。

<script setup>
// ...
// 仅用于template，未在script中被使用，会报 count is declared but its value is never read.Vetur(6133)
const count = ref(1)
//...
</script>

3 配置vue文件保存时自动格式化

代码美化功能，是一个重要的影响开发体验的指标。书写潦草的代码，按下Ctrl+S保存之后，瞬间变成整洁有序， 这种视觉感受，让人神清气爽。

在项目下新建.vscode/settings.json,内容如下: 

{
  // ...
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "johnsoncodehk.volar"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // ...
}

修改项目下的.prettierrc文件为.prettierrc.js, 内容如下:

module.exports = {
  // 1.一行代码的最大字符数，默认是80(printWidth: <int>)
  printWidth: 120,
  // 2.tab宽度为2空格(tabWidth: <int>)
  tabWidth: 2,
  // 3.是否使用tab来缩进，我们使用空格(useTabs: <bool>)
  useTabs: false,
  // 4.结尾是否添加分号
  semi: true,
  // 5.使用单引号(singleQuote: <bool>)
  singleQuote: true,
  // 6.object对象中key值是否加引号（quoteProps: "<as-needed|consistent|preserve>"）as-needed只有在需求要的情况下加引号，consistent是有一个需要引号就统一加，preserve是保留用户输入的引号
  quoteProps: \'as-needed\',
  // 7.在jsx文件中的引号需要单独设置（jsxSingleQuote: <bool>）
  jsxSingleQuote: false,
  // 8.尾部逗号设置，es5是尾部逗号兼容es5，none就是没有尾部逗号，all是指所有可能的情况，需要node8和es2017以上的环境。（trailingComma: "<es5|none|all>"）
  trailingComma: \'all\',
  // 9.object对象里面的key和value值和括号间的空格(bracketSpacing: <bool>)
  bracketSpacing: true,// 10.箭头函数单个参数的情况是否省略括号，默认always是总是带括号（arrowParens: "<always|avoid>"）
  arrowParens: \'always\',
  // 11.range是format执行的范围，可以选执行一个文件的一部分，默认的设置是整个文件（rangeStart: <int>  rangeEnd: <int>）
  rangeStart: 0,
  rangeEnd: Infinity,
  // 12. requirePragma: <bool>,格式化有特定开头编译指示的文件 比如下面两种
  /**
   * @prettier
   */
  // or
  /**
   * @format
   */
  requirePragma: false,
  // 13.insertPragma: <bool> 自动插入pragma到已经完成的format的文件开头
  insertPragma: false,
  // 14. proseWrap: "<always|never|preserve>" 文章换行,默认情况下会对你的markdown文件换行 进行format会控制在printwidth以内
  proseWrap: \'always\',
  // 15. htmlWhitespaceSensitivity: "<css|strict|ignore>" html中的空格敏感性
  // html文档片段 1<b>2</b>3 原本显示为123, 不设置忽略空格的话格式化后会变成 1<b> 2 </b>3 显示为1 2 3
  htmlWhitespaceSensitivity: \'ignore\',
  // 16. vue script和style标签中是否缩进,开启可能会破坏编辑器的代码折叠
  vueIndentScriptAndStyle: false,
  // 17. endOfLine: "<lf|crlf|cr|auto>" 行尾换行符,默认是lf,
  endOfLine: \'lf\',
  // 18. 控制被引号包裹的代码是否进行格式化, 默认是auto,
  embeddedLanguageFormatting: \'off\'
}

4 配置移动端UI库

做移动端开发，虽然定制性比较强。绝大多数UI库组件都用不到，但像Toast，Modal，Picker，Form，PullRefresh等组件几乎是必用，所以需要引入移动端UI库。

vue3移动端UI库的选择:

 yarn add vant@3

按需引入

按需加载需要借助babel-plugin-import, 这样就可以只引入需要的组件，以减小项目体积

yarn add babel-plugin-import -D

 对babel.config.js进行配置

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: true,
      },
      "vant",
    ],
  ],
};

 main.js中引入vant的样式

import { createApp } from "vue";
import App from "./App.vue";
import "vant/lib/index.css";
createApp(App).mount("#app");

在App.vue中引入组件

<template>
  <div>
    <Button type="primary">主要按钮</Button>
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import { Button } from "vant";
export default {
  name: "App",
  components: {
    HelloWorld,
    Button,
  },
};
</script>

 5 配置开发环境请求代理

请求代理是解决本地开发请求跨域的最佳方式之一，对前后端代码都没有侵入性。  在vue.config.js中添加代理转发配置:

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 9000,
    host: "localhost",
    https: false,
    open: "/",
    proxy: {
      "/api": {
        target: "http://192.168.xx.xx:50000",
        secure: false,
        changeOrigin: true,
        logLevel: "debug",
      },
    },
  },
  // ....
});

6 配置路径别名

项目统一使用路径别名，好处是在代码中不用写../../../之类让人看着有些云里雾里的文件引用路径，此外用短路径替代长路径，书写也更方便。而且编辑器对于别名路径也有提示，可以跳转。

需要注意的是，如果使用了TypeScript，除了要在vue.config.js中配置路径别名之外，还需要在tsconfig.json配置路径别名，否则虽然打包编译不报错，但是代码编辑器却会提示引用路径有错误。

vue.config.js路径别名配置

const path = require(\'path\');
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                \'@\': path.join(__dirname, \'src/\')
            }
        }
    }
}

 tsconfig.json路径别名配置

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    // 包含自定义声明文件
    "typings/**/*.d.ts",
  ],
  // ...
}

7 设置自定义环境变量

开发调试的时候，需要动态在命令行添加动态参数，用以执行开发环境的调试逻辑，将自定义的命令行参数传到业务文件的方法是：

在package.json中传入自定义环境变量

{
  // ...
  "scripts": {
    "start:wx": "ytt && vue-cli-service serve --mode local --wx true",
  // ...
  },
}

在vue.config.js中设置自定义环境变量

// ...
const webpack = require(\'webpack\');
const { defineConfig } = require(\'@vue/cli-service\');
const { wx, mode } = require(\'minimist\')(process.argv.slice(2));
console.log({ wx, mode });
// console.log(process.env.VITE_API_HOST);
module.exports = defineConfig({
  // ...
  configureWebpack: {
    plugins: [
      // 定义环境变量
      new webpack.DefinePlugin({
        \'process.env.WX_JS_SDK_ENABLED\': wx, // 是否真机调试SDK模式
        \'process.env.CURRENT_ENV\': JSON.stringify(mode),
      }),
    ],
  },
});

在业务文件中接收自定义环境变量

import { createApp } from \'vue\';
import \'vant/lib/index.css\';
import App from \'./App.vue\';
import router from \'./router\';
import store from \'./store\';
console.log(process.env.WX_JS_SDK_ENABLED, process.env.CURRENT_ENV);
createApp(App).use(store).use(router).mount(\'#app\');

8 配置stylelint校验规则

stylelint的好处:

• 可以发现样式书写问题，如无效的十六进制值；重复的选择器；未命名的动画名称；错误的线性渐变语法；后面的属性覆盖前面的属性；前面的选择器优先级更高，覆盖后面的属性；选择器下未设置任何属性等。
• 能使所有人写的样式风格都一致，按照业内知名公司 (GitHub、Google、Airbnb)的样式规范要求写样式。
• 保存时自动对样式书写进行优化（如采用样式的简写形式，删除无意义小数点前面的0，调整样式顺序等)，修复可以修复的样式错误。

1.安装依赖

yarn  add -D stylelint stylelint-config-recess-order  stylelint-order stylelint-config-standard stylelint-less  stylelint-webpack-plugin postcss-html

2. 创建.stylelintrc.js 样式校验规则

module.exports = {
  plugins: [\'stylelint-less\'],
  extends: [\'stylelint-order\', \'stylelint-config-standard\', \'stylelint-config-recess-order\'],
  rules: {
    indentation: 2,
    \'at-rule-no-unknown\': [true, { ignoreAtRules: [\'mixin\', \'extend\', \'content\', \'include\'] }],
    \'no-empty-source\': null, //  null是关闭规则的意思--less文件内容可以为空
    \'no-descending-specificity\': null, //禁止特异性较低的选择器在特异性较高的选择器之后重写
    \'font-family-no-missing-generic-family-keyword\': null, // 关闭必须设置通用字体的规则
    \'property-no-unknown\': [
      true,
      {
        ignoreProperties: [\'box-flex\'], // 忽略某些未知属性的检测
      },
    ],
    \'selector-pseudo-element-no-unknown\': [
      true,
      {
        ignorePseudoElements: [\'ng-deep\'], // 忽略ng-deep这种合法的伪元素选择器报警
      },
    ],
    \'declaration-colon-newline-after\': null, //一个属性过长的话可以写成多行
    \'media-feature-name-no-unknown\': null, // 关闭禁止未知的媒体功能名
    // 下面的排序规则是stylelint-config-recess-order的css排序规则,
    // 要对某个属性排序进行调整,这个属性之前的样式排序都要配置在自定义属性排序中
    \'order/properties-order\': [
      {
        // Must be first.
        properties: [\'all\'],
      },
      {
        // Position.
        properties: [\'position\', \'top\', \'right\', \'bottom\', \'left\', \'z-index\'],
      },
      {
        // Display mode.
        properties: [\'box-sizing\', \'display\'],
      },
      {
        // Flexible boxes.
        properties: [\'flex\', \'flex-basis\', \'flex-direction\', \'flex-flow\', \'flex-grow\', \'flex-shrink\', \'flex-wrap\'],
      },
      {
        // Grid layout.
        properties: [
          \'grid\',
          \'grid-area\',
          \'grid-template\',
          \'grid-template-areas\',
          \'grid-template-rows\',
          \'grid-template-columns\',
          \'grid-row\',
          \'grid-row-start\',
          \'grid-row-end\',
          \'grid-column\',
          \'grid-column-start\',
          \'grid-column-end\',
          \'grid-auto-rows\',
          \'grid-auto-columns\',
          \'grid-auto-flow\',
          \'grid-gap\',
          \'grid-row-gap\',
          \'grid-column-gap\',
        ],
      },
      {
        // Align.
        properties: [\'align-content\', \'align-items\', \'align-self\'],
      },
      {
        // Justify.
        properties: [\'justify-content\', \'justify-items\', \'justify-self\'],
      },
      {
        // Order.
        properties: [\'order\'],
      },
      {
        // Box model.
        properties: [
          \'float\',
          \'width\',
          \'min-width\',
          \'max-width\',
          \'height\',
          \'line-height\',
          \'min-height\',
          \'max-height\',
          \'padding\',
          \'padding-top\',
          \'padding-right\',
          \'padding-bottom\',
          \'padding-left\',
          \'margin\',
          \'margin-top\',
          \'margin-right\',
          \'margin-bottom\',
          \'margin-left\',
          \'overflow\',
          \'overflow-x\',
          \'overflow-y\',
          \'-webkit-overflow-scrolling\',
          \'-ms-overflow-x\',
          \'-ms-overflow-y\',
          \'-ms-overflow-style\',
          \'clip\',
          \'clear\',
        ],
      },
      {
        // Typography.
        properties: [
          \'font\',
          \'font-family\',
          \'font-size\',
          \'font-style\',
          \'font-weight\',
          \'font-variant\',
          \'font-size-adjust\',
          \'font-stretch\',
          \'font-effect\',
          \'font-emphasize\',
          \'font-emphasize-position\',
          \'font-emphasize-style\',
          \'-webkit-font-smoothing\',
          \'-moz-osx-font-smoothing\',
          \'font-smooth\',
          \'hyphens\',
          \'color\',
          \'text-align\',
          \'text-align-last\',
          \'text-emphasis\',
          \'text-emphasis-color\',
          \'text-emphasis-style\',
          \'text-emphasis-position\',
          \'text-decoration\',
          \'text-indent\',
          \'text-justify\',
          \'text-outline\',
          \'-ms-text-overflow\',
          \'text-overflow\',
          \'text-overflow-ellipsis\',
          \'text-overflow-mode\',
          \'text-shadow\',
          \'text-transform\',
          \'text-wrap\',
          \'-webkit-text-size-adjust\',
          \'-ms-text-size-adjust\',
          \'letter-spacing\',
          \'word-break\',
          \'word-spacing\',
          \'word-wrap\', // Legacy name for `overflow-wrap`
          \'overflow-wrap\',
          \'tab-size\',
          \'white-space\',
          \'vertical-align\',
          \'list-style\',
          \'list-style-position\',
          \'list-style-type\',
          \'list-style-image\',
        ],
      },
      {
        // Accessibility & Interactions.
        properties: [
          \'pointer-events\',
          \'-ms-touch-action\',
          \'touch-action\',
          \'cursor\',
          \'visibility\',
          \'zoom\',
          \'table-layout\',
          \'empty-cells\',
          \'caption-side\',
          \'border-spacing\',
          \'border-collapse\',
          \'content\',
          \'quotes\',
          \'counter-reset\',
          \'counter-increment\',
          \'resize\',
          \'user-select\',
          \'nav-index\',
          \'nav-up\',
          \'nav-right\',
          \'nav-down\',
          \'nav-left\',
        ],
      },
      {
        // Background & Borders.
        properties: [
          \'background\',
          \'background-color\',
          \'background-image\',
          "-ms-filter:\\\'progid:DXImageTransform.Microsoft.gradient",
          \'filter:progid:DXImageTransform.Microsoft.gradient\',
          \'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader\',
          \'filter\',
          \'background-repeat\',
          \'background-attachment\',
          \'background-position\',
          \'background-position-x\',
          \'background-position-y\',
          \'background-clip\',
          \'background-origin\',
          \'background-size\',
          \'background-blend-mode\',
          \'isolation\',
          \'border\',
          \'border-color\',
          \'border-style\',
          \'border-width\',
          \'border-top\',
          \'border-top-color\',
          \'border-top-style\',
          \'border-top-width\',
          \'border-right\',
          \'border-right-color\',
          \'border-right-style\',
          \'border-right-width\',
          \'border-bottom\',
          \'border-bottom-color\',
          \'border-bottom-style\',
          \'border-bottom-width\',
          \'border-left\',
          \'border-left-color\',
          \'border-left-style\',
          \'border-left-width\',
          \'border-radius\',
          \'border-top-left-radius\',
          \'border-top-right-radius\',
          \'border-bottom-right-radius\',
          \'border-bottom-left-radius\',
          \'border-image\',
          \'border-image-source\',
          \'border-image-slice\',
          \'border-image-width\',
          \'border-image-outset\',
          \'border-image-repeat\',
          \'outline\',
          \'outline-width\',
          \'outline-style\',
          \'outline-color\',
          \'outline-offset\',
          \'box-shadow\',
          \'mix-blend-mode\',
          \'filter:progid:DXImageTransform.Microsoft.Alpha(Opacity\',
          "-ms-filter:\\\'progid:DXImageTransform.Microsoft.Alpha",
          \'opacity\',
          \'-ms-interpolation-mode\',
        ],
      },
      {
        // SVG Presentation Attributes.
        properties: [
          \'alignment-baseline\',
          \'baseline-shift\',
          \'dominant-baseline\',
          \'text-anchor\',
          \'word-spacing\',
          \'writing-mode\',
          \'fill\',
          \'fill-opacity\',
          \'fill-rule\',
          \'stroke\',
          \'stroke-dasharray\',
          \'stroke-dashoffset\',
          \'stroke-linecap\',
          \'stroke-linejoin\',
          \'stroke-miterlimit\',
          \'stroke-opacity\',
          \'stroke-width\',
          \'color-interpolation\',
          \'color-interpolation-filters\',
          \'color-profile\',
          \'color-rendering\',
          \'flood-color\',
          \'flood-opacity\',
          \'image-rendering\',
          \'lighting-color\',
          \'marker-start\',
          \'marker-mid\',
          \'marker-end\',
          \'mask\',
          \'shape-rendering\',
          \'stop-color\',
          \'stop-opacity\',
        ],
      },
      {
        // Transitions & Animation.
        properties: [
          \'transition\',
          \'transition-delay\',
          \'transition-timing-function\',
          \'transition-duration\',
          \'transition-property\',
          \'transform\',
          \'transform-origin\',
          \'animation\',
          \'animation-name\',
          \'animation-duration\',
          \'animation-play-state\',
          \'animation-timing-function\',
          \'animation-delay\',
          \'animation-iteration-count\',
          \'animation-direction\',
        ],
      },
    ],
  },
};

编译时自动修复

// ...
const { defineConfig } = require(\'@vue/cli-service\');
const StylelintPlugin = require(\'stylelint-webpack-plugin\');
module.exports = defineConfig({
  // ...
  configureWebpack: {
    plugins: [
      // ...
      new StylelintPlugin({
        files: [\'src/**/*.vue\'],
        // 编译时自动修复
        fix: true,
        // 这样配才能修复vue文件style片段中的less语法
        customSyntax: \'postcss-html\',
      }),
    ],
  },
});

安装VSCode stylelint扩展

在.vscode/settings.json中配置保存代码时自动修复样式错误

{
  "editor.codeActionsOnSave": {
    // ...
    "source.fixAll.stylelint": true
  },
  // 关闭vscode自带的css,less,scss报错提示
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "less"]
}

9 配置yapi-to-typescript

typescript面世以来，经历了一个从厌烦到喜欢的过程，厌恶的是要在原来开发的基础上，多做一些繁杂数据类型定义的工作，喜欢的是确实帮助开发者发现了许多语法错误，享受到接口和传参的便利提示， 综合起来，还是利大于弊，所以 越来越多的开发者开始加入ts大家庭。yapi-to-typescript这个工具，可以帮我们省去接口数据类型定义的工作量。让我们更愉快的与ts玩耍。

安装依赖

yarn add -D yapi-to-typescript

创建ytt.config.ts配置文件

import { defineConfig } from \'yapi-to-typescript\';
/**
 * 生成Api接口名称  Interface和ChangeCase数据类型参见node_modules\yapi-to-typescript\lib\esm\index.d.ts定义
 * @param interfaceInfo : Interface
 * @param changeCase:ChangeCase
 * @returns 请求响应接口名称--pascal命名
 */
function genApiInterfaceName(interfaceInfo, changeCase) {
  // 取解析路径dir最尾部的路径作为前缀路径
  const lastPath = interfaceInfo.parsedPath.dir.split(\'/\').pop();
  // 拼接前缀路径+文件名称
  return `${changeCase.pascalCase(lastPath)}${changeCase.pascalCase(interfaceInfo.parsedPath.name)}`;
}
export default defineConfig([
  {
    serverUrl: \'https://yapi.xxx.com\',
    typesOnly: true,
    target: \'typescript\',
    reactHooks: {
      enabled: false,
    },
    prodEnvName: \'项目名称\',
    // 将生成文件路径转化成小驼峰命名方式
    outputFilePath: (interfaceInfo, changeCase) => {
      // 文件夹名称取api-url路径末尾2个
      const filePathArr = interfaceInfo.path.split(\'/\').slice(-2);
      const filePath = filePathArr.map((item) => changeCase.camelCase(item)).join(\'/\');
      return `typings/httpTypes/${filePath}.ts`;
    },
    // 生成ts文件中请求参数interface名称,将下划线命名转换成pascal命名
    getRequestDataTypeName: (interfaceInfo, changeCase) => {
      return `${genApiInterfaceName(interfaceInfo, changeCase)}Request`;
    },
    // 生成ts文件中请求响应数据interface名称,将下划线命名转换成pascal命名
    getResponseDataTypeName: (interfaceInfo, changeCase) => {
      return `${genApiInterfaceName(interfaceInfo, changeCase)}Response`;
    },
    // 响应数据中要生成ts数据类型的键名
    dataKey: \'retdata\',
    projects: [
      {
        // token获取方式： 在yapi-设置-token配置中查看
        token: \'xxx\',
        // 分类id查找方式: 点击接口左侧的分类菜单,查看url地址栏最后面的数字获取
        // 分类id配置特别重要,配置错了无法生成对应的ts数据类型定义文件
        categories: [
          {
            id: [xxx], // 民生立减金API分类id
          },
        ],
      },
    ],
  },
]);

3.在package.json中配置ytt指令

{
  // ...
  "scripts": {
    "start": "ytt && vue-cli-service serve --mode local",
    "build": "ytt && vue-cli-service build --mode local",
    "ytt": "ytt",
  },
}

4.在.gitignore中添加对httpTypes下文件的忽略

# ...
/typings/httpTypes/*
# ...

10 配置commitlint

commit message 是程序员开发的日常高频操作，自然状态下commit message 呈现五花八门的书写风格，不利于阅读和维护，规范的 commit message 有助于团队做 code review, 输出清晰明了的 CHANGELOG， 有利于项目的长期维护。

安装依赖包

yarn add -D husky conventional-changelog-cli @commitlint/{cli,config-conventional}

创建提交校验配置文件commitlint.config.js

/**
 *  git commit最佳实践
 *  1.经常commit,One Thing，One Commit
 *  2.commit之前测试，不要commit一半工作；
 *  3.编写规范的commit message
 */
/**
 * Commit message 包括三个部分：Header，Body 和 Footer
 * <type>(<scope>): <subject>
 * 空一行
 * <body>
 * 空一行
 * <footer>
 */
module.exports = {
  extends: [\'@commitlint/config-conventional\'],
  rules: {
    // Header包括三个字段：type（必需）、scope（可选）和subject（必需）。最多200字
    \'header-max-length\': [2, \'always\', 200],
    // 提交类型<type>枚举
    \'type-enum\': [
      2,
      \'always\',
      [
        \'init\', // 项目初始化
        \'clean\', // 清理过时无用文件
        \'merge\', // 合并代码
        \'style\', //  修改样式文件(包括css/less/sass,图片,字体文件)
        \'format\', // 格式化,不影响代码含义的修改，比如空格、格式缩进、缺失的分号等
        \'build\', // 改变构建流程、或者增加依赖库、工具等 如webpack.config.js,package.json yarn.lock
        \'chore\', // 各种配置文件的修改,  如.gitignore,tsconfig.json,.vscode,.tenone, eslint/stylelint,envConfig
        \'ci\', // 对CI配置文件或脚本进行了修改
        \'docs\', // 修改项目说明文档
        \'feat\', // 新增功能
        \'fix\', // 修复bug
        \'perf\', // 性能优化
        \'refactor\', // 既不是修复bug也不是添加功能的代码重构
        \'revert\', // 版本回退
        \'test\', // 修改测试用例
      ],
    ],
    // 格式-可选值
    // \'lower-case\' 小写 lowercase
    // \'upper-case\' 大写 UPPERCASE
    // \'camel-case\' 小驼峰 camelCase
    // \'kebab-case\' 短横线 kebab-case
    // \'pascal-case\' 大驼峰 PascalCase
    // \'sentence-case\' 首字母大写 Sentence case
    // \'snake-case\' 下划线 snake_case
    // \'start-case\' 所有首字母大写 start-case
    // <type> 不能为空
    \'type-empty\': [2, \'never\'],
    // <type> 格式 小写
    \'type-case\': [2, \'always\', \'lower-case\'],
    // <scope> 关闭改动范围不能为空规则
    \'scope-empty\': [0, \'never\'],
    // <scope> 格式 小写
    \'scope-case\': [2, \'always\', \'lower-case\'],
    // <subject> 不能为空
    \'subject-empty\': [2, \'never\'],
    // <subject> 关闭 以.为结束标志
    \'subject-full-stop\': [0, \'never\', \'.\'],
    // <subject> 格式
    \'subject-case\': [2, \'never\', []],
    // <body> 以空行开头
    \'body-leading-blank\': [1, \'always\'],
    // <footer> 以空行开头
    \'footer-leading-blank\': [1, \'always\'],
  },
};

3. 创建提交校验shell脚本 husky.sh和commit-msg

yarn husky install

在.husky文件夹下创建commit-msg文件

npx husky add .husky/commit-msg

在.husky/commit-msg文件中写入

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
# 提交记录检查
yarn commitlint --edit $1
# 代码重复率检测
yarn jscpd
# 格式化检查
yarn format:check
# eslint检查
yarn lint:check

11 配置代码重复率检测工具jscpd

代码的简洁之道有一条铁律是 Don\'t Repeat Yourself，那么如何快速地检测出项目出是否存在着大段的重复代码，靠人工检查显然不可取，这种重复体力活应该交给工具。

检测前端代码重复率的工具有jsinspect、jscpd，PMD-CPD（PMD\'s Copy/Paste Detector）

• jsinspect工具支持js和jsx格式的文件，基于抽象语法树，可以检测出结构类似的代码块
• PMD-CPD工具支持js文件检测，也可以自己开发扩展包来解析指定的语言
• jscpd工具支持文件格式广泛，如js、jsx、vue、ts、less，java、oc等。其重复率判定依据为一定长度标识符的MD5值是否相同

每个工具各有其优缺点，若只需要检测js或jsx文件，且对检测结果要求较高，可以选择jsinspect或者PMD-CPD工具，若考虑检测工具的通用性，可以选择jscpd工具。

安装：

npm install -g jscpd

用法：

jscpd  src/*

在项目下创建.jscpd.json配置文件

{ 
  // 重复率阈值
  "threshold": 0.1,
  // 报告输出格式
  "reporters": [
    "html",
    "console"
  ],
  "ignore": [
    "dist/**",
    "node_modules/**"
  ],
  // 文件路径使用相对路径
  "absolute": false
}

参考文献

• Vue3+TS，写一个逼格满满的项目

• Vue3,我决定不再使用Vuex

• vue.config.js配置项

• prettier使用指南（包含所有配置项）

• vue3 composition（组合式）API 是什么？我为什么要使用它？

• 检测前端代码重复率工具

• Vue 3 生命周期完整指南

• Ant Design Pro Vue 
• [try-catch优雅写法]

以上是 你在寻找Vue3移动端项目框架嘛？请看这里 的全部内容， 来源链接： utcz.com/z/376669.html