從零開始: 2月 2017

如何使用 TypeScript 撰寫 Vue.js 2

建立專案資料夾 lab01，並初始化套件管理定義檔 package.json.
npm init -y：表示定義檔內容採用預設值.

D:\vue_lab>mkdir lab01
D:\vue_lab>cd lab01
D:\vue_lab\lab01>npm init -y
Wrote to D:\vue_lab\lab01\package.json:

{
"name": "lab01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

開始安裝套件

相依套件：
D:\vue_lab\lab01>npm install vue --save (v2.1.0) 安裝 vuejs
D:\vue_lab\lab01>npm install vue-class-component --save (4.4.0)ES/TypeScript decorator 用以類別的方式撰寫 component
開發時期相依套件：
D:\vue_lab\lab01>npm install typescript --save-dev (v2.1.5)安裝 typescript。將 ts 編譯為 js 檔
D:\vue_lab\lab01>npm install webpack --save-dev (v2.2.1)安裝 webpack module loader。將 js 檔打包
D:\vue_lab\lab01>npm install webpack-dev-server --save-dev (v2.3.0)安裝 webpack 開發伺服器
D:\vue_lab\lab01>npm install concurrently --save-dev (v3.1.0)安裝concurrently。可同時執行多個命令

設定 package.json 檔案中 script 區段，最後文件如下

{
"name": "lab01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc -w",
"server": "webpack-dev-server --open --inline --hot",
"start": "concurrently \"npm run build\" \"npm run server\""
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.1.10",
"vue-class-component": "^4.4.0"
},
"devDependencies": {
"concurrently": "^3.1.0",
"typescript": "^2.1.5",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
}
}

tsc -w :監視ts檔案，當發生變更立即編譯
webpack-dev-server --open --inline --hot : 啟動 dev server，選項可查文件

在根目錄下新增 tsconfig.json

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom", "es2015.promise" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}

在根目錄下新增 webpack.config.js

module.exports = {
entry: './app.js',
output: {
publicPath: '/',
filename: 'app.bundle.js'
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
}

將 app.js 打包成 app.bundle.js

在根目錄下新增 app.ts

import Vue = require('vue');
import Component from 'vue-class-component'

@Component
class App extends Vue{
//data
name = "max";
counter = 0;

//computed
get message(){
return `${this.name} - ${this.counter}`;
}

//methods
add(){
this.counter++;
}
}

var app = new App({ el: "#app"});

在根目錄下新增 index.html

<html>
<body>
<div id="app">
{{message}}
<button type="" @click="add">add</button>
</div>
<script src="./app.bundle.js"></script>
</body>
</html>