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地址
  源码地址