内容导读

解決方案:需要在require后加.default。post请求（跨域）也可以关注一下vue-jsonp找到 proxyTable ，做如下配置，target是需要跨域访问的url。changeOrigin置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了(但有说法说只适用于开发环境)。注意：修改完之后重新执行 npm run dev 方可生效！6. beforeCreate() 中可以初始化数据 mounted() 模板编译挂载之后，可以初始化echarts图表要理解vue的生命周期！8. npm run dev 之后，项目跑在 localhost:8080 ，如果局域网内其他同事想访问时，通过访问你的ip并访问不到，这时候，就需要修改 package.json 中的 script 下的 dev ，在最后加上 --host 10.10.12.68 即可。

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