了解一下vue中main.js

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import test from './test'
Vue.use(test);
Vue.prototype.test = test

const routes = [{
        path: '/',
        component: Home
    }, {
        path: '/semanticui',
        component: semanticui
    }

]

const router = new VueRouter({
    routes
})

new Vue({
    router,
    render: h => h(App)
}).$mount('#app-box')

Vue.use 实现原理

会自动阻止多次注册相同插件，届时只会注册一次该插件
Vue 是可访问的全局变量时会自动调用 Vue.use()

Vue.use = function (plugin) {
  if (plugin.installed) {
    return;
  }
  // additional parameters
  var args = toArray(arguments, 1);
  args.unshift(this);
  if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args);
  } else {
    plugin.apply(null, args);
  }
  plugin.installed = true;
  return this;
};

Vue.prototype

定义的是原型,可以是用this.test 进行访问

全局变量定义的方式

new Vue({
    ...
    data() {
        return {
            ...,
            a: 1
            ...
        };
    },
    ...
});

  // 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

//添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }

new Vue

https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

render: function (createElement) {
    return createElement(App);
}

原来的写法是这种,es6进行了简写
createElement函数创建dom元素或者用于实例化其他组件的构造方法

export default {
// ... 省略
render (createElement) {
canst menuitems = [ ”首页 ”，”搜索 ”，”分类 ”，”系统”] 
return createElement (’ ul ’,{class: { ’uk-nav’:true }}
menuitems.map(item => createElement(’li’, item)))

Render方法用