前言

在開始開發例項前，應首先了解一下vue-cli的專案結構。接著我們一起來實現一個小demo——人員管理，功能簡單，通過這個例項讓大家熟悉使用vue-cli開發專案的一些操作，加深對vue-cli專案結構的印象。http://www.jianshu.com/p/5d9b341d650f

例項功能簡述

人員管理專案，有兩個頁面，首頁和管理頁，管理頁主要實現一個簡單的增刪改功能，各個功能如下所示（附github地址）

路由
新增操作
修改操作
刪除操作

建立專案

首先第一步，就是建立我們的專案，開啟cmd，進入到想要建立專案的目錄下，我這裡是到d盤的根目錄下，然後輸入vue init webpack manage，敲回車。

建立專案（1）
建立專案（2）

接著安裝依賴包，進入專案，輸入npm install

安裝依賴包

接著輸入npm run dev 執行專案，可以看到瀏覽器自動開啟，顯示如下

專案初始顯示

專案開發

1.建立首頁

因為我做的人員管理專案是wap端的，所以我們首先在主頁index.html中加上meta標籤

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

1.1 新建目錄

為方便管理，我們在src資料夾下新建一個views資料夾，用於存放所有的模組元件。

在views資料夾下新建index資料夾，再在index資料夾下新建index.vue作為專案的首頁。

新建首頁index.vue

1.2 編輯首頁index.vue

首頁模板

接著在路由配置中引入我們剛建立的首頁，並更改一下路由配置

更改路由

開啟瀏覽器，看到更改的內容已經自動渲染

2. 新增底部導航元件

因為底部導航元件是公共元件，在兩個頁面都有引用，所以我們把它建在components資料夾下，命名為footer.vue。

底部導航元件頁面內容

div的fixed樣式寫在了公共樣式public.css裡面，並在App.vue中引入，作用域設為全域性

公共樣式public.css
引入外部css

對這個頁面主要講兩點：

（1）<router-link>

可以看到footer.vue使用了<router-link>標籤，該標籤主要實現跳轉連結功能，屬性to='/'即是跳轉到path為'/'的路徑（即我們在路由配置中定義的Index路由）

（2）scoped

在<style>標籤上新增scoped，宣告作用域，樣式效果只在該頁面內生效，不汙染全域性。

3. 在首頁中引入底部導航元件

我們剛剛建立了footer.vue，但還未引入，在首頁模組views/index/index.vue中引入該元件

在首頁中引入底部導航元件

使用元件步驟：

（1）引入元件     import FooterNav from '../../components/footer.vue'

（2）區域性註冊     注意寫在export default內部，components:{FooterNav}

（3）使用元件    <footer-nav></footer-nav> 注意命名，駝峰法定義的元件FooterNav需在使用時用短橫線連線<footer-nav>

再回到瀏覽器，可以看到首頁已經有底部導航了

4.建立人員管理頁面

4.1 建立頁面

同樣的，因為人員管理可以算另外一個模組，所以我們在src/views/新建一個資料夾manage，再在manage資料夾下新建index.vue

管理頁面

同樣在管理頁面引入了底部導航元件footer.vue

現在管理頁面建立完成，但還需在路由配置中引入才可以通過路由/manage去訪問

增加/manage路由

接下來就去瀏覽器檢驗，我們定義的兩個路由之間的跳轉

4.2 為底部導航繫結class

可以看到由於沒有給底部導航設定active狀態的樣式，切換起來不是很明顯，所以我們可以給底部導航繫結class值

在首頁使用<foot-nav>時繫結class類名isIndex

這裡使用v-bind指令來繫結class，第一個屬性為class名字，第二個屬性為布林值，為true，則表示該元件有這個class，為false則沒有。所以，當訪問首頁模組時，底部導航有一個類名isIndex，我們可以在底部導航內部為isIndex設定樣式。

同樣的，也在管理頁面manage.vue為底部導航繫結class isManage。

另外還需注意一點，data在元件內部得寫為一個函式，通過return返回資料值，這是因為元件之間是共享的，但是要保證它們各自的資料是私有，互不影響的，所以要給每個元件返回新的data物件。這一點官網也有說明vuejs官網——data必須是函式。

返回瀏覽器檢視，繫結的class已經生效

4.3 編寫功能

前面管理頁面把姓名列表寫死了，為方便實現增刪改功能，接下來我們得通過資料模擬來實現列表渲染。

定義資料

（1）在data函式下新增peoples陣列

（2）列表渲染

列表渲染用v-for指令，item為自定義的名字，指向陣列中的每一個個體，peoples為我們在data函式中定義的陣列名字，模板渲染採用{{ }}

返回瀏覽器檢視效果

4.3.1 新增功能

控制輸入框顯示與隱藏

我們先將新增人員輸入框隱藏，當點選“新增”按鈕時再顯示，要實現這個功能我們需要用到條件渲染。

首先用到了v-show指令，showAdd是一個布林值，為true則渲染，為false則隱藏

v-show指令與v-if指令的區別就在於，前者一開始就載入，更適用於頻繁的切換，後者需首先判斷布林值，為true才載入渲染

同時我們給按鈕增加一個點選事件（v-on是繫結事件指令），用於控制showAdd的值從而控制輸入框div的隱藏與顯示

vue中方法用methods:{}包裹，裡面的add(){}也等同於add:function(){}

檢視效果

新增事件

給輸入框雙向繫結其輸入的資料，給輸入區域的“確定”按鈕繫結一個事件去獲取輸入框輸入的資料並儲存進陣列。

v-model指令是雙向繫結，一般用於表單元件

當輸入框的值改變，其繫結的nameValue跟著改變

同理，當繫結的nameValue值改變，輸入框的值也跟著改變

我們這裡還做了判斷，如果什麼都不輸，或輸入空格就彈出提示，只有當輸入的值不為空時再儲存

檢視效果

4.3.2 刪除功能

刪除功能有一個重點，我們得獲取列表的index索引值，來判斷到底刪除哪一個值

更改一下列表迴圈，加入索引，並將索引值繫結到td標籤上，通過event點選事件去獲取td標籤上的id，從而去刪除索引值為id的值

檢視效果

4.3.3 編輯功能

首先新建編輯輸入區域，通過點選“編輯”控制其渲染。

當點選“編輯”字樣時，觸發edit事件，edit事件主要控制showEdit為true，讓編輯輸入區域渲染出來，同時還獲取td標籤上的id值，儲存到一個變數editId中。

同樣也給編輯輸入框雙向繫結一個值newName。

當點選“確定”按鈕時，觸發editName事件，editName事件首先獲取editId的值以及input繫結的newName值，再更改索引值為editId的name屬性

檢視效果

到這裡，我們也就實現了一個具有增刪改功能的小demo。

我再把本例中用到的重要的知識點簡單梳理一遍

1.每一個單檔案元件.vue通常都是由三部分構成template、style、script（為什麼說通常，因為也可以只有模板template，不寫任何樣式和功能，但大多陣列件都會有自己的樣式和功能）。其中style有2個點，第一，可以引用外部樣式，第二，作用域scoped。

2.單檔案元件的引用，需要先在script中用import引用（同時命名）格式為

import [命名] from [相對路徑]

再用components:{ [命名] }區域性註冊

最後在模板中使用，注意命名格式。如果是駝峰HeadNav或headNav，使用時就是<head-nav>

3.多使用vue指令，常用的有v-show，v-if，v-on，v-bind，v-model