vue-8-1 项目结构的搭建与开发

一、 准备工作

１. 初始化项目

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.csdn.net/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)
    })
  }

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

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

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


    }








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;
  }
}