vue-8-1 项目结构的搭建与开发_web 8-1项目-优快云博客

本文介绍如何使用Vue和Webpack搭建项目，配置API接口，以及如何利用Vuex进行状态管理，包括组件间通信、数据获取和更新的流程。

一、准备工作

１. 初始化项目

webpack模板已经配置好了webpack.config所以less less-loader不需要重新配置。

vue init webpack itany
cd itany
cnpm install
cnpm install less less-loader -D
cnpm install vuex axios -S
npm run dev

2. 项目资源

清除原来的样式

数据

|-reset.css
|-data.json

3. 创建目录结构

首先清除项目中的部分内容

创建如下目录结构：
    |-data.json
    |-static
        |-css
            |-reset.css

4. 配置API接口，模拟后台数据

在新版的webpack模板中，没有dev.srver.js取而代之的是webpack.dev.config.js

配置方式可参考：https://blog.youkuaiyun.com/yusirxiaer/article/details/79602466

使用express框架启动一个Node服务器，配置API接口，模拟后台数据

测试API：
 http://localhost:8080/api/seller
 http://localhost:8080/api/goods
 http://localhost:8080/api/ratings

二、项目整体结构开发

2.1建立store文件的相关内容，并在main.js里面引入注册

在store下的index.js里面，需要引入vue ,vuex

2.2新建组件header,并在header里面访问api/seller下的数据

首先在store下的seller模块actions下添加请求方法

需要在此模块下导入axios模块，因为不是组件，不能像添加原型方法那样使用axios,只能导入

 getSeller({commit,state}){
    axios.get('/api/seller').then(resp=>{
      console.log(resp)
    })
  }

 import {mapGetters} from 'vuex'
    export default {
        created(){
          this.$store.dispatch('getSeller');
        },
      computed:{
          //对象展开运算符
        ...mapGetters([
          'seller'
        ]),
        msg(){
          return 'i love animals'
        }
      }


    }

然后header编辑，组件发出请求

  export default {
        created(){
          this.$store.dispatch('getSeller');
        },
    }

这样可以在控制台输出数据。

2.3要在页面中读物数据

首先要再事件响应时把数据存储在state里面getters里面

注意的是commit提交变化的时候，是可以带着数据的，这样，mutations的第一个参数就是state,第二个参数就是数据，因为数据只能在mutation里面做修改。

const state={
  seller:{}
}

const getters={
  seller(state){
    return state.seller;
  }
}

const actions={

  getSeller({commit,state}){
    axios.get('/api/seller').then(resp=>{
      // console.log(resp);
      // state.seller=resp.data.data;
      // if(resp.data.errno==0){
      //   //commit同样也可以提交数据
        commit(types.GET_SELLER,resp.data.data);
      // }
    })
  }
}

const mutations={
  //第一个参数是state对象，第二个参数commit过来的数据
  [types.GET_SELLER](state,data){
    state.seller=data;
  }
}

然后就是从组件中读取数据，使用计算属性，利用mapGetters,按照一般的形式，那么想使用自己定义的计算属性会有问题，所以使用es6的新语法的对象展开符，然后在模板中使用{{seller}} {{msg}} 就可以访问数据。

import {mapGetters} from 'vuex'
    export default {
        //组件向vuex发送要提交时间
        created(){
          this.$store.dispatch('getSeller');
        },
      //计算属性，要读取数据
      computed:{
          //对象展开运算符
        ...mapGetters([
          'seller'
        ]),
        msg(){
          return 'i love animals'
        }
      }


    }

2.4现在需要添加另外一个组件到header里面，思路如下：

首先在components里面新建一个detail.vue组件

然后在组件的模板中写入基本内容，因为这个内容是暂时隐藏，点击其他按钮才会显示，所以给内容的父标签添加-v-show=""detailShow"

detailShow是一个布尔值，来自计算属性中的mapGetters(需要引入)

.......

当点击header中图片时，会触发动作，@click='xxx', xxx在methods里面，她会调用this.$store.dispatch（'actions中的一个Action'），其实就是组件触发动作，然后vuex中的store就会触发action,这个action会commit到mutation,mutation会改变state里面的detailShow的布尔值，getters里面的也会产生相应变化，从而传到到detail组件中进行改变

这样就可以把detail组件引入到header组件中去了

（其实就是两个组件之间的通信问题，需要在父组件中，点击后修改子组件的值，父子组件的通信也可以解决，此处是通过项目中的store,即vuex来解决的）。

最后为detail组件引入动画，导入模块比较特殊

 import 'animate.css/animate.css'

用动画要使用animate.css

npm install animate.css -S

2.5想要detail组件也拿到seller里面的数据，直接使用vuex

通过getters,可以直接获得

import {mapGetters} from 'vuex'

    export default {
    computed:{
      /*注意括号里面是数组*/
      ...mapGetters([
        'detailShow',
        'seller'
      ])
    },

2.6要添加另外一个组件，当点击路由中的一个时，跳转到对应页面

①首先配置路由，在router下的index.js里面

import Vue from 'vue'
import Router from 'vue-router'
import goods from '../components/goods/goods.vue'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/goods',
      component:goods
    }
  ],
  linkActiveClass:'active'
})

②编写新的组件goods

<template>
    <div class="goods">
      <div class="menu-wrapper">
        <ul>
          <li v-for="item in goods">{{item.name}}</li>
        </ul>
      </div>
      <div class="foods-wrapper">
        <ul>
          <li v-for="item in goods">
          <h1>{{item.name}}</h1>
          <ul>
            <li v-for="food in item.foods">
              <img :src="food.icon">
              {{food.name}}
            </li>
          </ul>
          <hr></li>
        </ul>
      </div>
    </div>
</template>

<script>
  import{mapGetters} from 'vuex'
    export default {
        created(){
          this.$store.dispatch('getGoods')
        },
      computed:{
        ...mapGetters([
          'goods'
        ])
      }
    }

</script>

<style lang="less" scoped>
.goods{
  display: flex;
  position:absolute;
  top:210px;
  bottom:46px;
  pverflow:hidden;
  .menu-wrapper{
    flex:0 80px;
    width:80px;
    background-color: #7e8c8d;
  }
  .foods-wrapper{
    flex:1;
  }
}
</style>

编写vuex下的goods模块

import types from '../types.js'
import axios from 'axios'

const state={

  //定义的应该是一个数组，因为原始数据就是一个数组
  goods:[]
}
const getters={
  goods(state){
    return state.goods;
  }
}

const actions= {
  getGoods({commit, state}) {
 axios.get('/api/goods').then(resp=>{
   if(resp.data.errno==0){
     commit(types.GET_GOODS,resp.data.data)
   }
 })

  }
}

const mutations={
  [types.GET_GOODS](state,data){
    state.goods=data;
  }

}
export default {
  state,
  getters,
  actions,
  mutations
}