在实际项目中经常会遇到开发小程序需求，很少会从0到1配置一个项目，基本上都是利用脚手架快速构建项目。但是，随着脚手架工具越来越丰富，开发者在各个脚手架之间不断切换，忽略了脚手架内部实现了哪些功能。

1.1 创建目录结构

// 在终端中依次执行以下命令
mkdir taro-test
cd ./taro-test
npm init -y

1.2 安装基本依赖

npm i vue
npm i @babel/runtime 
npm i @tarojs/taro @tarojs/components @tarojs/helper  @tarojs/taro-h5 @tarojs/shared @tarojs/runtime @tarojs/router
npm i @tarojs/plugin-framework-vue3 @tarojs/plugin-html @tarojs/plugin-platform-alipay @tarojs/plugin-platform-jd @tarojs/plugin-platform-qq 
npm i @tarojs/plugin-platform-swan @tarojs/plugin-platform-tt @tarojs/plugin-platform-weapp
npm i @vue/compiler-sfc vue-loader @vue/babel-plugin-jsx -D
npm i @tarojs/cli  @tarojs/webpack5-runner -D
npm i webpack @types/webpack-env -D
npm i stylelint style-loader css-loader -D
npm i babel-preset-taro @babel/core  babel-plugin-import  -D
npm i eslint eslint-plugin-vue eslint-config-taro -D
npm i typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

• vue-loader

Vue Loader 是一个 Webpack 的 loader，它允许你以一种名为单组件（SFCs）的格式撰)写 Vue 组件：

 

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

• @vue/compiler-sfc

这个包本身提供额处理 Vue 单文件的底层工具，它被用在 vue-loader, rollup-plugin-vue 和 vite。

1.3 创建目录结构

- config
     dev.js
     index.js
     prod.js
- src
    - assets -- 图片/静态资源
    - pages -- 页面功能
    - service --服务api
    - store -- 数据存储处理
    - styles -- 公共样式
    - app.config.ts -小程序公共部分比如：下方主tab
    - app.ts -- 入口ts文件
    - config.ts -- 项目公共配置
    - index.html - 入口html 文件
- types
   - global.d.ts -- 全局type

-babel.config.js
-tsconfig.json
-package.json
-project.tt.json
-project.config.json

 

1.4 配置 config -- index.js & babel.config.js & types -- global.d.ts

•  index.js

