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

View Code

查看更多关于微信小程序框架部署：mpvue+typescript的详细内容...