专栏首页工作笔记精华Vue Cli 3 搭建一个可按需引入组件的组件库架子

Vue Cli 3 搭建一个可按需引入组件的组件库架子

Ant-design、Element 这些框架都有按需引入组件的功能。需要使用哪个组件,就引入哪个组件,这样那些没必要的组件就不会打包到我们的项目里了。跟着我下边的步骤,相信大家也能搭建出一个按需引入的组件库。

创建一个 Vue 项目

vue create ui-demo

使用默认配置安装就 OK ?

安装 babel-plugin-component

npm i babel-plugin-component -D

babel-plugin-component 就是 Element UI 用来实现组件按需加载的一个 babel 插件。我们把它用到我们的组件库上,就不需要重新造一个轮子出来了。?

配置 .babelrc

在项目的根目录下创建一个 .babelrc 的文件,配置可以参照下面的代码进行更改。

{
  "plugins": [
    [
      "component",
      {
        // 组件库的名字,需要和 package.json 里的 name 相同
        "libraryName": "ui-demo",
        // 存放组件的文件夹,如果不想配置此项,默认文件夹的名字为 lib
        "libDir": "components",
      }
    ]
  ]
}

创建一个存放组件的文件夹

既然我们刚刚已经配置了存放组件的文件夹,下一步肯定就是创建这么一个文件夹了。由于我配置了的文件夹名为 components,所以我们的文件夹名字就是 components

上面的操作完成后,我们的项目目录就基本搭建好了,如下:

image

写组件

终于到了写组件的时候了,在 components 文件夹下新建一个 Component1 的文件夹来存放我们的第一个组件。

Component1 文件夹里有一个 Component1.vue 的文件和一个 index.js 文件。目录如下:

image

Component1 -> Component1.vue 代码:

<template>
  <h1 class="component1">component1</h1>
</template>

<script>
export default {
  name: 'Component1'
}
</script>

<style>
.component1 {
  color: green;
}
</style>

Component1 -> index.js代码:

import Component1 from './Component1.vue';

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

export default Component1;

index.js 中的主要功能就是以插件的形式注册一个全局组件,不懂的小伙伴可以照猫画虎,微调一下就好了。想了解的可以去这个链接看一下:

第二个组件代码就不发出来了,复制一份,给个 css 样式就好了。

components 文件夹根目录下创建一个 index.js 用来整合所有组件。

components -> index.js 代码:

import Compontent1 from './Component1/index'
import Compontent2 from './Component2/index'

const components = [
  Compontent1,
  Compontent2,
]

function install (Vue) {
  components.map = (component => {
    Vue.component(component.name, component)
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  Compontent1,
  Compontent2,
}

稍微提醒,需要把 install 也一起导出,观察不细心的可能会不注意就写漏了。?

修改或添加 package.json 中的配置

script 中添加一条命令:

"lib": "vue-cli-service build --target lib --name index --dest package components/index.js"

最后面的 components/index.js 是我们存放组件文件夹根目录的 index.js 文件,记得根据你的情况修改。这个命令执行后,会打包生成一个 package 的文件夹。

添加 files 白名单,打包上传哪些文件到 npm 上:

"files": [
    "components",
    "package"
]

components 是我们存放组件的文件夹,packagelib 命令打包后生成的文件夹,我们只要把这两个文件夹发布就 OK 了。

添加 style,设置样式路径:

"style": "package/index.css"

路径就是我们打包出来的 package 中的 index.css 文件。

添加 main,设置入口:

"main": "components/index.js"

路径是存放组件的 components 文件夹下的 index.js 文件。

private 设置为 false

"private": false

设置此项目不是私有项目之后,才能发布好 npm 上。

下面的是完整的 package.json 文件配置:

{
  "name": "ui-demo",
  "version": "0.1.0",
  "private": false,
  "main": "components/index.js",
  "style": "package/index.css",
  "files": [
    "components",
    "package"
  ],
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name index --dest package components/index.js"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

打包我们的代码

在控制台执行 npm run lib 进行文件打包,打包完成后会多一个 package 文件夹。文件目录就变成如下的了:

image

发布 npm

# 这是登录,前提是你已经在 npm 注册了账号
npm login
# 发布到 npm
npm publish

由于名字已经被占用,演示就用我最近在写的那个项目进行演示了。

安装库

npm i vue95-ui

main.js 文件中引入这个库。

import Vue from 'vue'
import App from './App.vue'
// 全局注册
// import vue95 from 'vue95-ui'
// Vue.use(vue95);

// 按需引入
import { Button95, Bar95 } from 'vue95-ui'

Vue.use(Button95);
Vue.use(Bar95);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

这样我们就可以使用我们自己的 UI 库了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SQLAlchemy session 使用问题

    在更改 SQLAlchemy Session 从每次请求都创建到共享同一个 Session 之后遇到了如下问题:

    stys35
  • JAVA生成短8位UUID 转

    (adsbygoogle = window.adsbygoogle || []).push({});

    stys35
  • Flink 类型和序列化机制简介 转

    Flink 的类型系统源码位于 org.apache.flink.api.common.typeinfo 包,让我们对图 1 深入追踪,看一下类的继承关系图:

    stys35
  • vue ---webpack 打包上线

      1、打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404。   2、打包好的静态资源均...

    小蔚
  • 什么是MYSQL的开发思路,一个实例切入

    昨天运维的亲,来找我,要统计一个事情,具体的情况是这样,要判断某台机器中的的 priority 为 1 的数据在 900秒内,并且计数,如果这样的情况超过1 条...

    AustinDatabases
  • 微软与瑞银达成协议,将银行数据上云

    银行数字化是必然的趋势,但是考虑到数据安全,目前大多数银行数据都选择采用本地服务器,但是随着服务内容和数据的增多,本地的维护成本太高等问题的出现,银行是否上云成...

    镁客网
  • OpenGL中投影变换矩阵的反向推导

    wxdut.com
  • flink 到底有什么优势值得大家这么热衷

    flink 通过实现了 Google Dataflow 流式计算模型实现了高吞吐、低延迟、高性能兼具实时流式计算框架。

    kk大数据
  • nginx交叉编译移植遇到的坑

    nginx自身对交叉编译支持不是很好,所以在移植过程中会遇到很多问题,总结了我遇到的两个问题,分享给大家。

    随心助手
  • 服务器部署nginx报错 nginx: [warn] conflicting server name "localhost" on xxx.xxx.xxx.xxx:80, ignored

    提示successfull后就可以使用 nginx -s reload来重新加载配置

    ydymz

扫码关注云+社区

领取腾讯云代金券