Vue-CLI搭建Vue3.x+TypeScript项目.png

前言：前端工程化开发总结，使用Vue-CLI脚手架搭建Vue3.x + Typescript项目，整体项目的环境配置。

下载安装Vue-CLI

  • 官方文档：Vue CLI 🛠️ Vue.js 开发的标准工具
    1. npm install -g @vue/cli
    2. # or
    3. yarn global add @vue/cli
    4. # or
    5. cnpm install -g @vue/cli
    查看版本：vue --version
    image.png

    创建项目

    新建并初始化项目文件夹
    1. vue create vue3-cli-demo
    选择最后一项自定义相关配置
    image.png
    全配置搭建测试
    image.png

    vue.config.js

    Vue项目的配置文件（详查：https://cli.vuejs.org/zh/config/#vue-config-js）
    1. module.exports = {
    2. // 打包的目录
    3. outputDir: 'dist', 
    4. // 在保存时校验格式
    5. lintOnSave: true, 
    6. // 生产环境是否生成 SourceMap
    7. productionSourceMap: false,
    8. devServer: {
    9.   // 启动服务后是否打开浏览器
    10.   open: true, 
    11.   // 错误信息展示到页面
    12.   overlay: { 
    13.     warnings: true,
    14.     errors: true
    15.   },
    16.   host: '0.0.0.0',
    17.   port: 8066, // 服务端口
    18.   https: false,
    19.   hotOnly: false,
    20.   // proxy: { // 设置代理
    21.   //   '/api': {
    22.   //     target: host,
    23.   //     changeOrigin: true,
    24.   //     pathRewrite: {
    25.   //       '/api': '/',
    26.   //     }
    27.   //   },
    28.   // },
    29. },
    30. }

    [单元测试]Jest

    Vue3.x+TypeScript项目下的jest单元测试

    官网API：https://next.vue-test-utils.vuejs.org/api/

    jest.config.js

    项目搭建成功之后的默认配置如下：
    1. module.exports = {
    2. preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
    3. transform: {
    4.   '^.+\\.vue$': 'vue-jest',
    5. },
    6. }
    更改如下配置
    1. /*
    2. * @Author: wztlink1013
    3. * @Date: 2021-12-25 14:49:37
    4. * @LastEditTime: 2021-12-26 14:56:39
    5. * @Description:
    6. */
    7. module.exports = {
    8. preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
    9. // 测试的文件类型
    10. moduleFileExtensions: ['js', 'jsx', 'json', 'vue', 'ts', 'tsx'],
    11. // 转化方式
    12. transform: {
    13.   '^.+\\.vue$': '<rootDir>/node_modules/vue-jest',
    14.   '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
    15.     '<rootDir>/node_modules/jest-transform-stub',
    16.   '^.+\\.jsx?$': '<rootDir>/node_modules/babel-jest',
    17.   '^.+\\.tsx?$': '<rootDir>/node_modules/ts-jest',
    18. },
    19. // 不进行匹配的目录
    20. transformIgnorePatterns: ['<rootDir>/node_modules/'],
    21. // 匹配哪些文件进行测试
    22. testMatch: ['**/tests/unit/**/*.spec.[jt]s?(x)', '**/__tests__/*.[jt]s?(x)'],
    23. // @符号 表示当前项目下的src
    24. moduleNameMapper: {
    25.   '^@/(.*)$': '<rootDir>/src/$1',
    26. },
    27. // 将保存的快照测试结果进行序列化，使得其更美观
    28. snapshotSerializers: ['jest-serializer-vue'],
    29. }

    单个文件的单元测试

    项目下运行单元测试命令 test:unit 默认测试所有测试文件，不能指定文件进行单元测试。

在本地下载全局jest然后指定命令去执行项目的单个文件单个测试

  1. cnpm install jest --global

然后执行

  1. jest ./tests/unit/jestTest.spec.ts

或

  1. npx jest ./tests/unit/jestTest.spec.ts

