摘要：在這個組件里面有一些鏈接列表，和，這些列表直接使用編寫按照傳統的寫法，如果我們需要往里面添加鏈接的時候，每次我們都得添加和標簽。所以修改如下這樣我們就把數據和視圖分開了，模板里面的代碼也簡潔了很多，不再需要寫很多重復的代碼。

Vue 的官方文檔 對 Vue 介紹非常詳細，但官方文檔使用在 HTML 中引入 vue 的方式進行講解，而實際項目中一般使用腳手架如 vue-cli 初始化項目。以至于剛看完文檔時，卻依舊不能立即立即 vue-cli 創建的項目代碼。所以本文 vue-cli 構建的項目為基礎，詳細解釋其代碼及對應的概念，并進行簡單的實踐。

本文的代碼在 https://github.com/nodejh/vue2-tutorials/tree/master/01.QuickStart

命令行工具 安裝 vue-cli 并初始化項目

首先要全局安裝 vue-cl：

$ npm install --global vue-cli

然后使用 vue-cli 初始化一個基于 webpack 模板的新項目，除了 Install vue-router? 選 N (No)，其余都可以直接回車選 Y (Yes)，因為我們暫時不會講到 vue-router：

$ vue init webpack demo
? Project name demo
? Project description A Vue.js project

? Author nodejh 
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

安裝依賴

$ cd demo
$ npm install
$ npm run dev

然后打開瀏覽器，輸入 http://localhost:8080 就能看到界面。

接下來分析一下代碼。

代碼分析

項目目錄結構如下：

├── README.md
├── build    # 編譯項目的配置文件目錄
├── config    # 配置文件目錄
├── src    # 項目主要代碼目錄
├── static    # 靜態資源
├── test    # 測試文件目錄

開發階段的主要代碼都在 src 目錄中編寫，vue-cli 默認生成了一些代碼：

src
├── App.vue
├── assets
│?? └── logo.png
├── components
│?? └── Hello.vue
└── main.js

可以發現，代碼的后綴名有兩種：

.js JS 文件

.vue Vue 組件，里面定義了 Vue 實例、模板、樣式等。需要由 webpack 等工具來轉換為 js 代碼

接下來會逐一解釋這些文件及代碼。

main.js

main.js 是項目的入口文件，也是 webpack 打包的入口文件。里面最代碼很少，主要就是通過 new Vue() 創建 Vue 實例：

new Vue({
  el: "#app",
  template: "",
  components: { App },
});

每個 Vue.js 應用都是通過構造函數 Vue 創建一個 Vue 的根實例啟動的。

在實例化 Vue 時，傳入一個了一個對象，對象包含以下幾個選項。

el

el 的值是 Vue 實例的掛載目標，這里是 #app，也就是 demo/index.html 中 id="app" 這個元素：

el 必須是一個已存在的元素。

api/#el

components

在說 template 之前，先來看看 components 屬性。

components: { App } 等價于 components: { App: App }，是一個包含了對 Vue 實例可見的組件的哈希表。只有在 components 里面列出來的組件，才可以在 template 里面使用。

如果我們把 components: { App } 改為 components: { App } 改為 components: { MyApp: App }，那么在 template 里面就需要這樣使用：template: ""。

由于 HTML 標簽不區分大小寫，所以 components 里面的駝峰命名會自動轉換為短橫線。詳見 camelCase vs. kebab-case

template

template 就是掛載到頁面的模板。

這里的值是 組件就是 components 屬性中的 App，也就是通過 import 引入的 App 這個模板。

new Vue({
  el: "#app",
  // 這里的  就是 components 屬性的值 App
  template: "",
  components: { App },
});

所以這段代碼的含義就是，將 這個模板掛載到元素 #app 上。

src/App.vue

src/App.vue 是一個典型的單文件組件。實際在項目中，我們寫的基本都是組件，再根據需要用組件組成頁面，這其實就是組件化。組件與組件之間相互獨立，項目結構更加清晰，也更有利于維護。

一個組件里面封裝了 HTML、CSS 和 JS，有自己獨立的樣式和邏輯。