vue-cli——人員管理實例
前言
在開始開發實例前，應首先了解一下vue-cli的項目結構。接著我們一起來實現一個小demo——人員管理，功能簡單，通過這個實例讓大家熟悉使用vue-cli開發項目的一些操作，加深對vue-cli項目結構的印象。
實例功能簡述
人員管理項目，有兩個頁面，首頁和管理頁，管理頁主要實現一個簡單的增刪改功能，各個功能如下所示（附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>
作者：一岑不冉
鏈接：http://www.jianshu.com/p/5d9b341d650f
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
vue-cli——人員管理實例