Taro + VUE 小程序环境搭建

安装

1. Cli工具安装：$ yarn global add @tarojs/cli
2. 项目初始化：taro init myApp

注意：如下命令中选用了 nut-ui，即京东开发团队提供的跨端组件库。

➜  taro init myApp
 Taro v3.6.6

Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper

? 请输入项目介绍
? 请选择框架 Vue3
? 是否需要使用 TypeScript ？ Yes
? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass
? 请选择编译工具 Webpack5
? 请选择包管理工具 pnpm
? 请选择模板源 Github（最新）
✔ 拉取远程模板仓库成功！
? 请选择模板 vue3-NutUI4（使用 NutUI4.0 的模板）

✔ 创建项目: myApp
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/.gitignore
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/babel.config.js
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/package.json
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/project.config.json
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/project.tt.json
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/tsconfig.json
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/config/dev.js
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/config/index.js
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/config/prod.js
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/types/global.d.ts
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/types/vue.d.ts
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/src/app.config.ts
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/src/app.scss
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/src/app.ts
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/src/index.html
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/src/pages/index/index.config.ts
✔ 创建文件: /Users/demo/workspace/js/weapp/myApp/src/pages/index/index.vue

✔ cd myApp, 执行 git init

配置

Taro CLI默认生成了一系列配置，包括Vite、TypeScript、Babel等配置。想要编码起来更顺手，我们可以选择增加如下配置。

ESLint

使用ESLint对代码进行编译检查和错误提示，在项目根目录添加.eslintrc.js文件。

// .eslintrc.js

module.exports = {
  "env": {
    "browser": true,
    "es2021": true
  },
  "parser": "vue-eslint-parser",
  "extends": [
    // add more generic rulesets here, such as:
    // "eslint:recommended",
    "plugin:vue/essential",
    "plugin:@typescript-eslint/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2020,
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
  },
  "plugins": ["vue", "@typescript-eslint"],
  "rules": {
    // override/add rules settings here, such as:
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    'vue/no-unused-vars': 'off', // 'error'
    "vue/multi-word-component-names": 'off'
  }
}

Prettier

使用Prettier格式化代码，在项目根目录添加prettier.config.js文件。另外，可以配置编辑器在保存时自动格式化代码。此文件的参考配置如下：

// prettier.config.js

module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: false,
  singleQuote: true
};

微信 API 定义文件

调用小程序的API时，一般情况下都是通过Taro.getApp()这样的方式。特殊情况下可以选择通过wx.getApp()这样直接调用的方式。

微信小程序 API 的 TypeScript 类型定义文件

• 安装组件：npm install miniprogram-api-typings
• 在 tsconfig.json 中指定 types: ["miniprogram-api-typings"]

参考

• 安装及使用 | Taro 文档
• API Typings | 微信小程序
• NutUI示例效果 - 移动端 Vue2、Vue3、小程序 组件库