命令行创建vue脚手架、引入jq等插件、组件间传值

本文链接：https://blog.csdn.net/qq_36784628/article/details/86562009

https://blog.csdn.net/Ag_wenbi/article/details/86359276

二、vue映入jquery

1、npm install jquery

2、在webpack.base.conf.js中添加

  plugins:[
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],

3、main.js中引用 import $ from 'jquery';

二、引入滚动条niceScroll

cnpm install jquery.nicescroll

main.js中引用 import 'jquery.nicescroll';//滚动条插件

三、引入echarts

cnpm install echarts --save

main.js中

import Echarts from 'echarts'
Vue.prototype.echarts = Echarts
Vue.use(Echarts)

mounted() {
      var dom = document.getElementById('echarts')
      var myChart = this.echarts.init(dom)
      // 绘制图表
      myChart.setOption({
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          data: [{
              value: 235,
              name: '视频广告'
            },
            {
              value: 274,
              name: '联盟广告'
            },
            {
              value: 310,
              name: '邮件营销'
            },
            {
              value: 335,
              name: '直接访问'
            },
            {
              value: 400,
              name: '搜索引擎'
            }
          ]
        }]
      });
    },

二、模拟后台，传数据

1、static文件夹下创建mock文件夹，在mock下创建index.json文件

index.json文件模版

2、修改index.js配置文件

proxyTable: {
      '/api':{
        target:'http://localhost:8484',
        pathRewrite:{
          '^/api':'/static/mock'
        }
      }
    },

4、请求并打印数据

三、父子组件传数据

1、父组件定义、并赋值，在标签处传值

2、子组件接收值并使用

3、子组件传值个父组件

子组件中：触发一个方法，在方法里执行this.$emit(xx,xx)

父组件中：

监听某个值变化