1 Vue介紹

偉大的項目是從Hello World而來的，Hello World儘管沒有什麼實際性的作用，但是在於意義重大。（哈哈哈哈）

好了不廢話了入正題。

Vue是一套用於構建用戶界面的漸進式JS框架，與其他大型框架不同的是，Vue被設計爲可以自底向上逐層應用。Vue核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue也完成能夠爲複雜的單網頁應用提供驅動。

2 Hello World

最簡單的Hello World是通過<script>引入vue.js：

<!--  開發環境版本  -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--  生產環境版本  -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

開發環境包含了有幫助的命令行警告，而生產環境版本進行了壓縮，優化了尺寸以及速度。

下一步直接創建一個html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello world'
            }
        })
    </script>
</body>
</html>

瀏覽器直接打開後會看到Hello world：

這樣Hello world就完成了。

3 更進一步

由於數據和DOM已經被建立了關聯，所有的東西都是響應式的，因此，打開控制檯直接修改app.message的值，就會看到相應的更新：

接着將div修改如下：

<div id="app">
    {{message}}
    <br><br>
    <span v-bind:title="message" style="border: 1px solid orange;">
        懸停這裏會顯示信息
    </span>
</div>

效果：

v-bind屬性稱爲指令。帶有v-前綴的是Vue提供的特殊屬性，會在渲染DOM上應用特殊的響應式行爲。在這裏v-bind:title的意思是將這個元素節點的title屬性和Vue示例的message屬性保持一致。

當然此時也可以使用控制檯修改message的值，同時也會更新HTML：

4 使用vue-cli搭建Hello world

npm install --global vue-cli
vue init webpack helloworld
cd helloworld

首先安裝全局vue-cli命令，接着基於webpack模板初始化項目，創建過程中會提示輸入相關信息：

輸入項目名，項目描述以及作者後，會提示選擇Vue運行時還是運行時+編譯器，默認（運行時+編譯器）即可，

接着提示安裝vue-router，是否使用ESLint（y與n影響不大，其實不需要使用這兩項功能）：

測試的話可以暫時不需要，接着提示創建工程會是否運行npm install，默認即可。

等待創建完成後，按提示運行即可：