入职第一天，负责PC端商城项目，这也是人生第一个真正的项目。刚做了一天，就遇到不少问题，在这里列出自己的问题与解决办法，与大家交流，提升自己，希望以后不会掉进同一个坑里。文章持续更新到项目完善，yeah~

（本文只列项目问题与解决方法，不会讲到核心理念之类，暂不作深入研究）

 

一、使用vue-cli创建项目

上次逛论坛遇到一张图，出处忘记了，借送给大家，从搭建到项目结构，一张图解决好多疑问，好优秀

 

二、Element-ui安装应用

1.安装到项目  $ cnpm install element-ui -S

2.main.js中写入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

3.后期简洁代码，做到只引用需要组件

 

三、问题整合

1.使用axios调用后台数据

(1).安装 $ cnpm install axios -S

(2).main.js 引入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'; // this
import App from './App';
import router from './router';

Vue.config.productionTip = false
/* eslint-disable no-new */

Vue.use(ElementUI);
Vue.prototype.$axios = axios; //and this

new Vue({
  el: '#app',
  components: {App},
  template: '<App/>'
})

(3).从后台获取数据（POST）

export default {
    name: "footer",
    data() {
      return {
        recommends: ''
      }
    },
    methods: {
      post() {
        this.$axios.post('url', {params1: 'data', params2: 'data'})
          .then((response) => {
            this.recommends = response.data.data.goodsList;
            console.log('成功');
          })
          .catch((error) => {
            console.log('失败' + error);
          });
      }
    },
    mounted() {
      this.post()
    }
  }