使用Vite、TypeScript和Vue 3搭建纯净版UniApp小程序

1,648 阅读4分钟
包管理工具安装

npm install -g pnpm

下载项目基础包:

github.com/dcloudio/un…

配置小程序启动路径:

*如果不添加会提示: "app.json 未找到" *

// 根目录 project.config.json
{
"miniprogramRoot": "dist/dev/mp-weixin/",
"srcMiniprogramRoot": "dist/dev/mp-weixin/"
}
  • project.config.json:是小程序项目的配置文件,用于存储和管理小程序项目的相关配置信息。
  • miniprogramRoot:配置项指定了小程序项目的源代码目录,即开发者编写和修改的代码所在的目录。
  • srcMiniprogramRoot:该配置项指定了编译后的小程序目标目录,即编译后生成的小程序代码所放置的目录。

启动小程序:

可以在package.json中的scripts内自定义。

// 根目录 package.json

"scripts": {
   `pnpm run dev:mp-weixin`
}

配置 Eslint、Prettier、Husky:

  1. ESLint - js检查:是一个静态代码分析工具,用于检查和报告JavaScript代码中的潜在问题、错误和不一致性。
  2. Prettier - 格式检查:是一个代码格式化工具,用于自动格式化代码以保持一致的风格。
  3. Husky - git提交检查:是一个Git钩子工具,它允许开发人员在Git操作(例如提交、推送等)的不同阶段执行自定义脚本。Husky常用于在代码提交之前进行代码检查、测试和格式化等操作。
安装 eslint:
add eslint -D
初始化 eslint:
pnpm eslint --init
配置 eslint:

ESLint的配置文件,用于定义和配置JavaScript代码的静态代码检查规则

// 根目录 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  overrides: [],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module"
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    "vue/multi-word-component-names": "off"
  }
}
配置脚本命令:

运行npm run lint命令会执行ESLint工具对项目中的.vue、.js、.ts、.jsx和.tsx文件进行静态代码检查,并尝试自动修复一些简单的问题

{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
},
  • lint: 是自定义的脚本命令名称,可以根据项目需要进行修改。
  • eslint: 是运行ESLint工具的命令。
  • .: 表示要检查的目录,这里使用"."表示当前目录,即项目根目录。
  • --ext .vue,.js,.ts,.jsx,.tsx: 用于指定ESLint要检查的文件扩展名,这里包括了.vue、.js、.ts、.jsx和.tsx文件。
  • --fix: 是ESLint的一个选项,用于自动修复可以自动修复的问题,如一些简单的语法错误、缩进问题等。
配置忽略文件

.eslintignore 文件用于指定哪些文件或目录应该被 ESLint 忽略,不进行代码检查。

// 根目录 .eslintignore

**/node_modules/*
**/build/*
**/dist/*
安装 Prettier:
pnpm add prettier -D
配置 Prettier:
// 根目录:.prettierrc.js

module.exports = {
  // 一行的字符数,如果超过会进行换行,默认为80
  printWidth: 100,
  // 一个tab代表几个空格数,默认为2
  tabWidth: 2,
  // 是否使用tab进行缩进,默认为false,表示用空格进行缩减
  useTabs: false,
  // 字符串是否使用单引号,默认为false,使用双引号
  singleQuote: false,
  // 行位是否使用分号,默认为true
  semi: false,
  // 是否使用尾逗号,有三个可选值"<none|es5|all>"
  trailingComma: 'none',
  // 对象大括号直接是否有空格,默认为true,效果:{ foo: bar }
  bracketSpacing: true
}

配置Prettier脚本命令:
// 根目录:package.json

{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
},
  1. prettier --write .: 这个命令使用 Prettier 工具来格式化代码,并将更改写回到源文件中。Prettier 是一个代码格式化工具,它可以根据预定义的规则和配置自动格式化代码,以确保代码的一致性和可读性。
  2. pnpm lint --fix: 这个命令执行代码检查,并尝试自动修复一些简单的问题。在这里,使用了 "pnpm" 作为包管理器命令,"lint" 是一个自定义的脚本命令,用于运行代码检查工具,可能是 ESLint 或其他类似的工具。通过添加 "--fix" 参数,它告诉代码检查工具尝试自动修复一些可以自动修复的问题。
解决eslint 与 prettier冲突问题
pnpm add eslint-config-prettier eslint-plugin-prettier -D
配置Prettier忽略文件:
// 根目录 .prettierignore

dist
node_modules

安装husky:
pnpm add husky -D
配置husky脚本命令:
// 根目录:package.json

"scripts": {
   "huskyinstall": "husky install"
}
安装husky:
pnpm huskyinstall

运行pnpm huskyinstall用于安装单独Husky后,会出现一个.husky目录,如果报错husky - .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory),说明没有初始化git,执行git init

配置husky Git提交前检查

用于在项目中添加一个 pre-commit 钩子。这个命令会将 pre-commit 钩子的脚本文件(.husky/pre-commit)复制到项目的根目录下。pre-commit 钩子是在执行 Git 提交操作之前触发的钩子

pnpm husky add .husky/pre-commit
// .husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm lint && pnpm format

参考:

juejin.cn/post/721841…