Vue.js（讀音 /vjuː/, 類似於view）是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。
Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue.js 自身不是一個全能框架——它只聚焦於視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動復雜的單頁應用。
BootCDN（國內） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和 npm 發布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
使用<script> 直接引入這個地址即可使用
（3）NPM方法
Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。
1 # 全局安裝 vue-cli 2 $ cnpm install --global vue-cli 3 # 創建一個基於 webpack 模板的新項目 4 $ vue init webpack my-project 5 # 這里需要進行一些配置，默認回車即可 6 This will install Vue 2.x version of the template. 7 8 For Vue 1.x use: vue init webpack#1.0 my-project 9 10 ? Project name my-project 11 ? Project description A Vue.js project 12 ? Author runoob <test@runoob.com> 13 ? Vue build standalone 14 ? Use ESLint to lint your code? Yes 15 ? Pick an ESLint preset Standard 16 ? Setup unit tests with Karma + Mocha? Yes 17 ? Setup e2e tests with Nightwatch? Yes 18 19 vue-cli · Generated "my-project". 20 21 To get started: 22 23 cd my-project 24 npm install 25 npm run dev 26 27 Documentation can be found at https://vuejs-templates.github.io/webpack
進入項目，安裝並運行：
1 $ cd my-project 2 $ cnpm install 3 $ cnpm run dev 4 DONE Compiled successfully in 4388ms 5 6 > Listening at http://localhost:8080
這樣就生成了一個新項目，然后我們看一項目結構：
然后看一下幾個主要文件的內容：
index.html文件
1 <html> 2 <head> 3 <mate chaiset="utf-8"> 4 <title>vue-playlist</title> 5 </head> 6 <body> 7 <div id="app"></div> 8 </body> 9 </html>
main.js文件
1 improt Vue from 'vue' //可以將腳手架中下載的模塊拿出來，可以直接使用new來實例化vue對象 2 improt App from './App' 3 4 Vue.config.productionTip = false 5 6 new Vue({ 7 el:'#app', //當前的vue要控制的容器是誰，要獲取的這個容器元素是誰，#app是index.thml里的id=“app” 8 template:'<App/>', //模板，可以寫對應的div，也可以寫組件調用的標簽，只要有一個根標簽即可 9 components:{ App } //想要調用組件，必須在component里注冊這個組件，這里的APP來源於引入的./App文件，即：App.vue文件 10 })
App.vue文件：
1 <!--1模板：html結構 --> 2 <template> 3 <div id="app"> 4 <img src="./assets/logo.png"> 5 <HelloWorld/> 6 </div> 7 </template> 8 9 <!--2行為：處理邏輯 --> 10 <script> 11 import HelloWorld from './components/HelloWorld' 12 13 export default { 14 name: 'App', 15 components: { 16 HelloWorld 17 } 18 } 19 </script> 20 21 <!--3樣式：解決樣式 --> 22 <style> 23 #app { 24 font-family: 'Avenir', Helvetica, Arial, sans-serif; 25 -webkit-font-smoothing: antialiased; 26 -moz-osx-font-smoothing: grayscale; 27 text-align: center; 28 color: #2c3e50; 29 margin-top: 60px; 30 } 31 </style>
模板：
template可以用它去包括一些內容，它本身並不會真正的渲染到dom里面去，可以直接使用template標簽包括起來，注意：template里有且只能有一個根標簽。
行為：
通過import來跟別的組件進行關聯，然后通過
1 export default { 2 name: 'App', 3 components: { 4 HelloWorld 5 }
注冊一下就可以調用了。
樣式：
跟css樣式一樣,這里不再做說明。
項目加載過程
項目開始：index.html ----> main.js ----> App.vue
由index.html入口文件，他會執行main.js文件，main.js會實例化我們的Vue對象，接下來會執行App.vue組件，到了App.vue以后，如果模板有內容的話，他會將模板中的內容插入到index.html的容器當中，也可以在行為屬性里設置對應的屬性。