如何使用vue写一个组件库

如何使用vue写一个组件库

新建vue项目

使用vue-cli初始化一个项目:

vue init webpack VueComponent
cd VueComponent
npm install
npm run dev

以上就新建好了一个vue项目

项目目录

首先,定义好目录,经过观察大多数的组件库,基本是这样的目录:

|-- examples      // 用于demo展示
|-- packages      //  用于编写存放组件

因为修改了目录名称,就需要修改下webpack的配置文件,修改编辑目录
build/webpack.bash.config.js

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('examples'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('packages')]
}

将编译目录指向examples和packages。

写一个组件

在packages下面创建一个Button组件,目录如下(目录构建都是参照ele-ui)

|-- examples    
|-- packages 
|      |--Button
|           |--src
|           |   |--main.vue  // 编写组件内容
|           |-- index.js // 导出组件

main.vue内容:

<template>
  <div class="M_button">
    button按钮组件
  </div>
</template>
<script>
  export default{
    name: 'MButton', // 定义这个组件的名称
  }
</script>

index.js内容:

import Button from './src/main.vue';
// 在每个组件下面定义一个install方法。
Button.install = function (Vue) {
  Vue.component(Button.name, Button);
};
export default Button;

到此,就完成了一个组件的简单编写

导出组件

组件写好之后,需要让组件支持全局引入和按需引,在packages下面新建一个index.js文件,用于将组件导出
代码:

import Button from './button/index.js'; // 引入组件
const components = [
  Button
];
//'vue-use是调用的install方法'
const install = function(Vue) {
  if (install.installed) return;
  components.map(component => Vue.component(component.name, component));
};

if (typeof window !== 'undefined' && window.Vue) {
    console.log('传入参数install方法')
  install(window.Vue);
}

export default {
  install, // 如果在外面使用vue.use的话,就会默认使用install方法
  Button
};

这里为什么要定义一个install方法呢?看下vue源码

import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
  ⚠️ if (typeof plugin.install === 'function') { 
  ⚠️   plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

由此可见,vue.use是调用传入的组件的instll方法。这也就解释了,为什么每个组件都定义了一个install方法。

使用组件

在examples的main.js里面引入组件:

import MVUI from '../packages/index'
Vue.use(MVUI)

到此,一个非常简单的组件就写好了。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,要使用 Vue 一套组件,需要遵循以下步骤: 1. 设计组件:根据项目需求,设计所需的组件样式和功能。 2. 编组件代码:使用 Vue 组件的基本结构,编组件的 HTML、CSS 和 JavaScript 代码。 3. 封装组件:将组件的 HTML、CSS 和 JavaScript 代码封装成一个独立的 Vue 组件。 4. 发布组件:将所有组件打包成一个组件,发布到 npm 或其他仓中,供其他开发者使用。 以下是一个简单的步骤示例: 1. 设计组件:假设我们需要设计一个按钮组件,需要考虑按钮的样式、尺寸、颜色等。 2. 编组件代码:使用 Vue 组件的基本结构,编组件的 HTML、CSS 和 JavaScript 代码。代码示例: ```html <template> <button :class="classes" @click="$emit('click')"><slot></slot></button> </template> <script> export default { props: { size: { type: String, default: 'normal' }, type: { type: String, default: 'default' } }, computed: { classes () { return [ 'btn', `btn-${this.type}`, `btn-${this.size}` ] } } } </script> <style scoped> .btn { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; } .btn-default { background-color: #fff; color: #333; } .btn-primary { background-color: #007bff; color: #fff; } .btn-success { background-color: #28a745; color: #fff; } .btn-warning { background-color: #ffc107; color: #333; } .btn-danger { background-color: #dc3545; color: #fff; } .btn-normal { font-size: 16px; } .btn-small { font-size: 14px; } .btn-large { font-size: 18px; } </style> ``` 3. 封装组件:将组件的 HTML、CSS 和 JavaScript 代码封装成一个独立的 Vue 组件。代码示例: ```javascript import Button from './Button.vue' const components = [ Button ] const install = function (Vue) { components.forEach(component => { Vue.component(component.name, component) }) } export default { install, Button } ``` 4. 发布组件:将所有组件打包成一个组件,发布到 npm 或其他仓中,供其他开发者使用。 以上是一个简单的步骤示例,具体实现还需要根据实际需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值