小白笔记——vue全局组件注册和全局js引入

简介: 小白笔记——vue全局组件注册和全局js引入

有一些常用的组件或者js库,可能大部分页面都要使用,频繁的import未免显得啰嗦,这时可以考虑通过全局引入的方式实现


先看比较简单的js库全局引入

js库全局引入

js库的引入很简单,通过Vue.prototype即可

main.js 全局js引入核心代码

main.js 全局js引入核心代码
import Vue from  'vue'
import api from  './utils/config/api'  //要引入的js文件
Vue.prototype.$api=api
.... //其他代码

.vue组件中使用:通过this.$api即可

this .$api.member_index

全局组件注册

可以分为这两种,引用单个组件、引用某个文件夹下全部组件

单个组件全局注册

import TableBox from  './components/mod/TableBox
  Vue.component(' TableBox',TableBox)    //第一个为全局注册的组件名称,第二个为全局注册的组件模版

多个组件全局注册

import Vue from  'vue'    
import upperFirst from  'lodash/upperFirst'    
import camelCase from  'lodash/camelCase'    
const requireComponent = require.context(    
'./components/mod/' ,     // 组件所在目录  
false ,                   // 是否不引用子目录组件
   /_base-[\w-]+\.vue$/     //通过正则表达式指明引入的文件名类型,比如以 _base- 开头的vue组件
)    
// For each matching file name...    
requireComponent.keys().forEach(fileName => {    
// Get the component config    
const componentConfig = requireComponent(fileName)    
// Get the PascalCase version of the component name    
const componentName = upperFirst(    
camelCase(    
fileName    
// Remove the "./_" from the beginning    
.replace(/^\.\/_/,  '' )    
// Remove the file extension from the end    
.replace(/\.\w+$/,  '' )    
)    
)    
// Globally register the component    
Vue.component(componentName, componentConfig. default  || componentConfig)    
})

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

注意:太多的全局组件注册,会导致进入首页的文件量变大,所以尽量考虑将哪些最常用的且文件较小的组件进行全局引入,其他组件还是在需要的页面再引入

相关文章
|
5天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
40 6
|
5天前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
5天前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
92 0
|
6天前
|
JavaScript 前端开发 UED
Vue 组件设计:构建生动多彩的树形结构组件
本文介绍了如何使用 Vue 构建一个功能强大的树形结构组件。该组件支持递归渲染节点及其子节点,提供了自定义节点颜色、文本和布局的功能。通过独特的样式处理不同层级的节点,展示出丰富的视觉效果。组件还支持动态布局和缩放,确保灵活的界面展示和用户体验。文章提供了详细的代码实现,包括 HTML、JavaScript 和 SCSS,帮助开发者快速集成和定制自己的树形结构组件。
27 0
Vue 组件设计:构建生动多彩的树形结构组件
|
5天前
|
人工智能 JavaScript 程序员
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
15 0
|
5天前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
9 0
|
5天前
|
JavaScript
Vue组件点击事件不触发的问题,添加事件修饰符native解决
Vue组件点击事件不触发的问题,添加事件修饰符native解决
59 0
|
5天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
38 0
|
5天前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
14 0
|
6天前
|
JavaScript
在 Vue 3 中使用 DHTMLX 甘特图组件
本文将介绍如何在 Vue 3 项目中集成 DHTMLX 甘特图组件,详细讲解安装、模块导入以及基本用法。通过示例代码,您将学会如何配置甘特图的任务、样式和交互功能,帮助您在项目中更有效地管理和展示任务时间线。
11 0