關鍵詞 vue
typescript
webpack
html
本文是爲下一篇《3分鐘搞定 Vue + TypeScript開發》文章作的知識鋪墊,文章結尾提供完整的github示例代碼庫。vue
已經掌握vue開發的狀況下,想體驗一下TypeScript開發vue,能夠經過如下過程配置一個腳手架。node
webpack工做原理webpack
腳手架搭建瞭解輔導教程部分git
npm < 5.x 建議升級到更高版本(當前穩定版本6.7.0), 或使用yarn來管理包github
完成準備工做後下面就要進行這3類文件的配置web
配置思路,漸進式配置避免過程當中問題堆積,先讓腳手架工做起來typescript
這是一個使webpack能工做的最小配置。npm
當寫好一個webpack配置, 從最簡單的一步開始感覺一下webpack, 創建親切感日後就容易多了。json
webpack配置文件:
/** * @file ./config/webpack.config.js * @author CharlesYu01 */ module.exports = { entry: './index.ts', mode: 'production' };
編譯執行結果:
$ webpack --config ./config/webpack.config.js Hash: 067221c5690968574418 Version: webpack 4.29.0 Time: 86ms Built at: 2019-01-26 14:05:49 Asset Size Chunks Chunk Names main.js 930 bytes 0 [emitted] main Entrypoint main = main.js [0] ./index.ts 0 bytes {0} [built]
能夠看一下編譯出來的內容,默認在./dist/main.js中。
ps:恩,你已經掌握了webpack最核心的玩法了,處理更復雜的工做時再去了解loader、plugins的原理。
// package.json // TODO: 掌握各插件的做用 ... "devDependencies": { "awesome-typescript-loader": "^5.2.1", "html-webpack-plugin": "^3.2.0", "source-map-loader": "^0.2.4", "ts-loader": "^5.3.3", "typescript": "^3.2.4", "vue-class-component": "^6.3.2", "vue-loader": "^15.6.1", "vue-tsx-support": "^2.2.2", "webpack": "^4.29.0", "webpack-cli": "^3.2.1", "webpack-dev-server": "^3.1.14" }, "dependencies": { "vue": "^2.5.22", "vue-property-decorator": "^7.3.0" } ...
webpack安裝時若有異常,使用官網推薦方法 yarn add webpack --dev
有了編譯產出的js,還須要將js引入到頁面中,此時使用webpack plugins配置一個插件 html-webpack-plugin
, 就能夠完成html頁面引入js的功能。
添加vue template 的編譯能力 vue-loader
引用vue官網:
運行時 + 編譯器 vs. 只包含運行時
若是你須要在客戶端編譯模板 (好比傳入一個字符串給 template 選項,或掛載到一個元素上並以其 DOM 內部的 HTML 做爲模板),就將須要加上編譯器,即完整版:
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不須要編譯器
new Vue({
render (h) {return h('div', this.hi)}
})
// 配置webpack.config.js
module.exports = {
resolve: {
alias: {'vue$': 'vue/dist/vue.esm.js' }}
}
添加一個可預覽的webServer webpack-dev-server
devServer: { contentBase: '../dist', port: 9000 }
1.用TypeScript實現一個Input組件
/example/vue-tsx/Input.tsx
import {VNode} from 'vue/types'; import Component from 'vue-class-component'; import * as Vue from 'vue-tsx-support'; import { Prop } from 'vue-property-decorator'; export interface InputProps { placeholder: String } @Component export default class Input extends Vue.Component<InputProps,any> { [x: string]: any; text: any; input(e) { this.text = e.target.value this.$emit('input', e.target.value); } @Prop([String, Boolean]) value: string | boolean | undefined; data() { return { text: '' } } render() { return <input value={this.value} onInput={this.input}/> } }
2.引用組件
new Vue({ template: '<div>組件<Input value="" @input="input"/>{{message}}</div> ', data:{ message:'hello Vue!' }, methods:{ input:function(e) { this.message = e.target.value; } } }).$mount('#app');
3.預覽
// 能夠全量安裝一次項目依賴 yarn install yarn start $ webpack-dev-server --config ./config/webpack.config.js ℹ 「wds」: Project is running at http://localhost:9000/ ℹ 「wds」: webpack output is served from / ℹ 「wds」: Content not from webpack is served from ../dist ℹ 「wdm」: Hash: 9bf165f80a4d3c7600c0 Version: webpack 4.29.0 Time: 2129ms Built at: 2019-01-26 19:49:49 Asset Size Chunks Chunk Names ./index.html 409 bytes [emitted] main.js 662 KiB main [emitted] main Entrypoint main = main.js [0] multi (webpack)-dev-server/client?http://localhost:9000 ./example/index.ts 40 bytes {main} [built] [./example/index.ts] 471 bytes {main} [built] [./node_modules/ansi-html/index.js] 4.16 KiB {main} [built] [./node_modules/ansi-regex/index.js] 135 bytes {main} [built] [./node_modules/events/events.js] 13.3 KiB {main} [built] [./node_modules/html-entities/index.js] 231 bytes {main} [built] [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built] [./node_modules/strip-ansi/index.js] 161 bytes {main} [built] [./node_modules/url/url.js] 22.8 KiB {main} [built] [./node_modules/vue/dist/vue.esm.js] 289 KiB {main} [built] [./node_modules/webpack-dev-server/client/index.js?http://localhost:9000] (webpack)-dev-server/client?http://localhost:9000 7.78 KiB {main} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built] [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built] [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built] + 15 hidden modules Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = ./index.html [./node_modules/html-webpack-plugin/lib/loader.js!./example/index.html] 618 bytes {0} [built] [./node_modules/lodash/lodash.js] 527 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built] ℹ 「wdm」: Compiled successfully.
https://github.com/CharlesYu0...
TODO: