使用mpvue+typescript搭建前端小程式項目

- 項目搭建
- 啟動并預覽項目
- 配置typescript

項目搭建

mpvue官網五分鐘教程：http://mpvue.com/mpvue/

建立項目指令：

全局安裝 vue-cli

$ npm install --global vue-cli

建立一個基于 mpvue-quickstart 模闆的新項目

$ vue init mpvue/mpvue-quickstart my-project

預設安裝即可

$ cd my-project

$ npm install

#啟動建構

$ npm run dev

啟動并預覽項目

預覽項目是否搭建成功。打開微信開發工具，導入項目，選擇剛剛搭建的項目檔案夾，選擇 dist/wx，确認，就能看到效果啦（注釋：這裡就不貼圖了，搭建項目後，沒用的檔案删的太快了，啊哈哈！）

配置typescript

1 安裝依賴項

安裝 vue 與裝飾器,mpvue-loader目前支援用TypeScript來寫，功能還在完善中(WIP)。需要搭配vue-property-decorator來使用。

$ npm install --save vue vue-property-decorator

安裝 typescript

$ npm install --save [email protected]

安裝 typescript 所需loader（注意存在版本相容問題，需下載下傳指定版本ts-loader與awesome-typescript-loader最新版目前不相容webpack4以下版本）

$ npm install --save [email protected] [email protected]

安裝聲明檔案@types/node @types/weixin-app

$ npm install --save @types/node @types/weixin-app

安裝vue-class-component

$ npm install --save vue-class-component

(注意：在安裝依賴項時，如果提升warn，可以詳細閱讀一下，注意出現 You must install peer dependcies yourself時，必須自己安裝，根據提示的需要，進行對應安裝就好了，問題不大！)

2.安裝官方微信小程式定義檔案

安裝官方微信小程式定義檔案:https://github.com/wechat-miniprogram/api-typings#%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AE%9A%E4%B9%89%E6%96%87%E4%BB%B6

此為微信小程式 API 的 TypeScript 類型定義檔案,請時刻關注官方最新版本

$ npm install miniprogram-api-typings

3.讓TypeScript識别Vue檔案

在src目錄下，建立一個vue-shim.d.ts檔案，寫入下面的代碼，讓TypeScript識能别Vue檔案

declare module “*.vue”{

import Vue from ‘vue’

export default Vue;

}

4.配置webpack 3.x

在build檔案下找到webpack.base.conf.js檔案(這是項目打包的配置檔案)

使用mpvue+typescript搭建前端小程式項目
在extensions中加入ts檔案格式

在module中的rules中加入ts的loader

使用mpvue+typescript搭建前端小程式項目

代碼：

{
        test: /\.tsx?$/, 
        exclude: /node_modules/,
        use: [
          'babel-loader',
          {
            loader: 'mpvue-loader',
            options:Object.assign({checkMPEntry: true}, vueLoaderConfig)//與同級的js中對應項值一緻
          },
          {
            // loader: 'ts-loader',
            loader: 'awesome-typescript-loader',
            options: {
              // errorsAsWarnings: true,
              useCache: true,
            }
          }
        ]
},

5.**增加typescript配置 **

在項目的根目錄下，建立一個tsconfig.json檔案，寫入typoescript配置（也可以參照官網：https://www.tslang.cn/docs/handbook/tsconfig-json.html）

{
  "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
    }
  }

6.将webpack.base.config.js檔案中的入口檔案名字尾改成.ts

function getEntry (rootSrc) {
  var map = {};
  glob.sync(rootSrc + '/pages/**/main.ts')
  .forEach(file => {
    var key = relative(rootSrc, file).replace('.ts', '');
    map[key] = file;
  })
   return map;
}

const appEntry = { app: resolve('./src/main.ts') }
const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.ts')
const entry = Object.assign({}, appEntry, pagesEntry)

7.将 src/main.js 檔案修改為 main.ts ,并添加代碼

// main.ts
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator';
  import { VueConstructor } from "vue";
  interface IMpVue extends VueConstructor {
    mpType: string
  }
  // 添加小程式hooks http://mpvue.com/mpvue/#_4
  Component.registerHooks([
  // app
    'onLaunch', // 初始化
    'onShow', // 當小程式啟動，或從背景進入前台顯示
    'onHide', // 當小程式從前台進入背景
  // pages
    'onLoad', // 監聽頁面加載
    'onShow', // 監聽頁面顯示
    'onReady', // 監聽頁面初次渲染完成
    'onHide', // 監聽頁面隐藏
    'onUnload', // 監聽頁面解除安裝
    'onPullDownRefresh', // 監聽使用者下拉動作
    'onReachBottom', // 頁面上拉觸底事件的處理函數
    'onShareAppMessage', // 使用者點選右上角分享
    'onPageScroll', // 頁面滾動
    'onTabItemTap', //目前是 tab 頁時， 點選 tab 時觸發 （mpvue 0.0.16 支援）
  ])
  Vue.config.productionTip = false
  // 在這個地方引入是為了registerHooks先執行
  const MyApp = require('./App.vue').default as IMpVue
  const app = new Vue(MyApp)
  app.$mount()

8.App.vue中引入main.ts檔案

//app.vue中 mpvue-loader目前支援用TypeScript來寫，功能還在完善中(WIP)。目前實作了用<script  src="./xx.ts"></script>這種方式的自動識别
<script lang='ts' src="./app.ts"></script>
<style></style>

重新打包npm run build

npm start 啟動項目，編譯通過，配置完成，下面接着說說typescript如何在mpvue中寫法。

目錄結構：

使用mpvue+typescript搭建前端小程式項目

index.vue檔案

<template>
	<div>我的名字：{{userinfo.name}}</div>
	<div>我的年齡：{{userinfo.age}}</div>
	<div>我的性别：{{userinfo.gender==0?'男':'女'}}</div>
	<div>我的愛好：{{userinfo.like}}</div>
</template>
//目前檔案下的index.ts檔案
<script lang='ts' src='./index.ts'></script>

.index.ts檔案

import { Vue, Component } from 'vue-property-decorator'
@Component({
    name:'userinfo'
})
class Userinfo extends Vue{
	userinfo: object = {
		name: string = '張三',
		age: number = 20,
		gender: number = 0,
		like: string = '在下性别男，愛好女！'
	}
}
export default Userinfo

.main.ts檔案

import Vue from 'vue'
import Index from './index.vue'

const index = new Vue(Index)

index.$mount()

.main.json檔案

{
    "navigationBarTitleText": "個人資訊",
}

大功告成，希望給大家帶來幫助，啦啦啦，點個贊咯！

使用mpvue+typescript搭建前端小程式項目