vue中main.js的作用

JavaScript023

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-cli

自从node的兴起，前端项目中就开始出现各种预处理工具，当我们开始一个新项目时，我们都会先编写一些预处理文件，和构建项目目录。

而vue-cli就是为了做这方面工作的，生成一套提前定义好的构建文件，和相应的文件。

vue-cli有5个对应的项目结构。我们使用的是vue-webpack-boilerplate。

$ npm install -g vue-cli

$ vue init webpack my-project

$ cd my-project

$ npm install

$ npm run dev

执行上面命令后，我们将生成下面的文件结构，并开一个服务，你可以打开http://localhost:8080看看。

具体的使用建议看文档。

项目结构

如果你之前就了解vue和vue-router，可以先看这部分。如果你了解vue不了解vue-router,可以先看这篇文章vue-router。如果你连vue都不是很理解我建议，抽5个小时左右把文档教程过一遍。

你可以看到项目根目录下面有一个html，仅有的一个html。

上图的结构是我自己琢磨的，主要是结合vue-router、vuex两使用方法来考虑的。另外对于组件的复用，将一些功能组件和全局组件都放在根部，通过vuex来控制组件属性实现一些功能。

下面我就结构由上至下的介绍。

main.js

main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。

import Vue from 'vue'

import App from './App'

import VueRouter from 'vue-router'

import VueResource from 'vue-resource'

import filter from './filter'

import store from './vuex/store'

import { sync } from 'vuex-router-sync'

import { configRouter } from './config_router'

import resourceGlobalSet from './resource_set'

 

Vue.use(VueResource)

Vue.use(VueRouter)

// 初始化自定义过滤器

Vue.use(filter)

 

const router = new VueRouter({

history: true,

saveScrollPosition: true

})

configRouter(router)

Vue.http.options.emulateJSON = true

Vue.http.interceptors.push(resourceGlobalSet) // ajax 拦截

 

sync(store, router)

router.start(App, 'app')

就如同上面所示，主要是使用和配置相应插件，并初始化一个vue，上面的初始化在router.start(App, 'app')，是以App.vue为组要组件，并以html中的为挂载替换点。

APP.vue

App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。

下面是App.vue的template

<template>

    <div id="app">

        <cn-header></cn-header>

        <sidebar></sidebar>

        <router-view></router-view>

        <tip></tip>

        <loading></loading>

    </div>

</template>

你可以看到route-view和其它全局功能组件，全局组件在一个层级。

另外由于APP.vue在所有页面都有，我们将会在APP.vue上面写一些初始化全局方法。

router

router 是具体的业务组件，比如index,login,content等组件都是具体业务相关的。下面就是再和业务相关的组件。

全局组件

全局组件是页面共用的部分，比如header，footer，navbar，你可能在想如果我有一些header是独特的怎么办，这种情况下可以通过路由做判断，渲染不同的html，如果判断条件不是路由，也可以在vuex写一个store记录组件的state。

功能组件

功能组件是比如dialog,tip等组件，使用来与用户交互的。

通常情况下，功能组件是各个组件都需要的一些组件。在一个页面里如果有两个组件，两个组件都同时引了一个tip组件作为子组件是纯在的。为了避免这种情况，我们将功能组件提到App.vue然后通过vuex进行组件交互，从而就讲一个功能组件变成了全局方法。

自定义插件

vue还能自己写插件。对于一些公用的方法和逻辑，我们可以提出来写在插件里面。

最近在学习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>

即可；

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