vue-cli+vue-router+vuex+iview書店案例（簡單易學）

Vue書店

demo地址
源碼地址

1.案例所用技術

• vue-cli腳手架；

• vue-router路由管理；

• vuex2.0狀態管理;

• iview視圖;

2.能有什麼收穫

---

• 初步熟悉vue-cli手交架；

• 初步學會處理vue-router路由管理，狀態管理的內容，以及用iview簡單佈局；

---

3.書店的功能需求

• 主導航是首頁、書單、以及圖書管理；

• 圖書管理包含添加圖書、修改圖書和刪除圖書；

• 效果以下圖：
  

---

4.功能實現

• (1)安裝vue-cli

  • a:npm install -g vue-cli（只用安裝一次，之後直接從b開始）；

  • b:vue init webpack my-project（my-project是文件名）；

  • c:cd my-project（進入文件夾）;

  • d:npm install（安裝依賴）;

  • e:npm run dev（啓動服務）；
    咱們實現簡單的操做邏輯所用的操做集中在src目錄下

• (2)組件

  • Home 首頁組件

  • List 書單組件

  • Manger 圖書管理

  • Delete 刪除組件

  • Add 增長組件

  • Update 修改組件

• （3）vue-router路由管理

  • 爲了方便路由管理，咱們將用這樣的結構來描述路由

    import Vue from 'vue'  //引入vue
    import Router from 'vue-router'  //引入vue-router
    import Home from '../components/Home.vue'  //引入各個組件
    import List from '../components/List.vue'
    import Add from '../components/Add.vue'
    import Manger from '../components/Manger.vue'
    import Detail from '../components/Detail.vue'
    import Update from '../components/Update.vue'
    import Delete from '../components/Delete.vue'
    
    Vue.use(Router);     //在vue中使用vue-router
    
    const routes = [            //定義路由
      {path:'/home',           //主路由
       component:Home},        //組件 
      {path:'/list',
       component:List},
      {path:'/manger',
       component:Manger,
      children:[              //子路由
        {path:'add',          
        component:Add},
        {path:'update',
        component:Update},
        {path:'delete',
        component:Delete}]},
    { path:'/detail/:id',    //子路由動態綁定
    name:'detail',         //子路由名 
    component:Detail}]
    export default new Router({  //導出路由
    routes})

• （4）vuex狀態管理

  • getters
getters的做用參見Vue值理解Getters，在這裏getters的做用就是拿到store倉庫裏面存放的bookInfo書單。

    export const  books =state => state.bookInfo //導出

  • types

    export const BOOK_ADD = 'BOOK_ADD'
        export const BOOK_DELETE = 'BOOK_DELETE'
        export const BOOK_UPDATE = 'BOOK_UPDATE'

  • mutations
mutations的做用就是用來操做state裏面的數據，並且在vuex裏面只有在mutations裏面才能操做state裏面的數據，詳情參考Vuex之理解Mutations。

    import {BOOK_ADD, BOOK_DELETE,BOOK_UPDATE} from './types'
       //引入types
    const  mutations ={  //定義mutations
    [BOOK_ADD](state,book){    //增長圖書方法
    if(state.bookInfo.length == 0){
      book.id=1
    }else{
     book.id= state.bookInfo[state.bookInfo.length-1].id+1
    }
       state.bookInfo.push(book)  //其實就是store裏面的state裏面的bookInfo增長一本書
       },
       [BOOK_DELETE](state,bid){  //刪除圖書的方法
     state.bookInfo=state.bookInfo.filter(item=>{ //經過id刪掉bookInfo裏面指定的圖書
       return  item.id != bid
     })
       },
       [BOOK_UPDATE](state,book){//更新圖書的方法 
       state.bookInfo.map(item=>{
     if(item.id == book.id){  
       return book}})}} 
       export defalut mutaions

  • actions
actions是用來提交mutations裏面的方法的，並且能夠異步操做。詳情見Vuex之理解Actions。

    import {BOOK_ADD, BOOK_DELETE,BOOK_UPDATE} from './types'
    const  actions ={
    addBook:({commit},book)=>commit('BOOK_ADD',book),
    deleteBook:({commit},id)=>commit('BOOK_DELETE',id),
    updateBook:({commit},book)=>commit('BOOK_UPDATE',book),}
    export default actions

  • index
    定義state，就是定義狀態，也就是數據，詳情見Vuex之理解state。

    import Vue from 'vue'
    import Vuex from 'vuex'
    import * as getters from './getters' //引入getters
    import actions from './actions'   //引入actions
    import mutations from  './mutations' //引入mutations
    
    Vue.use(Vuex)
    const state ={  
     bookInfo:[{
     id:1,
     bookName:'Vue權威指南',
     imgUrl:'http://i-3.391k.com/2016/9/21/b2235ffb-4fbd-427e-b49f-3b60f1af4492.png',
     price:12},
     {id:2,
     bookName:'Vue實踐揭祕',
     imgUrl:'http://img5.imgtn.bdimg.com/it/u=2842506561,1290810338&fm=11&gp=0.jpg',
     price:12}]
    }
    export  default  new Vuex.Store({//導出store
     state,
     getters,
     mutations,
     actions})

• (5)main.js
  主文件

  import Vue from 'vue'
   import App from './App'
   import iview from 'iview'  //引入iview
   import  router from './router/index'
   import 'iview/dist/styles/iview.css'//引入iview的css文件
   import store from './store'//引入store狀態管理
  
   Vue.config.productionTip = false
  
   Vue.use(iview)
  
   new Vue({
     el: '#app',
     router,
     store,
     template: '<App/>',
     components: { App }
   })

• （6）組件代碼
  這裏用刪除組件舉例

  <template>
  <div class="listContainer">
   <Col span="5" offset="1" v-for="（book ,index）in books" :key="index" class="text">
   //v-for循環拿到每本書，注意key，否則會警告
   <Card >
     <p slot="title">{{book.bookName}}</p>
     <img  class="bookimg" :src="book.imgUrl" alt="">
     <p>售價：{{book.price}}</p>
     <Icon type="close-round"></Icon>
     <Button type="error" @click="deleteBook(book.id)">刪除</Button>
     //點擊時觸發刪除函數，將要刪除的圖書id傳過去
   </Card>
   </Col>
  </div>
  </template>
  <script>
  import { mapGetters } from 'vuex'
  export default{
   name: 'Home',
   computed:{
     ...mapGetters({//拿到getters裏面的函數
       books:'books'  
     })
   },
   methods:{
     deleteBook(id){
       this.$store.dispatch('deleteBook',id)
       //用dispatch方法觸發actions裏面deleteBook函數，並傳入id
     }
   }
  }
  </script>

• update增長購物車
  demo地址
  源碼地址