基于vue-cli4的ui组件库,先贴个最终效果吧,步骤有点多,准备分上下篇,上篇:如何做一个初步的组件。下篇:编写说明文档及页面优化。开工。
GitHub源码地址:https://github.com/sq-github/sq-ui
GitHub预览地址:https://sq-github.github.io/sq-ui/dist

一、组件库是基于vue-cli框架的的,用vue-cli创建项目
vue create sq-ui
二、修改目录,以及重新修改配置文件。
1、查看了很多的开源组件库的源码,都喜欢用packages目录存放组件,examples目录用来展示组件。所以在这个项目内,将src目录改为examples用来展示组件。同级别创建packages目录,用来存放组件。由于改了目录,所以需要重新新配置webpack,先在最外层创建vue.congfig.js。现在的目录结构如下:

2、配置vue.config.js文件。重新运行项目成功即可。
const path = require('path')
module.exports = {
// 修改 pages 入口
pages: {
index: {
entry: 'examples/main.js', // 入口
template: 'public/index.html', // 模板
filename: 'index.html' // 输出文件
}
},
// 扩展 webpack 配置
chainWebpack: config => {
// @ 默认指向 src 目录,这里要改成 examples
// 另外也可以新增一个 ~ 指向 packages
config.resolve.alias
.set('@', path.resolve('examples'))
.set('~', path.resolve('packages'))
// 把 packages 和 examples 加入编译,因为新增的文件默认是不被 webpack 处理的
config.module
.rule('js')
.include.add(/packages/)
.end()
.include.add(/examples/)
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
}
三、新建组件
1、在packages下面新建一个SqButton组件的文件夹,同时新建一个index.js文件,用来导出所有组件。目录结构如下:

2、在SqButton.vue中编写组件
<template>
<button class="testBtn">测试按钮</button>
</template>
<script>
export default {
name: 'SqButton' // 注意这个name是必须的
}
</script>
<style lang="scss" scoped>
.testBtn {
width: 100px;
height: 50px;
margin: 0 10px;
background-color: #fc297f;
font-size: 16px;
border-radius: 5px;
border: none;
cursor: pointer;
}
</style>
3、在SqButton/src/index.js中暴露组件
// 暴露组件
import SqButton from './src/SqButton'
SqButton.install = vue => {
vue.component(SqButton.name, SqButton)
}
export default SqButton
4、最后在src/index.js中导出所有组件
import SqButton from './SqButton'

// 所有组件列表
const components = [SqButton]
// 定义install方法,接收Vue作为参数
const install = function(Vue) {
// 判断是否安装,安装过就不继续往下执行
if (install.installed) return
install.installed = true
// 遍历注册所有组件
components.map(component => Vue.use(component))
} // 检测到Vue才执行,毕竟我们是基于Vue的
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
console.log(components)
export default {
install,
// 所有组件,必须具有install,才能使用Vue.use()
...components
}
5、在项目中测试组件
在main.js中引入组件
// 引入组件
import squi from '../packages'
Vue.use(squi)
在app.vue页面中调用

最终效果

四、发布组件进行测试
在 package.json的 scripts 字段中新增一下命令:
"lib": "vue-cli-service build --target lib --name kui --dest lib packages/index.js"
 
--target: 构建目标,默认为应用模式。这里修改为 lib 启用库模式。
--dest : 输出目录,默认 dist。这里我们改成 lib
[entry]: 最后一个参数为入口文件,默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。
注意修改成适合自己项目的,我的修改如下:

"lib": "vue-cli-service build --target lib --name sq-ui --dest lib packages/index.js"
2、执行命令
npm run lib
会发现目录下多了lib文件夹
package.json其他配置,配置如下
  "name": "sq-ui",
"version": "0.1.6",
"private": false,
"description": "基于 vue-cli4 的组件库",
"main": "lib/sq-ui.umd.min.js",
"author": "sq",
"keywords": [
"sq-ui"
],
"license": "MIT",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name sq-ui --dest lib packages/index.js"
},
3、添加.npmignore 文件,发布时,只有编译后的 lib 目录、package.json、README.md才需要被发布。所以通过配置.npmignore文件忽略不需要提交的目录和文件。
# 这是复制 .gitignore 里面的
.DS_Store
node_modules
/dist # local env files
.env.local
.env.*.local # Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log* # Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw* # 以下是新增的
# 要忽略目录和指定文件
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html
4、发布到npm
现需要去npm官网注册账号
然后本地登录:npm login
最后发布到npm: npm publish
5、最后就可以测试了:
可以另起一个项目
npm i sq-ui
在main.js中引用
import squi from 'sq-ui'
import 'sq-ui/lib/sq-ui.css'
Vue.use(squi)
在app.vue中调用组件:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<sq-button></sq-button>
</div>
</template>
如果,出现下面这个结果,恭喜你成功了。但这样展示实在是太low了,在下篇中我们希望我们的组件库能像element那样进行展示,为组件添加说明文档,使其更像一个组建库。

