美文网首页
vueCli3配置全局组件

vueCli3配置全局组件

作者: 觉上云来 | 来源:发表于2020-04-08 09:40 被阅读0次

main.js内容如下

1.安装camelcase》》npm install camelcase 

2.main.js中添加

const files = require.context('./components', false, /\.vue$/);  //匹配该目录下的所有vue文件

import camelcase from 'camelcase';  //驼峰命名的一个npm包

const moduleStores = {};

files.keys().forEach(key =>{

const fileName = key.slice(2, -3);  //截取vue的文件名

  const fileNameInCamelCase =camelcase(fileName);  //将截取的文件名为驼峰命名

  const fileModule = files(key).default;  //引入模块

  moduleStores[fileNameInCamelCase] = {

...fileModule,    //此处可用...表示模块,ES6语法支持...

    namespaced:true,

  }

});

var components_name = [];  //将获取命名存在里面

for(let kin  moduleStores){

components_name.push(k)

}

for(let j=0;j

//将模块都注册为全局组件,方便在所有组件中易使用

  Vue.component(components_name[j],moduleStores[components_name[j]]);

}

相关文章

  • vueCli3配置全局组件

    main.js内容如下 1.安装camelcase》》npm install camelcase 2.main.j...

  • Vue笔记

    一、全局组件和局部组件 1、全局组件 2、局部组件 二、配置组件 数据变量采用方法以便每次返回变化. 三、父子通信...

  • iView配置

    全局配置 使用 iView 3 时,可以进行全局配置组件的一些属性。 目前只支持配置 transfer 和 siz...

  • 微信小程序的基础文件配置

    微信小程序的基础文件配置分为两类:全局配置和组件内部配置 全局配置: app.json文件的配置 详解.json配...

  • ET全局配置文件

    ET全局配置文件 步骤 在Init脚本中添加全局配置文件组件Game.Scene.AddComponent

  • 2018-07-02 Vue源码解析阅读笔记

    合并配置 在new Vue()初始化时,会通过mergeOptions()的方法,把全局变量、全局方法、全局组件等...

  • Vue3_15(全局组件,局部组件,递归组件)

    配置全局组件 例如组件使用频率非常高(table,Input,button,等)这些组件 几乎每个页面都在使用便可...

  • vue-router

    # 路由配置 ## 路由组件 > 路由组件就是一个普通组件,只不过不需要使用全局或者局部注册。在路由配置中绑定对应...

  • Vue

    1.组件全局组件注册、局部组件注册、父子双向传递值、动态组件、slot内容分发、data、$refs(1)配置子组...

  • vue学习(68)vue3中的其他改变

    全局API的转移 Vue 2.x 有许多全局 API 和配置例如:注册全局组件、注册全局指令等。 Vue3.0中对...

网友评论

      本文标题:vueCli3配置全局组件

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