npm install webpack -g
npm install vue-cli -g
====================
vue init webpack-simple XXX
npm install
npm install vue-resource --save
npm install bootstrap@3.3.7 --save
npm install echarts --save
npm install jquery@1.11.0 --save
npm install style-loader --save-dev
npm install file-loader --save-dev
在webpack.config.js
{
test: /.css$/,
loader: 'style-loader!css-loader'
},
{
test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/,
loader: 'file-loader'
},
npm run dev
====================
main.js：
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//引入下载的js地图
import './assets/data/china.js' 【main中全局引入】
var china = require('../assets/data/china.js'); 【组件中局部引入】
template：
<div id="myChart" :style="{ '300px', height: '300px'}"></div>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的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>
====================
//引入jQ
import './assets/data/jquery.min.js'
//使用require：
<script>
var $ = require('jquery');
export default{
data(){
return{
}
},
methods:{
show:function(){
$('.a11').css('background','#666');
alert('组件一')
}
}
}
</script>