import Loading from './Loading.vue' //这个组件就不写了，大家各自发挥吧……
const Loading = {
Install: function (Vue) {
Vue.component(“Loading”, Loading)
}
}
export default Loading;
import App from './App.vue' //引入element-ui组件
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import Loading from '../components/loading' //引入自定义组件，注意引用组件的路径
Vue.use(Loading);
Vue.use(ElementUi);
new Vue({
el: '#app',
render: h => h(App)
})
const requireComponent = require.context( '@/components/', true, /\.(vue)$/);
1、'@/components/' //其组件目录的相对路径
2、true //是否查询其子目录
3、/\.(vue)$/ //匹配基础组件文件名的正则表达式
requireComponent.keys().forEach(item=> {
const componentConfig = requireComponent(item); //获取组件配置
const componentName = item.replace(/^\.\//, '').replace(/\/\index.vue$/, ''); //获取组件的命名---可以根据自己项目的实际情况进行修改
//全局注册组件
Vue.component(componentName, componentConfig.default || componentConfig);
//如果这个组件选项是通过`export default`导出的，那么就会优先使用`.default`，否则
});
<package-name><package-name/> //如何使用：无需引入，直接在页面中使用
1、Vue.component() //注册或获取全局组件，注册还会自动使用给定的id，设置组件的名称
// 1.创建组件构造器
var localComponent= Vue.extend({
template: '<li>{{firstName}} {{lastName}}</li>'
data: function() {
firstName: “xiaohua”,
lastName: “zhang”
}
})
new Vue({
el: '#root',
components: {
'my-component': localComponent
}
})
