首页 > 其他 > 详细

5521 vue编写全局组件

时间:2020-09-29 23:26:47      阅读:4      评论:0      收藏:0      [点我收藏+]

标签:win   product   for   ins   class   efault   

index.js

// 这是导入组件的模块
// import Button from "./Button.vue";
// import Icon from "./Icon.vue";
// import ButtonGroup from "./ButtonGroup.vue";

const install = (Vue) => {
  //把所有的组件设成全局组件
  // Vue.component(Button.name,Button)
  // Vue.component(Icon.name,Icon)
  // Vue.component(ButtonGroup.name,ButtonGroup)

  // 优化写法:require.context()
  // 参数:路径,是否遍历,正则
  const requireComponent = require.context(".", true, /\.vue/);
  requireComponent.keys().forEach(fileName => {
    const config = requireComponent(fileName);
    // console.log(config);
    Vue.component(config.default.name, config.default);
  })
}
// script  vue是放在window下, 放在模块内
if (typeof window.vue !== "undefined") {
  install(vue);
}

export default {
  install
}

mian.js

import Vue from ‘vue‘
import App from ‘./App.vue‘
// import zfUi from "./packages/index"  
import zfUi from ‘z-z-ui‘;
import "z-z-ui/dist/zf-ui.css";

 // Vue.use默认会调用install方法
Vue.use(zfUi)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount(‘#app‘)

5521 vue编写全局组件

标签:win   product   for   ins   class   efault   

原文:https://www.cnblogs.com/jianjie/p/13751800.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号