美文网首页
2019-03-16Vue重要文件-main.js

2019-03-16Vue重要文件-main.js

作者: 技术中的销售 | 来源:发表于2019-03-16 18:45 被阅读0次

    main.js

    main.js在目录src下、是项目的入口文件,主要作用是初始化vue实例并使用需要的插件。
    main.js中会实例化vue

    new Vue({
        el: '#app',
      store,
        router,
        template: '<App/>',
        components: {
            App
        }
    })
    

    el:

    提供一个在页面上己存在的DOM 元素作为Vue 实例的挂载目标。可以是css 选择器,也可以是一个HTMLELement 实例。以上代码中是把实例挂载到id为app的元素中(用#app表示)。

    router:

    省略写法,完全写法是router:router,因为属性名和属性值一样,所以省略为router,代表传入路由的实例对象,把配置的路由功能运用到整个项目中。

    components :

    包含Vue 实例可用组件的哈希表。

    template :

    一个字符串模板,作为Vue 实例的标识使用。模板将会替换挂载的元素,挂载元素的内容都将被忽略,除非模板的内容有分发插槽。

    一个较完整的main.js如下

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router/index'
    import store from './store/index'
    import ElementUI from 'element-ui'
    import VueClipboard from 'vue-clipboard2'
    import Utils from './utils/utils'
    import Filters from './utils/filters'
    import Validator from './utils/validator'
    import './assets/font-icon/iconfont.css';
    
    Vue.use(ElementUI)
    Vue.use(VueClipboard)
    Vue.use(Utils)
    Vue.use(Filters)
    Vue.use(Validator)
    Vue.config.productionTip = false
    VueClipboard.config.autoSetContainer = true
    
    new Vue({
        el: '#app',
      store,
        router,
        template: '<App/>',
        components: {
            App
        }
    })
    

    在这个文件中components 指向了 app.vue 通过(import App from './App'
    )。

    相关文章

      网友评论

          本文标题:2019-03-16Vue重要文件-main.js

          本文链接:https://www.haomeiwen.com/subject/govsmqtx.html