100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue 添加全局组件_自定义vue全局组件(Loading为例)

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

时间:2019-09-29 03:30:03

相关推荐

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) {

ponent('Loading',LoadingComponent)

}

};

// 导出组件

export default Loading

在任意地方使用全局组件

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

welcome loading

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。