vue中main.js的作用

JavaScript014

vue中main.js的作用,第1张

main.js是项目的入口文件,项目中所有的页面都会加载main.js,所以main.js,主要有三个作用:

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>

即可;

——  在中记录我的学习情况 ,以后继续深入   ——

如果你是用vue.js官网提供的脚手架工具并沿用默认配置的话,

你执行npm run dev的时候会出来页面,

是因为你根目录下的package.json文件里script配置了

也就是其实执行的是dev-server.js这个文件,里面有定义

因为我们这个脚手架工具里是用webpack来打包项目文件的,依赖的webpack.dev.conf文件里又定义了

在这个依赖webpack.base.conf文件里面entry入口文件就配置了

所以当你运行npm run dev的时候就从main.js这个入口文件开始执行了