const path = require("path");
const config = {
    projectName: "taro-mall",
    date: "2022-11-8",
    designWidth: 375,
    deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2,
        375: 2 / 1
    },
    sourceRoot: "src",
    outputRoot: "dist",
    plugins: ["@tarojs/plugin-html"],
    defineConstants: {},
    copy: {
        patterns: [],
        options: {}
    },
    framework: "vue3",
    compiler: "webpack5",
    cache: {
        enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
    },
    sass: {
        data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`,
        resource: [path.resolve(__dirname, "..", "src/styles/common.scss")]
    },
    mini: {
        postcss: {
            pxtransform: {
                enable: true,
                config: {
                    selectorBlackList: ["nut-"]
                }
            },
            url: {
                enable: true,
                config: {
                    limit: 1024 // 设定转换尺寸上限
                }
            },
            cssModules: {
                enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
                config: {
                    namingPattern: "module", // 转换模式，取值为 global/module
                    generateScopedName: "[name]__[local]___[hash:base64:5]"
                }
            }
        }
    },
    h5: {
        publicPath: "/",
        staticDirectory: "static",
        esnextModules: ["nutui-taro"],
        postcss: {
            autoprefixer: {
                enable: true,
                config: {}
            },
            cssModules: {
                enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
                config: {
                    namingPattern: "module", // 转换模式，取值为 global/module
                    generateScopedName: "[name]__[local]___[hash:base64:5]"
                }
            }
        }
    }
};

module.exports = function(merge) {
    if (process.env.NODE_ENV === "development") {
        return merge({}, config, require("./dev"));
    }
    return merge({}, config, require("./prod"));
};

•  babel.config.js

// babel-preset-taro 更多选项和默认值：
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
module.exports = {
  presets: [
    ['taro', {
      framework: 'vue3',
      ts: true
    }]
  ],
  plugins: [
    [
      "import",
      {
        "libraryName": "@nutui/nutui-taro",
        "libraryDirectory": "dist/packages/_es",
        "style": (name, file) => name.toLowerCase().replace('_es/', '') + '/index.scss',
        "camel2DashComponentName": false
      },
      'nutui3-taro'
    ]
  ]
}

• global.d.ts

/// <reference types="@tarojs/taro" />

declare module '*.png';
declare module '*.gif';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.svg';
declare module '*.css';
declare module '*.less';
declare module '*.scss';
declare module '*.sass';
declare module '*.styl';

declare namespace NodeJS {
  interface ProcessEnv {
    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
  }
}

declare module '@tarojs/components' {
  export * from '@tarojs/components/types/index.vue3'
}

 1.5 配置 project.config.json & project.tt.json & tsconfig.json

•  project.config.json

{
    "miniprogramRoot": "./dist",
    "projectname": "taro-mall",
    "description": "",
    "appid": "test", 
    "setting": {
        "urlCheck": true,
        "es6": false,
        "enhance": false,
        "compileHotReLoad": false,
        "postcss": false,
        "minified": false
    },
    "compileType": "miniprogram"
}

• project.tt.json 

{
    "miniprogramRoot": "./dist",
    "projectname": "taro-mall",
    "description": "",
    "appid": "test", 
    "setting": {
        "urlCheck": true,
        "es6": false,
        "enhance": false,
        "compileHotReLoad": false,
        "postcss": false,
        "minified": false
    },
    "compileType": "miniprogram"
}

• tsconfig.json

{
    "compilerOptions": {
        "target": "es2017",
        "module": "commonjs",
        "removeComments": false,
        "preserveConstEnums": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "noImplicitAny": false,
        "allowSyntheticDefaultImports": true,
        "outDir": "lib",
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "strictNullChecks": true,
        "sourceMap": true,
        "baseUrl": ".",
        "rootDir": ".",
        "jsx": "react",
        "allowJs": true,
        "resolveJsonModule": true,
        "typeRoots": [
            "node_modules/@types"
        ],
        "paths": {
            "@/components/*": ["./src/components/*"],
            "@/service/*": ["src/5/*"],
            "@/store/*": ["./src/store/*"],
            "@/assets/*": ["./src/assets/*"],
        }
    },
    "include": ["./src","./types"],
    "exclude": ["node_modules", "dist"],
    "compileOnSave": false
}

 

1.6 在 package.json 创建命令

  "scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:jd": "taro build --type jd",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
  },

 

完整的 package.json

{
  "name": "d",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "templateInfo": {
    "name": "vue3-NutUI",
    "typescript": true,
    "css": "sass"
  },
  "scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:jd": "taro build --type jd",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
  },
  "browserslist": [
    "last 3 versions",
    "Android >= 4.1",
    "ios >= 8"
  ],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@babel/runtime": "^7.7.7",
    "@nutui/nutui-taro": "^3.1.8",
    "@tarojs/components": "3.5.6",
    "@tarojs/helper": "3.5.6",
    "@tarojs/plugin-framework-vue3": "3.5.6",
    "@tarojs/plugin-html": "3.5.6",
    "@tarojs/plugin-platform-alipay": "3.5.6",
    "@tarojs/plugin-platform-jd": "3.5.6",
    "@tarojs/plugin-platform-qq": "3.5.6",
    "@tarojs/plugin-platform-swan": "3.5.6",
    "@tarojs/plugin-platform-tt": "3.5.6",
    "@tarojs/plugin-platform-weapp": "3.5.6",
    "@tarojs/router": "3.5.6",
    "@tarojs/runtime": "3.5.6",
    "@tarojs/shared": "3.5.6",
    "@tarojs/taro": "3.5.6",
    "@tarojs/taro-h5": "3.5.6",
    "vue": "^3.0.0",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.0",
    "@types/webpack-env": "^1.13.6",
    "webpack": "5.69.0",
    "@tarojs/webpack5-runner": "3.5.6",
    "@tarojs/cli": "3.5.6",
    "@vue/babel-plugin-jsx": "^1.0.6",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-preset-taro": "3.5.6",
    "babel-plugin-import": "^1.13.3",
    "css-loader": "3.4.2",
    "eslint-plugin-vue": "^8.0.0",
    "eslint-config-taro": "3.5.6",
    "eslint": "^8.12.0",
    "stylelint": "9.3.0",
    "style-loader": "1.3.0",
    "vue-loader": "^17.0.0",
    "@typescript-eslint/parser": "^5.20.0",
    "@typescript-eslint/eslint-plugin": "^5.20.0",
    "typescript": "^3.7.0"
  }
}