vue中使用Element-ui

Element-ui

1. 在vue项目中引入Element-ui

先安装loader模块

cnpm install style-loader -D
cnpm install css-loader -D
cnpm install file-loader -D

这里使用npm安装可能会出现错误，用cnpm安装

安装Element-ui模块

cnpm install element-ui --save

在build/webpack.base.conf.js内添加代码

 module: {
    rules: [
     ...  
     //下面是需要新增的代码
      {
        test: /\\\\\\\\.css$/,
        loader: "style!css"
      },
      {
      test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
      loader: "file"
      } 
    ]
  },

在src/main.js中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

经过上面步骤就可以在任意组件中使用了，你可以添加以下代码进行验证

<el-button type="primary">主要按钮</el-button>
<el-button type="text"> 文字按钮</el-button>

ECharts

1. Vue中使用Echart

参考：www.jianshu.com/p/cf0a54374…

安装

npm install echarts --save

使用

(1) 在main.js中全局引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

例子

<template>
    <div id="myChart" :style="{width: '300px', height: '300px'}">
    </div>
</template>

<script>

  export default {
    data() {
      return {}
    },
    mounted() {
      this.drawnline();
    },
    methods: {
      drawnline() {
         // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
      }
    }
  }
</script>

(2) 在使用的文件中按需引入

//main.js中不用操作
<script>
  var echarts = require('echarts/lib/echarts')
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

  export default {
    data() {
      return {}
    },
    mounted() {
      this.drawnline();
    },
    methods: {
      drawnline() {
         // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            ... //与上面配置相同
        });
      }
    }
  }
</script>