1.实例化Vue。
2.放置项目中经常会用到的插件和CSS样式。例如： 网络请求插件:axios和vue-resource、图片懒加载插件：vue-lazyload
3.存储全局变量。例如（用于的基本信息）
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = true
new Vue({
render: h =>h(App),
}).$mount('#app')
App.vue是所有组件的汇总
所以在main.js中，首先要引入App.vue和vue
Vue.config.productionTip = false是控制是否启动生产消息
Vue.config.productionTip = false
1
即运行项目后F12是否显示以下部分
new Vue({
render: h =>h(App),
}).$mount('#app')
最后需要将组件挂载到标签上
$mount：手动挂载，将生产的标签挂在到标签上
最近在学习vue.js，当创建好一个webpack 项目后，vue实例是怎么显示到网页上的呢？
新建好后在你的 webpackProject 项目里面主要有以下的文件夹
build：在开发阶段不用管
config：配置目录
node_modules：存放项目开发的依赖模块
src：开发目录，先在这里学习
static：静态资源，图片、字体可以放在这里
还有一个index.html 文件，这是首页的入口
src文件夹下有 App.vue 和 main.js 两个文件，App.vue就是个组件
App.vue中可以写 <template>、js、<style>， 其中必须要有export default 来表示对外输出本模块
main.js是初始化vue实例并使用需要的插件
首先引入了Vue库和App.vue，创建了一个vue实例，template 和 components 写入相应的组件，并且选择要挂载的元素
最后在首页 index.html中写入
<body>
<div id="app"></div>
</body>
即可；
—— 在中记录我的学习情况 ，以后继续深入 ——
let echarts = require('echarts/lib/echarts')// 引入折现图
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
export default{
data(){
return {
chart:null
}
},
ready(){
this.chart = echarts.init(document.querySelector('.echarts'))
this.chart.setOption({
grid: {
show:false,
top:'15%',
left: '3%',
right: '7%',
bottom: '5%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap:false,
data:[]
},
yAxis: {
type:'value'
},
series: [
{
type:'line',
data:[]
}
]
})
this.$http.post(api,{params:...}).then((res)=>{
//setting your chart datas
})
