因为我用的是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' //线的颜色
}
}
},
}
]
})
