vue-cli 依赖安装

因为我用的是vue+ele，而且在项目开发过程中，我们也需要引入一些插件，比如echart、sass，这里就写一下如何引入并使用它们吧。

1、安装element-ui

完整引入

npm i element-ui -S

在 main.js中

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

我自己在使用过程中都是完整引入的，至于按需引入，有兴趣的可以去：
http://element-cn.eleme.io/2.1/#/zh-CN/component/i18n

2、安装scss

1、命令行

npm install node-sass sass-loader -d

2、配置

在build中的webpack.base.conf.js中

module: {
   rules: [
       {  //手动添加这一条，相当于是编译识别sass!
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
  ]
}

3、使用

<style  lang="scss">
</style>

在一个项目中，既然使用了sass就没必要再安装less了，同理所得，亦是如此。我在这里写下来，也是为了给大家介绍而已，大家各取所需就行。

3、安装less

1、命令行

npm install less less-loader --save

2、配置

在build中的webpack.base.conf.js中

module: {
   rules: [
       {  //手动添加这一条，相当于是编译识别less!
        test: /\.less/,
        loader: ["style-loader!css-loader!less-loader"]
      }
  ]
}

3、使用

<style  lang="less">
</style>

4、安装echarts

1、安装

npm install echarts -S

2、配置

在main.js中

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

3、使用

let months = this.$echarts.init(document.getElementById('month'));
months.setOption({
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top:'3%',
            containLabel: true
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'line' ,// 默认为直线，可选为：'line' | 'shadow'
            },
          },
          xAxis: {
            axisLabel: {
              textStyle: {
                fontSize:"12px",
                color: '#fff'
              }
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            type: 'category',
            data: month
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              //          修改坐标轴字体颜色
              textStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
          },
          series: [
            {
              name:"进数量",
              data: monthIn,
              type: 'line',
              itemStyle : {
                normal : {
                  color:'#1ee279',  //圈圈的颜色
                  lineStyle:{
                    color:'#1ee279'  //线的颜色
                  }
                }
              },
            },
            {
              name:"出数量",
              data:monthOut,
              type: 'line',
              itemStyle : {
                normal : {
                  color:'#ffde00',  //圈圈的颜色
                  lineStyle:{
                    color:'#ffde00'  //线的颜色
                  }
                }
              },
            }
          ]
        })