vue-cli搭建项目记录

1. 创建vue+webpack项目
   vue init webpack

2.eslint: Newline required at end of file but not found
解决方案:需要在后面再加一行，空行

3. image.png

解決方案:需要在require后加.default。

image.png
4.vue中发送http请求

main.js中

import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

.vue中使用
 this.$http.get('/static/data/brand.json').then((response) => {
      this.items['deviceBrand'] = response.data
 })

post请求（跨域）也可以关注一下vue-jsonp
找到proxyTable，做如下配置，target是需要跨域访问的url。changeOrigin置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了(但有说法说只适用于开发环境)。

跨域
以下为post请求，相当于请求target中的url+'/port_info'

  this.$http.post('/api/port_info', json).then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })

注意：修改完之后重新执行npm run dev方可生效！！！

5.vue中使用echarts

main.js中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

.vue中
var myChart = this.$echarts.init(document.getElementById(this.id))
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    })

6.beforeCreate()中可以初始化数据
mounted()模板编译挂载之后，可以初始化echarts图表
要理解vue的生命周期！！！

生命周期
解释

7. ：用于绑定数据
   @用于绑定事件
   子组件需要向父组件传递参数时，需要

绑定事件：
 <span class="next"
          :class="data.currentPage===data.allPage?'click-disabled':''"
          @click="clickPage(data.currentPage+1)"
    >下一页</span>

export default {
  props: ['data'],
  methods: {
    clickPage: function (page) {
     //使用$emit给父组件绑定事件，后面可传入参数
        this.$emit('handleSearch', page)   
    }
  }
}



父组件中处理，
<pagination :data="page"
                   @handleSearch="handleSearch"
       ></pagination>


 handleSearch: function (page) {
        在methods中，绑定函数，函数参数为子组件传入的参数
}

8.npm run dev之后，项目跑在localhost:8080，如果局域网内其他同事想访问时，通过访问你的ip并访问不到，这时候，就需要修改package.json中的script下的 dev，在最后加上--host 10.10.12.68即可。host后是你的ip

image.png