参考链接:
https://github.com/xiaolannuoyi/yuan-ui
https://segmentfault.com/a/1190000018310478
https://blog.csdn.net/qq_31126175/article/details/100527322?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158788190919725247652639%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.57644%2522%257D&request_id=158788190919725247652639&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-7

手把手做一个基于vue-cli的组件库(上篇)的更多相关文章

  1. 手把手做一个基于vue-cli的组件库(下篇)

    基于vue-cli4的ui组件库,上篇:如何做一个初步的组件.下篇:编写说明文档及页面优化.接上篇,开工. GitHub源码地址:https://github.com/sq-github/sq-ui ...

  2. 基于Vue的npm组件库

    前言(*❦ω❦) 思维导图可能有点高糊,有点太大了,项目和导图文件放到github或giteee上,这个思维导图也是我文章的架构,思维导图是用FeHelper插件生成的,这个是一款开源chrome插件 ...

  3. 使用webpack4搭建一个基于Vue的组件库

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

  4. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  5. 一个基于vue的时钟

    前两天写了一个基于vue的小钟表,给大家分享一下. 其中时针和分针使用的是图片,结合transform制作:表盘刻度是通过transform和transformOrigin配合画的:外面的弧形框框,啊 ...

  6. 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题

    基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...

  7. 扩展一个boot的插件—tooltip&做一个基于boot的表达验证

    在线演示 本地下载 (代码太多请查看原文) 加班,加班加班,我爱加班··· 我已经疯了,哦也. 这次发一个刚接触boot的时候用boot做的表单验证,我们扩展一下tooltip的插件,让他可以换颜色. ...

  8. 一个基于vue的仪表盘demo

    最近写了一个基于vue的仪表盘,其中 主要是和 transform 相关的 css 用的比较多.给大家分享一下,喜欢的话点个赞呗?嘿嘿 截图如下: 实际效果查看地址:https://jhcan333. ...

  9. 一个基于swoole的作业调度组件,已经实现了redis和rabitmq队列消息存储。

    https://github.com/kcloze/swoole-jobs 一个基于swoole的作业调度组件,已经实现了redis和rabitmq队列消息存储.参考资料:swoole https:/ ...

随机推荐

  1. java基础:switch语句应用,循环的详细介绍以及使用,附练习案列

    1. switch语句 1.1 分支语句switch语句 格式 switch (表达式) { case 1: 语句体1; break; case 2: 语句体2; break; ... default ...

  2. 一个简单的java项目使用hibernate连接mysql数据库

    实体类与表对应文件Customer.hbm.xml <?xml version="1.0" encoding="UTF-8"?><!DOCTY ...

  3. [leetcode]114. Flatten Binary Tree to Linked List由二叉树构建链表

    /* 先序遍历构建链表,重新构建树 */ LinkedList<Integer> list = new LinkedList<>(); public void flatten( ...

  4. 8种常被忽视的SQL错误用法,你中招了吗?

    前言 MySQL在近几年仍然保持强劲的数据库流行度增长趋势.越来越多的客户将自己的应用建立在 MySQL 数据库之上,甚至是从 Oracle 迁移到 MySQL上来.但也存在部分客户在使用 MySQL ...

  5. 关于STM32的CAN的过滤器

    关于STM32的CAN的过滤器STM32普通型芯片的CAN有14组过滤器组,互联型有28组过滤器组.一般我们用的都是普通型的,所以在本文中可以说STM32有14组过滤器组.根据配置,每1组过滤器组可以 ...

  6. 【Go】我与sync.Once的爱恨纠缠

    原文链接: https://blog.thinkeridea.com/202101/go/exsync/once.html 官方描述 Once is an object that will perfo ...

  7. Javascript函数闭包及案例详解

    什么情况下会形成闭包,什么是闭包 闭包(Closure):函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包 可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员 下面来看一个 ...

  8. PHP 自定义 alert 跳转方法

    /** * 跳转方法 * @param $msg * @param null $path * @param null $parent */ public function alert($msg,$pa ...

  9. 如何写一个自己的组件库,打成NPM包,并上传到NPM远程

    1.首先使用vue create my_project 构建一个自己的Vue项目 2.vue.config.js和package.json配置如下,做了些修改 const path = require ...

  10. Java内存模型与线程(一)

    Java内存模型与线程 TPS:衡量一个服务性能的标准,每秒事务处理的总数,表示一秒内服务端平均能够响应的总数,TPS又和并发能力密切相关. 在聊JMM(Java内存模型)之前,先说一下Java为什么 ...