index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单页面应用</title>
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="app">
<headers></headers>
<hr/>
<echarts></echarts>
</div>
<script>
// 使用httpVueLoader
Vue.use(httpVueLoader);
new Vue({
el: '#app',
data: {
},
components:{
"headers":"url:./components/headers.vue",
"echarts":"url:./components/echarts.vue"
},
methods: {
},
mounted() {
}
})
</script>
<style>
html,body,#app{
100%;
height: 100%;
background-color:#f5f5f5;
}
</style>
</body>
</html>
headers.vue
<template>
<div>
<i-button>Default</i-button>
<i-button type="primary">Primary</i-button>
<i-button type="dashed">Dashed</i-button>
<i-button type="text">Text</i-button>
<br><br>
<i-button type="info">信息按钮</i-button>
<i-button type="success">成功按钮</i-button>
<i-button type="warning">警告按钮</i-button>
<i-button type="error">错误按钮</i-button>
<i-button>Click me!</i-button>
</div>
</template>
<script>
module.exports = {
}
</script>
<style>
</style>
echarts.vue
<template>
<div>
<div style="500px;height:500px" ref="chart"></div>
</div>
</template>
<script>
const echarts = require('echarts');
module.exports = {
data () {
return {};
},
methods: {
initCharts () {
let myChart = echarts.init(this.$refs.chart);
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
},
mounted () {
this.initCharts();
}
}
</script>
echarts.js
echarts官网下个echarts.js即可