微信小程序框架部署：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
}
}