Vue從Hello World到打包（后端適讀）
Vue從Hello World到上線
Vue 簡介
Vue是個MVVM框架。
特點：簡單易學、體積小、性能高。并且它的源碼耦合性非常低，了解它的過程也就是思想進步的過程。
當然，只學這一個框架，無法完成前端的全部工作，除了Vue之外，還需要了解axios、Webpack，才能完成整個開發過程。
好了，我們開始！
Vue的Hello World
寫Hello World已經成了傳統，我們也不例外，盡管Vue的入門文檔寫的非常好，但是在這里還是按照我的思路來走吧！
首先，我們先寫一個html頁面：
<body>
<div>Hello World</div>
</body>
好了，現在我們已經寫出了一個靜態的Hello World，現在我們要用Vue將它改造成動態的。Vue的引入可以很簡單，像極了jQuery，一個 <script> 標簽引入即可。
<body>
<div>Hello World</div>
<script src="vue.js"></div>
</body>
然后我們再建一個 <script> 書寫vue代碼。
<body>
<div>Hello World</div>
<script src="vue.js"></div>
<script>
new Vue({
el: 'body', // 這里遵循的是css的選擇器規則，這句的意思是，body標簽內都是Vue的控制范圍
data: { // 這里是數據，需要Vue綁定的數據都放在這里
myData: 'Hello World'
}
})
</script>
</body>
好了，現在我們只差一步了，Vue里面已經有了數據，只欠綁定，將 <div> 內的內容改成這樣既可：{{ myData }}，那么最終的寫法是這樣：
<body>
<div>{{ myData }}</div>
<script src="vue.js"></div>
<script>
new Vue({
el: 'body',
data: {
myData: 'Hello World' // 上面的el和data這兩個單詞都是不允許改的，但是這句里的key可以隨意命名
}
})
</script>
</body>
現在Hello World已經寫出來了，那就需要敲打一下了。 el: 'body' 這個地方十分不建議寫成這樣，直接綁定 body 會有一些方法無法使用，建議寫成這樣：
<body>
<section id="app">
<div>{{ myData }}</div>
</section>
<script src="vue.js"></div>
<script>
new Vue({
el: '#app',
data: {
myData: 'Hello World' // 上面的el和data這兩個單詞都是不允許改的，但是這句里的key可以隨意命名
}
})
</script>
</body>
在body內部添加一層并賦一個id是比較好的做法。放心，這或許是你整個Vue項目唯一需要寫的ID屬性，它不需要像jQuery一樣命名一大堆ID。
添加事件
上面的Hello World其實就是一個數據綁定，那么我們深入一點，來了解事件綁定：
現在，有一個需求，需要在 <div>{{ myData }}</div> 這個塊里添加一個點擊事件，給你十秒鐘想一想jQuery是怎么做的，是不是挺復雜的？而Vue有很簡單的事件綁定寫法：
<div @click="myClick">{{ myData }}</div>
// 是不是很像onClick事件？
// 其實是不一樣的，在最終生成的代碼里，你不會看到@click，它最終會被轉換成DOM2級事件。
現在，我們點擊這個 <div> 塊的時候，就會觸發myClick方法，咦，等等，myClick方法還沒定義呢！
那我們回到js代碼里，添加methods屬性：
new Vue({
el: '#app',
data: {
myData: 'Hello World'
},
methods: { // 這個methods也是不可以改的哦，記得加s
myClick: function() {
alert("你點" + this.myData + "干啥？");
// 你可以盡情使用data里的數據，但是要加上this指向
}
}
})
好了，可以運行了，如果myClick方法需要加參數的話，也很簡單： <div @click="myClick(myData)">{{ myData }}</div> ，當然，下面的定義部分也需要配上形參：
myClick: function(data) {
alert("你點" + data + "干啥？");
}
相信你看出來了，data里面是放數據的，methods里面是放方法的。
添加屬性
理解了添加時間，那理解添加屬性就更簡單了。
例如，有個 <img> 標簽的圖片路徑是動態的，那么我們就需要用上屬性綁定了：
<img :src="srcUrl" />
...
new Vue({
el: '#app',
data: {
srcUrl: '../images/logo.png'
}
})
警告： <img :src="srcUrl" /> 如果這個標簽的src屬性值是動態的，那就不要添加原生的src屬性，通過屬性綁定的方式引入路徑是最佳實踐，其他屬性綁定也是同理。
更強的數據綁定
如果我們有這樣一段數據：
arr = [1, 2, 3, 4, 5, 6];
需要用 <ul> 和 <li> 標簽渲染，給你十秒鐘想想jQuery是怎么做的？不管怎么做，做出來都是悲劇！
我們看看Vue是怎么做的？
data: {
list: arr
}
...
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
如此一來，數據就可以漂亮地渲染到頁面上了。
我們再來個復雜點的數據：
json = [
{
"AirPortCode": "HGH",
"Temperature": "10℃",
"Visib": "很好",
"WeatherType": "晴",
"Wind": "東風 - 3級",
"city": "杭州"
},
{
"AirPortCode": "CAN",
"Temperature": "17℃",
"Visib": "7000米",
"WeatherType": "多云",
"Wind": "北偏東北風 - 2級",
"city": "廣州"
},
{
"AirPortCode": "PEK",
"Temperature": "12℃",
"Visib": "很好",
"WeatherType": "晴",
"Wind": "南偏西南風 - 2級",
"city": "北京首都"
}
]
給你十秒鐘想想……
算了，還是直接上vue吧
data: {
list: json
}
...
<ul>
<li v-for="item in json">{{ item.city }} {{ item.Temperature }}</li>
</ul>
在這里只顯示了城市和溫度兩樣東西。你愿意的話，可以顯示更多。盡管數據好像復雜了很多，但是Vue應付起來并沒有多吃力。
好了，我想我們的頁面已經足夠動態了，但是還不夠只能，怎么說呢？例如上面的數據里有個 Wind 的字段，將這個字段渲染到頁面上的時候，我并不希望全部渲染，我只想渲染風力級別，那我需要將前面的風向給去掉，這時候就需要加過濾器。
<li v-for="item in json">{{ item.Wind | cutWind }}</div>
Vue提供了內置的過濾器，但切割天氣顯然不是它內置的過濾器，因此我們現在需要自己定義一個：
Vue.filter( 'cutWind' , function(value) {
return value.split("-")[1];
});
本來還應該加一個去空格的處理，但現在為了演示就暫且無視空格吧……
Ajax
現在數據都可以動態渲染了，我們需要考慮的就是，應該怎么從服務端獲取數據，ajax庫有很多，Vue原本也自己實現了一個，但后來棄用了，原因是不想重復造輪子。現在官方推薦的Ajax庫叫axios，它確實也是一個小巧而輕量的庫，體積大約是11k，同樣可以通過 <script> 標簽引入。
使用起來也簡單，一般的ajax的POST請求：
var _this = this;
axios.post('../url', string)
.then(function(res) {
_this.init(res);
});
看！axios將自己暴露了，它是個類庫！
然而，初始化的數據需要一載入頁面就發請求去獲取，我們可以將它寫入鉤子函數：
鉤子函數，也就是從創建Vue實例到銷毀的過程中，每一個階段提供出來的一個擴展接口，我們可以通過這些接口在特定的生命周期時刻執行相應的動作。
new Vue({
el: '#app',
data: {
myData: ''
},
mounted: function() {
var _this = this;
this.$nextTick(function() {
axios.post('./url', arg).then(function(res) {
_this.init(res.data);
});
})
},
methods: {
myClick: function() {
}
}
})
init() 就是我們的初始化方法了。
打包
上面的知識點已經足夠支撐我們完成一個日常項目，但這些語法層面的知識點只是表面，使用MVVM框架開發，關鍵是習慣專注于操作數據的思想，才能將代碼量從根本上減小。
現在，我們完成一個項目后，需要打包，因為在開發環境下，運行所依賴的包達到好幾百個，為了將文件體積縮減到正常范圍，必須按需打包。打包工具我們選用的是webpack，為什么選它呢？因為幾乎沒別的選！
webpack如何配置，這個交給前端工程師就好了！
一個Vue的項目，目錄樹大致是這樣：
/src 目錄是源碼文件夾，里面的都是源碼，開發環境都只打開這個文件。
/dist 目錄是發布文件夾，取自“distribution（發布）”這個單詞，里面的代碼都是正式代碼，所有資源都經過壓縮，因此不是給人看的。
對 /src 里的文件做了相應的修改后，可以查看 package.json 這個文件，找到
"scripts": {
"build": "webpack --progress -p --watch"
},
不同的項目可能略有差別，但webpack命令就是我們需要的，這條命令的key是 build ，因此我們在項目的命令行運行 npm run build ，即可完成打包，如果沒有報錯信息，說明一切順利，只需要將 dist 目錄里的東西部署到線上即可。
來自：https://segmentfault.com/a/1190000008722404