小型マイクロチャネル展開フレームワーク：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に示すように、構成活字体

＃まだ完璧な機能でインストールVUEとデコレータ、現在の書き込みに活字体でサポートされているmpvueローダー、（WIP）。使用にVUE-プロパティ-デコレータを一致させる必要があります。
NPMインストール--save VUE VUE $ -property- デコ 
 ＃インストールtypescriptです
$ NPM --save [email protected]をインストール 
＃インストールtypescriptです必要なローダは（バージョンの互換性の問題があることに注意してください、あなたは指定されたバージョンTS-ローダーと素晴らしい-typescriptです-ローダーをダウンロードする必要がありません、以下webpack4の最新バージョンと、現在の互換性はありません）
$ NPMインストール--save [email protected] [email protected]
＃宣言ファイルの種類@ / @ノードの種類をインストール/ Weixinアプリ 
$は--save種類@ / @ノードタイプ/ WeixinアプリをインストールNPM

3、マイクロチャネル小型公式定義ファイルをマウント：NPM-API-タイピングすることminiprogramをインストール

図4に示すように、コンフィギュレーションのWebPACK、参照 http://mpvue.com/build/mpvue-loader.html

注：あなたが見つけることができない場合webpack.conf.jsの対応が見つけ、webpack.base.conf.jsを

main.jsが削除されたファイル内のページを変更しないでくださいすることなく、7段階の前に！！

5、活字体認識Vueのファイルをしてみましょう：

活字体は、宣言ファイルを追加する必要がファイル接尾辞VUEを認識しません、

コード内での増加、プロジェクトのsrcディレクトリに新しいファイルに名前のVUE-shim.d.tsを作成します。

宣言モジュール"* .vue" {
    以下からの輸入Vueの「VUE」。
    輸出デフォルトのVue。
}

6、活字体構成を増やす：プロジェクトのルートディレクトリに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
    }
}

View Code

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

7、配置完main.ts后需要将webpack.conf.js中的配置入口文件后缀改为.ts

最终生成目录：

小型マイクロチャネル展開フレームワーク：mpvue + typescriptです

おすすめ