image.png

空白项目下的jest单元测试

初始化npm插件项目

  1. npm init -y

下载Jest和babel依赖

  1. cnpm i @babel/core @babel/preset-env  jest@24.8.0 -D

创建测试文件

创建测试框架用的文件index.js和index.test.js两个文件
index.js

  1. /*
  2.  * @Descripttion:
  3.  * @Date: 2021-12-07 20:08:15
  4.  * @LastEditTime: 2021-12-07 20:08:16
  5.  */
  6. export const add = (a, b) => {
  7.   return a + b;
  8. };
  10. export const reduce = (a, b) => {
  11.   return a - b;
  12. };

index.test.js

  1. /*
  2.  * @Descripttion:
  3.  * @Date: 2021-12-07 20:08:31
  4.  * @LastEditTime: 2021-12-07 20:45:17
  5.  */
  6. import { add, reduce } from "./index"
  8. // toBe 数字
  9. test("测试add函数", () => {
  10.   expect(add(1, 2)).toBe(3)
  11. })
  12. test("测试add函数（函数功能出错===打印）", () => {
  13.   expect(add(1, 2)).toBe(4)
  14. })
  15. test("测试reduce函数", () => {
  16.   expect(reduce(3, 2)).toBe(1)
  17. })

不能运行是node环境不能直接使用es6语法，需要只用babel来转换
新建.babelrc文件

  1. // .babelrc
  2. {
  3.     "presets": [
  4.             ["@babel/preset-env", {
  5.                 "targets": "> 5%"
  6.             }]
  7.     ]
  8. }

运行

运行npm run test 就可以测试了
image.png

Jest API及相关命令

相关教程：

参考教程：

  • Vue项目采用Cypress做e2e自动化测试，手把手一撸到底

    Vue3+TypeScript项目搭建过程中报错

    VSCode插件ESLint+Prettier+vetur代码格式化冲突

    这三者是代码校验和格式化的插件，当vue3.x项目搭建成功之后
    image.png
    该行配置需要注释，不然代码保存之后，会经过Prettier和vetur两者之间的来回格式化顺序，导致不能正常格式化。

具体矛盾原因：

  1. 升级npm

使用cnpm的也要升级一下cnpm

  1. cnpm i -g cnpm

  1. 重新安装node_modules依赖包

    1. cnpm i // 重新安装

  2. 重新下载

    1. cnpm i -D vue-loader-v16

    [vue/no-multiple-template-root]The template root requires exactly one element.eslint-plugin-vue

    image.png

    找不到模块“”@aomao/engine””或其相应的类型声明。ts(2307)

    :::danger 报错信息 :::

    1. 找不到模块“"@aomao/engine"”或其相应的类型声明。ts(2307)
    1. 模块“"@aomao/engine"”没有导出的成员“PluginEntry”。ts(2305)

    :::success 按照网上找的一些方法，都无法解决这个问题
    重启可以解决，插件用的太多===太卡顿 :::

    ‘vue/comment-directive’ — error in the end of public/index.html just after vue-cli installation

    public文件夹次啊的index.html文件末尾会有该报错，解决办法就是配置相关rule
    https://github.com/vuejs/eslint-plugin-vue/issues/1355

    Delete ␍eslintprettier/prettier

    将代码push到GitHub仓库，新拉取下来，文件的每行代码会有此报错
    image.png

报错原因：文本文件的换行符不一致
具体参考：https://juejin.cn/post/6844904069304156168#heading-6
解决办法：

  1. 【治标】如果只有少个文件，将vscode右下角处改为LF即可

image.png

  1. 【治本】在windows环境下，全局关掉转换行

    1. git config --global core.autocrlf false

    然后再将刚刚拉取到本地的项目删掉，重新从GitHub拉取到本地，就不会出现该报错了

  2. 另外，在vscode设置中设置如下，可以达到新建文件就是LF转换行的效果了

image.png