Vue崛起
Vue在2014年被發佈，在沒還發布之前，不管是angular2和React都會使開發者，花費不少時間學習，然而Vue出現，有著好的設計MVVM模式與最小的儲存容量，讓開發者不需要花太多時間學習就可上手並且不會占用瀏覽器太大的空間。這些特性讓他在2016年擁有驚人的 89％的開發人員滿意度評估。
Vue範例檔案結構
ex1 /
|- dist
|-app.bundle.js
|- app.js
|- app.html
|- webpack.config.js
|-package.json
首先必須要安裝nodejs環境，並且新增一個專案
$> npm init
安裝Vue套件，加入package.json
$>npm install vue –save-dev
- 新增 app.js
import Vue from 'vue'
new Vue({
el:"#app",
template:"<div>Hellow world!</div>"
})
- 新增 app.js
<html>
<body>
<div id="app"></div>
</body>
<script src="dist/app.bundle.js"></script>
</html>
- webpack設定檔: webpack.config.js
const path = require('path');
module.exports = {
entry: './app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
};
打包
$>webpack
功能顯示
執行app.html
留言
張貼留言