开发前提：
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
最终生成目录：