项目笔记

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>