创建前端组件库
开始搭建组件库
做组件库的意义
组件设计的基本原理
通用性 易用性 可通性
搞坏了四个项目后,终于搭建好了我的组件库的第一版本。
玩坏的项目中,各种各样的错误提示都有,这时候,千万不要慌。
第一,检查下,所有的代码是否合乎规范,比如,引号内是不是多了个空格,再比如,你的babel-core和babel-loader还是啥玩意儿的,版本是否同级,所谓同级就是,一个7.x,一个8.x,这俩就是不同级,可能会出现bug。这时候,不要慌,要不删了这俩东西。要不就调整其中一个到另一个的版本级别就ok了。
这里面,先确保你的电脑中已经安装了npm,vue这些东西。
第一步 新建一个项目,在一个文件夹中打开cmd执行以下命令,项目名字,自己爱好咯
vue create XXX-ui
第二步,新建项目后,会发现并没有网上那些文章里面说的有vue.config.js。确实是没有的,所以这里需要自己新建一个文件,vue.config.js,里面具体是要写关于文件的一些配置。如果还想做其他配置,可自行修改。
关于src文件夹,也可自行命名为examples,看个人爱好,添加一个packages文件夹。后续用于添加组件。
const path = require("path");
module.exports = {
// 修改默认的入口
pages: {
index: {
entry: "src/main.js",
template: "public/index.html",
filename: "index.html"
}
},
chainWebpack: config => {
// vue默认@指向src目录,这里要修正为src,另外新增一个~指向packages
config.resolve.alias
.set("@", path.resolve("src"))
.set("~", path.resolve("packages"));
// lib目录是组件库最终打包好存放的地方,不需要eslint检查
// src/docs是存放md文档的地方,也不需要eslint检查
config.module
.rule("eslint")
.exclude.add(path.resolve("lib"))
.end()
.exclude.add(path.resolve("src/docs"))
.end();
// packages和src目录需要加入编译
config.module
.rule("js")
.include.add(/packages/)
.end()
.include.add(/src/)
.end()
.use("babel")
.loader("babel-loader")
.tap(options => {
// 修改它的选项...
return options;
});
}
};
第三步,进入项目文件夹,cmd执行npm run serve,这个命令是初始化时默认的,也可以换成npm run dev,当然,在package.json里面可以自行修改。看个人喜好。启动,开始在packages中新建组件。
以message为例(仅供测试,所以先建一个最简单的例子就好。)
以下为packages文件夹下的文件目录。
以下为各个文件的内容,可供参考
packages/message/src/message.vue
<template>
<div class="message">
您好,{{message}}
</div>
</template>
<script>
export default {
name: 'v-message', // 申明组件的 name属性
props: {
message: String
}
}
</script>
/packages/message/index.js
import message from './src/message'
message.install = function (Vue) {
Vue.component(message.name, message )
}
export default message
/packages/index.js
// 导入组件
import message from './message'
// 存储组件列表
const components = [
message
]
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install,才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
message
}
第四步 新建完一个组件后,需要发布到npm上面,我们才能用。首先,我们需要通过npm run lib 把我们的项目打包至lib文件夹中。lib这个命令需要添加到package.json中。
下面的XXX均为你自己命名。
"name": "XXX-ui", // 此处换为你自己的ui的名称即可,避免冲突,可以提前在npm的仓库里搜索一下
"version": "0.1.3",
"main": "lib/XXX-ui.umd.min.js",
"description": "XXX-ui",
"keyword": "XXX-ui",
"author":"XXX",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name XXX-ui --dest lib packages/index.js"
},
第五步,截至此时,我们的代码已经初步告一段落。如果你还未注册npm的账号,那就先去注册一个账号。如果注册好了,打开cmd,执行npm login,输入你自己的账号密码。而后,npm publish,发布你的组件库。发布完成后,可在npm中搜索到你的组件库。ok,一个组件库,从开始到上传完毕。接下来最重要的一点。不能遗漏。试一下你的组件是否能用,这很关键。
第六步 新建一个项目,在项目中使用我刚刚上传的组件库。
- npm i —save-dev XXX-ui
- 在项目的主文件main.js中
import XXX from 'musuixin-ui'
Vue.use(XXX)
- 找一个demo文件
<v-message message="Miya" />
根据我的组件,出来的应该是
您好,Miya
结语
开心,终于把这整个过程走完,并且走通了。在这个过程中遇到了几个问题,好在也都解决了。
简单的搭建已经完成了,后续组件的按需加载,以及组件的扩充,继续加油。