vue 添加全局组件_自定义vue全局组件(Loading为例)

首先创建一个项目

vue init webpack-simple define-demo //define-demo 项目名称

cd define-demo

npm install //安装本次所有需要的模块

npm run dev //自动打开网页，验证项目创建成功

定义组件文件夹

在项目src目录下新建文件夹components用于存放所有的自定义组件，接着在components下新建loading文件夹，用于存放Loading组件，之所以创建loading文件夹是因为，你的Loading组件可能还需要依赖一些其他的文件时可放在loading文件夹中。最后在loading文件夹下新建index.js 和 Loading.vue 两个文件。

loading：组件文件夹

index.js：组件人口加载文件

Loading.vue：组件模板

在main.js中引入并Vue.use()

webpack首先会加载main.js，所以我们在main.js里面引入

// 引入自定义组件。index.js是组件的默认入口

import Loading from './components/loading/'

Vue.use(Loading)

在Loading.vue里面定义自己的组件模板

这里简单定义一下

loading...loading...

在index.js文件里面添加install方法,定义Vue.use()并且export Loading

import LoadingComponent from './Loading.vue'

const Loading = {

install:function (Vue) {

Vue.component('Loading',LoadingComponent)

}

};

// 导出组件

export default Loading

在任意地方使用全局组件

比如在App.Vue里面使用组件，此时Loading组件已经在main.js定义加载了

welcome loading

刷新npm run dev打开的页面即可看到效果

vue 添加全局组件_自定义vue全局组件(Loading为例)相关推荐

Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
vue 添加全局组件_自定义vue2.0全局组件（下篇）
在上篇中,老K为大家介绍了一个初级自定义按钮组件的编写方法.虽然能用,但是还不算完美,可扩展性不够强大.在这一篇中,老K继续为大家完善这个按钮组件. 启动命令窗口, 进入在上篇中我们搭建的vue目录中 ...
Vue指令_常用vue指令_自定义全局指令_自定义局部指令---vue工作笔记0016
然后我们开始去看vue中的指令,以及自定义指令可以看到这里列出了他给的一些指令. 大部分我们不常用而且有些我们用过了,比如 v-bind 一般我们省略,然后剩下一个: 来使用就可以了.
动态添加组件_使用vue.js的动态组件模板
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上. 先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案.这篇 ...
vue 自定义键盘组件_使用Vue自定义数字键盘组件的方法
这篇文章主要介绍了关于使用Vue自定义数字键盘组件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 inp ...
vue 给标签添加data属性_在Vue中获取自定义属性方法:data-id的实例
获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = ...
vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
vue 筛选组件_记一个复杂组件（Filter）的从设计到开发
此文前端框架使用 rax,全篇代码暂未开源(待开源) 原文链接地址:Nealyang/PersonalBlog 前言貌似在面试中,你如果设计一个 react/vue 组件,貌似已经是司空见惯的问题了 ...
vue tree组件_使用Vue 3.0做JSX(TSX)风格的组件开发
前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...

vue 添加全局组件_自定义vue全局组件(Loading为例)

welcome loading

vue 添加全局组件_自定义vue全局组件(Loading为例)相关推荐

最新文章

热门文章