微信小程序框架部署：mpvue+typescript

開發前提：

  1、在微信公眾平台注冊申請 AppID

  2、安裝開發者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

 

框架部署：

  1、vue-cli 創建 mpvue，參考 http://mpvue.com/mpvue/quickstart.html

  2、配置 Typescript

# 安裝 vue 與裝飾器,mpvue-loader目前支持用TypeScript來寫，功能還在完善中(WIP)。需要搭 配vue-property-decorator來使用。
$ npm install --save vue vue-property-decorator 
# 安裝 typescript
$ npm install --save typescript@3.3.3333 
# 安裝  typescript 所需loader（注意存在版本兼容問題，需下載指定版本ts-loader與awesome-typescript-loader最新版目前不兼容webpack4以下版本）
$  npm install --save ts-loader@3.1.1 awesome-typescript-loader@4.0.1
# 安裝聲明文件@types/node @types/weixin-app
$ npm install --save @types/node @types/weixin-app

  3、安裝官方微信小程序定義文件：npm install miniprogram-api-typings

  4、配置webpack，參考 http://mpvue.com/build/mpvue-loader.html

注：若找不到 webpack.conf.js 則對應找 webpack.base.conf.js，

    在第 7 步未做之前不要修改把 pages 里的 main.js 文件刪掉！！

   5、讓TypeScript識別Vue文件：

    TypeScript識別不了后綴為vue的文件，需要加入一個聲明文件，

    在項目的src目錄下新建一個名為vue-shim.d.ts的文件，在其中增加代碼

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

  6、增加TypeScript配置：在項目根目錄下新建一個名為 tsconfig.json 的文件，增加內容

{
    "compilerOptions": {
        // 與 Vue 的瀏覽器支持保持一致
        "target": "es2015",
        // 這可以對 `this` 上的數據屬性進行更嚴格的推斷
        "strict": true,
        // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
        "module": "es2015",
        "moduleResolution": "node",
        "baseUrl": "./",
        "outDir": "./dist/",
        "paths": {
            "vue": [
                "node_modules/mpvue"
            ],
            "@/*": [
                "src/*"
            ]
        },
        "types": [
            "@types/weixin-app", //聲明文件
            "@types/node"
        ],
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": false,
        "skipLibCheck": true,
        "strictPropertyInitialization": false,
        "experimentalDecorators": true
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules"
    ],
    "typeAcquisition": {
        "enable": true
    }
}

注：完整可看 https://www.tslang.cn/docs/handbook/tsconfig-json.html

  7、配置完main.ts后需要將webpack.conf.js中的配置入口文件后綴改為.ts

 

最終生成目錄：