使用vue.use创建公共组件

最新推荐文章于 2024-05-03 11:08:18 发布

VIP文章 Ultraman and Monster

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量1.7k

点赞数

分类专栏：前端Vue的学习文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_46159864/article/details/105691570

版权

使用vue-cli创建公共组件

在前端奋战了这么长时间,用惯了vant,elementUI等第三方的插件。今日突然心血来潮,就手动教大家封装一个公共组的组件，使你们也能够成为在npm上有库的人。本次组件以button按钮为例

1.初入山门

在开始前前，需要对Vue的全局组件和局部组件进行一些了解

全局组件和局部组件

局部组件

绝大多数vue项目就只有一个实例(new Vue()只运行一次)，即:一个项目就只有一个vue实例
我们前面写组件一般都是直接写在vue实例中的，也就是局部组件
这个组件不能在另一个项目中使用（复制粘贴代码不算哈）。

典型使用格式：在vue实例中

import XXX from "./xxx/index.vue"
{
	data(){}
	components:{
		// 你的组件
		XXX
	}
}

全局组件

组件在所有的vue实例中的都可以使用。
与具体的vue项目无关，最典型的体现是是ui框架(element-ui, ant-design, i-view, vant)
它采用Vue.component来创建。

用Vue.component创建全局组件

Vue.component

Vue.component(id,definition)
参数：

{string} id

{Function | Object} [definition]
用法：

注册或获取全局组件。注册还会自动使用给定的id设置组件的名称
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
参考：组件

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建并使用button组件</title>
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
  <div id="app">
    <my-button></my-button>
    <hr>
    <com1></com1>
  </div>
  <script>
    Vue.component("MyButton",{
    
      template:"<div><button>全局组件：按钮</button></div>"
    })

    new Vue({
    
      el:"#app",
      components:{
    
        "com1":{
    
          template:"<div><button>局部组件：按钮</button></div>"
        }
      }
    })
  </script>
</body>
</html>

以上代码中：

MyButton是全局注册的组件
com1是局部组件

https://cn.vuejs.org/v2/guide/components-registration.html#%E7%BB%84%E4%BB%B6%E5%90%8D%E5%A4%A7%E5%B0%8F%E5%86%99

上面我们就实现了创建并使用全局组件了，这是一种比较原始的方式，在vue中，它给我们提供另一种比较优雅的方式:Vue.use

使用Vue.use()加载插件

Vue.use()是Vue对象上的全局方法，它用来把第三方插件挂载在vue上。注意这里的Vue是大写的V。

关于Vue.use的介绍建议参考https://www.jb51.net/article/146461.htm

格式

Vue.use(plugin)

功能：

安装 Vue.js 插件。

参数：plugin。它表示要安装的插件

可以是一个对象

也可以是一个函数

用法：

如果plugin是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

参考：插件

参考elementUI、vant组件

Vue-Router

import VueRouter from "vue-router"
import Vue from "vue"
import Index from "../pages/index.vue"
import Headline from "../pages/headline.vue"
import Tab from "../pages/tab.vue"
import Dialog from "../pages/dialog.vue"
Vue.use(VueRouter)
export default new VueRouter({
    
 routes: [
     {
     name: 'home', path: '/', component: Index },
     {
     name: 'headline', path: '/headline', component: Headline },
     {
     name: 'tab', path: '/tab', component: Tab },
     {
     name: 'dialog', path: '/dialog', component: Dialog }
 ]
});

element-ui的使用 https://element.eleme.cn/#/zh-CN/component/quickstart#yin-ru-element

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
el: '#app',
render: h => h(App)
});

vant组件的库的使用

https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-san.-dao-ru-suo-you-zu-jian
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

用Vue.use()来改造代码

<div id="app">
    <my-button></my-button>
    <hr>
</div>
<script>
    var obj = {
    
        install (abc) {
    
            abc.component("MyButton",{
    
                template:"<div><button>全局组件：按钮</button></div>"
            })
        }
    }
    
    // 在Vue.use(obj)中，它做了两件事：
    // 1. 执行obj.install()
    // 2. 传入Vue。具体在上面的代码中，就是把Vue传给abc.
    Vue.use(obj)

    new Vue({
    
        el:"#app"
    })
</script>

添加一个组件

<div id="app">
    <my-button></my-button>
    <my-headline></my-headline>
    <hr>
  </div>
  <script>
    var MyButton = {
   
        name:"MyButton",
        template:"<div><button>全局组件：按钮</button></div>"
    }
    var MyHeadline = {
   
        name:"MyHeadline",
        template:"<div>全局组件:标题</div>"
    }
    var obj = {
   
      install (vue) {
   
        vue.component(MyButton.name,MyButton)
        vue.component(MyHeadline.name,MyHeadline)
      }
    }
    Vue.use(obj)

    new Vue({
   
      el:"#app"
    })
  </script>

小结

vue开发公共组件需要用到Vue.use()和Vue.component()两个api。

2.创建项目

目标：

通过vuecli创建项目，这个项目创建的目的有三个：

维护组件库（不是某个具体的业务项目哦，而是造轮子）
本地测试组件库
后期整体打包上传到npm

使用脚手架工具创建项目

命令：

vue create XXXXX

要点：

只需要选中Babel + Router

Vue CLI v3.11.0
┌───────────────────────────┐
│  Update available: 4.2.3  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
> normal (vue-router, vuex, less, babel, eslint)
  default (babel, eslint)
  Manually select features

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 
 
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
> In dedicated config files

调整目录结构

我们这个项目不是用来去生成某个具体的业务功能的，而是用来写自己公共UI组件，为了方便对项目的理解，我们对目录结构进行一些调整。

调整明细

添加一个名为packages的文件夹，用来保存所有的公共组件
把原来的src改成examples，这里的代码用来对组件进行测试。

|-packages(额外添加的)    所有的组件放在这里。
|-examples(把src改成这个） examples下的内容是来测试packages下的组件的使用

设置vue.config.js

由于这里改了src这个系统默认的目录名字，为了项目能跑起来，还需要做一些设置。具体来说，在根目录下创建vue.config.js，内容如下：

const path = require('path')
module.exports = {
  // 将 examples 目录添加为新的页面
  pages: {
    index: {
      // page 的入口
      entry: 'examples/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve('./examples')
      }
    }
  }
}

创建第一个组件

在packages目录下建立button/button.vue。先随意添加一些内容，等我们后面再来调整。
在这里插入图片描述

目前，它的内容如下。

<template>
  <div>
    <button>我是一个按钮</button>
  </div>
</template>

<script>
export default {
  name: 'MyButton',
  data () {
    return {}
  }
}
</script>

请务必确保组件都有name属性。

创建入口文件

在packages目录下，创建index.js文件。用它来收集所有定义在packages目录下的组件，并按vue插件的格式做导出。

import Button from './button/button.vue'

export default {
   
  install (Vue) {
   
    Vue

最低0.47元/天解锁文章

Ultraman and Monster

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用vue.use创建公共组件

使用vue-cli创建公共组件在前端奋战了这么长时间,用惯了vant,elementUI等第三方的插件。今日突然心血来潮,就手动教大家封装一个公共组的组件，使你们也能够成为在npm上有库的人。本次组件以button按钮为例1.初入山门在开始前前，需要对Vue的全局组件和局部组件进行一些了解全局组件和局部组件局部组件绝大多数vue项目就只有一个实例(new Vue()只运行一次)，即...
复制链接

扫一扫