组件库的开发与使用

zhbb
362 阅读3分钟

前言

避免重复造轮子，ui库使用ant-design-vue,但是有时ui库组件不满足业务开发时，往往这时我们自己会写一些组件，跟业务相关的组件，所以在这样场景下，我们为什么不发布一个 UI 组件库给自己用呢，当前我们是基于ant-design-vue 组件，随着接触的业务功能复杂，多项目复用。为什么需要用npm 管理组件，繁琐，且不利于代码管理，及组件共享

开发过程 vue-cli3.0

发布代码 单元测试的测评 1.新增一个vue项目，开发自己的组件库 vue create . (.表示目录下创建工程) 项目目录

```bash
├── build # 构建相关
├── public # 静态资源
│ │── favicon.ico # favicon 图标
│ └── index.html # html 模板
├── examples # 组件demo
├── packages # 组件
│ │── button
│ ├── │── src/button.vue
│ ├── │── index.js
├── src # 源代码
├── tests # 测试
├── .eslintrc.js # eslint 配置项
├── ..eslintignore # eslint 忽视文件
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化 CI 配置
├── .npmignore # npm忽视文件
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json

如button组件新建button.vue

<template>
  <button class="y-button" :class="{ [`icon-${iconPosition}`]: true }" @click="$emit('click')">
    <g-icon class="icon" v-if="icon && !loading" :name="icon" />
    <g-icon class="loading icon" v-if="loading" name="loading"></g-icon>
    <div class="y-button-content">
      <slot />
    </div>
  </button>
</template>
<script>
/*
 * @Author: zhangbinzhbb
 * @Date: 2021-02-24 17:23:33
 * @Last Modified by: zhangbiaobin
 * @Last Modified time: 2021-02-24 17:23:33
 * 封装button
 */
import Icon from '../../icon';
export default {
  name: 'YButton',
  components: {
    'g-icon': Icon,
  },
  props: {
    icon: {},
    loading: {
      type: Boolean,
      default: false,
    },
    iconPosition: {
      type: String,
      default: 'left',
      validator(value) {
        return value === 'left' || value === 'right';
      },
    },
  },
};
</script>
<style lang="less" scoped>
@import '~/src/styles/components/button.less';
</style>

新建button/index.js

import GlButton from './src/button';

GlButton.install = function(Vue) {
  Vue.component(GlButton.name, GlButton);
};

export default GlButton;

packages 新建index.js 导出所有组件

import gButton from './button';
import gpagination from './pagination';
import gcommon from './common';
import gbuttonAction from './buttonAction';
import glinkTag from './linkTag';
import gspin from './spin';
// ...如果还有的话继续添加
const components = [
  gButton,
  gpagination,
  gcommon,
  gbuttonAction,
  glinkTag,
  gspin,
  // ...如果还有的话继续添加
];

// 定义install方法，接收Vue作为参数
const install = function(Vue) {
  // 判断是否安装，安装过就不继续往下执行
  if (install.installed) return;
  install.installed = true;
  // 遍历注册所有组件
  components.map(component => Vue.component(component.name, component));
  // 下面这个写法也可以
  // components.map(component => Vue.use(component))

  Vue.prototype.$YSpin = gspin; // 全局
};

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  // 所有组件，必须具有install，才能使用Vue.use()
  ...components,
};

package.json 百度搜索vue-cli lib cli.vuejs.org/zh/guide/bu… --target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建

package.json

"mian":'lib/w-component.umd.min.js'
"build": "vue-cli-service build --target lib --name w-component --dest lib packages/index.js",

最终打包成如下文件

dist/myLib.umd.min.js    13.28 kb                 8.42 kb
dist/myLib.umd.js        20.95 kb                 10.22 kb
dist/myLib.common.js     20.57 kb                 10.09 kb
dist/myLib.css           0.33 kb                  0.23 kb

构建一个库会输出：

  1. dist/myLib.common.js：一个给打包器用的 CommonJS 包 (不幸的是，webpack 目前还并没有支持 ES modules 输出格式的包)
  2. dist/myLib.umd.js：一个直接给浏览器或 AMD loader 使用的 UMD 包
  3. dist/myLib.umd.min.js：压缩后的 UMD 构建版本
  4. dist/myLib.css：提取出来的 CSS 文件 (可以通过在 vue.config.js 中设置 css: { extract: false } 强制内联)

上传代码到 npmjs.org

  1. 更新 package.json    1. 在 package.json 里将版本号改为 0.0.1，等我们做完了再改成 1.0.0    2. 创建 index.js，在 index.js 里将你想要导出的内容全部导出

  2. 去 www.npmjs.com/ 注册一个账户

  3. 确认一下邮箱（必须）

  4. 在 winhong-component 项目根目录运行 npm adduser

  5.    - 如果错误提示里面含有 registry.npm.taobao.org 则说明你的 npm 源目前为淘宝源，需要更换为 npm 官方源

  6. 运行 npm publish

如图npm 组件库winhong-component

将包发布npm私服上

首先，我们查看项目的默设置，通过npm config list命令

npm config list

image.png 注册表属性是指向NPM的官司位置registry.npmjs.org/，我们可以通过npm config set Registry命令来修改这个配置。

npm config set registry http://xxx/repository/npmhosted.org/

再次输入npm config list 验证是否设置代理成功 直接npm publish 代理推

npm publish --registry=http://xxxx/repository/npmhosted.org/

git remote add origin http://xxx/web-project/w-components.git

image.png

如何在vue项目使用

以往项目组件都维护在项目components文件夹里，这样好处就是，可以及时修改处理问题，但是在多项目中使用同一组件时，a项目组件更新修改了，但b项目没有及时处理，可能功能出现问题。项目迁移组件时也是比较繁琐，通过复制拷贝其他项目上使用的。容易文件丢失， image.png ##使用组件 

npm i --save winhong-component

##main.js 注册组件 wh-component

import winhongcomponent from "winhong-component";
import "winhong-component/lib/winhong-component.css";
Vue.use(winhongcomponent);

##更多组件api 请查看 xxx ##更新依赖包

### npm 依赖包

npm i winhong-component@latest --save

### yarn 依赖包

yarn add winhong-component@latest

可能会报错问题处理 ，
babel.config.js
```vue
presets: [["@vue/cli-plugin-babel/preset", { useBuiltIns: "entry" }]]

npm i --save vue vue-router vuex  版本不一致导致？
avatar
文章
阅读
粉丝