前言
在開始開發(fā)實例前，應首先了解一下vue-cli的項目結構。接著我們一起來實現(xiàn)一個小demo——人員管理，功能簡單，通過這個實例讓大家熟悉使用vue-cli開發(fā)項目的一些操作，加深對vue-cli項目結構的印象。
實例功能簡述
人員管理項目，有兩個頁面，首頁和管理頁，管理頁主要實現(xiàn)一個簡單的增刪改功能，各個功能如下所示（附github地址）
創(chuàng)建項目
首先第一步，就是創(chuàng)建我們的項目，打開cmd，進入到想要創(chuàng)建項目的目錄下，我這里是到d盤的根目錄下，然后輸入vue init webpack manage，敲回車。
接著安裝依賴包，進入項目，輸入npm install
接著輸入npm run dev 運行項目，可以看到瀏覽器自動打開，顯示如下
項目開發(fā)
1.創(chuàng)建首頁
因為我做的人員管理項目是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作為項目的首頁。
1.2 編輯首頁index.vue
接著在路由配置中引入我們剛創(chuàng)建的首頁，并更改一下路由配置
打開瀏覽器，看到更改的內(nèi)容已經(jīng)自動渲染
2. 添加底部導航組件
因為底部導航組件是公共組件，在兩個頁面都有引用，所以我們把它建在components文件夾下，命名為footer.vue。
div的fixed樣式寫在了公共樣式public.css里面，并在App.vue中引入，作用域設為全局
對這個頁面主要講兩點：
（1）<router-link>
可以看到footer.vue使用了<router-link>標簽，該標簽主要實現(xiàn)跳轉(zhuǎn)鏈接功能，屬性to='/'即是跳轉(zhuǎn)到path為'/'的路徑（即我們在路由配置中定義的Index路由）
（2）scoped
在<style>標簽上添加scoped，聲明作用域，樣式效果只在該頁面內(nèi)生效，不污染全局。
3. 在首頁中引入底部導航組件
我們剛剛創(chuàng)建了footer.vue，但還未引入，在首頁模塊views/index/index.vue中引入該組件
使用組件步驟：
（1）引入組件 ? ? import FooterNav from '../../components/footer.vue'
（2）局部注冊 ? ? 注意寫在export default內(nèi)部，components:{FooterNav}
（3）使用組件? ? <footer-nav></footer-nav> 注意命名，駝峰法定義的組件FooterNav需在使用時用短橫線連接<footer-nav>
再回到瀏覽器，可以看到首頁已經(jīng)有底部導航了
4.創(chuàng)建人員管理頁面
4.1 創(chuàng)建頁面
同樣的，因為人員管理可以算另外一個模塊，所以我們在src/views/新建一個文件夾manage，再在manage文件夾下新建index.vue
同樣在管理頁面引入了底部導航組件footer.vue
現(xiàn)在管理頁面創(chuàng)建完成，但還需在路由配置中引入才可以通過路由/manage去訪問
接下來就去瀏覽器檢驗，我們定義的兩個路由之間的跳轉(zhuǎn)
4.2 為底部導航綁定class
可以看到由于沒有給底部導航設置active狀態(tài)的樣式，切換起來不是很明顯，所以我們可以給底部導航綁定class值
在首頁使用<foot-nav>時綁定class類名isIndex
這里使用v-bind指令來綁定class，第一個屬性為class名字，第二個屬性為布爾值，為true，則表示該組件有這個class，為false則沒有。所以，當訪問首頁模塊時，底部導航有一個類名isIndex，我們可以在底部導航內(nèi)部為isIndex設置樣式。
同樣的，也在管理頁面manage.vue為底部導航綁定class isManage。
另外還需注意一點，data在組件內(nèi)部得寫為一個函數(shù)，通過return返回數(shù)據(jù)值，這是因為組件之間是共享的，但是要保證它們各自的數(shù)據(jù)是私有，互不影響的，所以要給每個組件返回新的data對象。這一點官網(wǎng)也有說明vuejs官網(wǎng)——data必須是函數(shù)。
返回瀏覽器查看，綁定的class已經(jīng)生效
4.3 編寫功能
前面管理頁面把姓名列表寫死了，為方便實現(xiàn)增刪改功能，接下來我們得通過數(shù)據(jù)模擬來實現(xiàn)列表渲染。
定義數(shù)據(jù)
（1）在data函數(shù)下新增peoples數(shù)組
（2）列表渲染
列表渲染用v-for指令，item為自定義的名字，指向數(shù)組中的每一個個體，peoples為我們在data函數(shù)中定義的數(shù)組名字，模板渲染采用{{ }}
返回瀏覽器查看效果
4.3.1 新增功能
控制輸入框顯示與隱藏
我們先將新增人員輸入框隱藏，當點擊“新增”按鈕時再顯示，要實現(xiàn)這個功能我們需要用到條件渲染。
首先用到了v-show指令，showAdd是一個布爾值，為true則渲染，為false則隱藏
v-show指令與v-if指令的區(qū)別就在于，前者一開始就加載，更適用于頻繁的切換，后者需首先判斷布爾值，為true才加載渲染
同時我們給按鈕增加一個點擊事件（v-on是綁定事件指令），用于控制showAdd的值從而控制輸入框div的隱藏與顯示
vue中方法用methods:{}包裹，里面的add(){}也等同于add:function(){}
查看效果
新增事件
給輸入框雙向綁定其輸入的數(shù)據(jù)，給輸入?yún)^(qū)域的“確定”按鈕綁定一個事件去獲取輸入框輸入的數(shù)據(jù)并保存進數(shù)組。
v-model指令是雙向綁定，一般用于表單組件
當輸入框的值改變，其綁定的nameValue跟著改變
同理，當綁定的nameValue值改變，輸入框的值也跟著改變
我們這里還做了判斷，如果什么都不輸，或輸入空格就彈出提示，只有當輸入的值不為空時再保存
查看效果
4.3.2 刪除功能
刪除功能有一個重點，我們得獲取列表的index索引值，來判斷到底刪除哪一個值
更改一下列表循環(huán)，加入索引，并將索引值綁定到td標簽上，通過event點擊事件去獲取td標簽上的id，從而去刪除索引值為id的值
查看效果
4.3.3 編輯功能
首先新建編輯輸入?yún)^(qū)域，通過點擊“編輯”控制其渲染。
當點擊“編輯”字樣時，觸發(fā)edit事件，edit事件主要控制showEdit為true，讓編輯輸入?yún)^(qū)域渲染出來，同時還獲取td標簽上的id值，保存到一個變量editId中。
同樣也給編輯輸入框雙向綁定一個值newName。
當點擊“確定”按鈕時，觸發(fā)editName事件，editName事件首先獲取editId的值以及input綁定的newName值，再更改索引值為editId的name屬性
查看效果
到這里，我們也就實現(xiàn)了一個具有增刪改功能的小demo。
我再把本例中用到的重要的知識點簡單梳理一遍
1.每一個單文件組件.vue通常都是由三部分構成template、style、script（為什么說通常，因為也可以只有模板template，不寫任何樣式和功能，但大多數(shù)組件都會有自己的樣式和功能）。其中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
