前端搭建组件库流程记录
antd、element ui 这类组件库是单个非连续性的交互组件,现在参照这些组件库搭建出适合我们公司业务需求的模块化组件
1.使用到的基础技术
- vue cil 3
- npm
- webpack
2.初始化组件库目录
vue create zxq-menu-ui
此时为了方便组件库的代码管理，将目录结构修改为：
├─src // 用作示例 Demo
│
├─packages // 新增 packages 用于编写存放组件
│
├─lib // 新增 lib 用于存放编译后的输出文件
│ .gitignore
│ babel.config.js
│ package-lock.json
│ package.json
│ README.md
│ vue.config.js
│
vue cli3 提供一个可选的 vue.config.js 配置文件。这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。
修改 vue.config.js 配置的目的主要是：
- 使 Demo 可访问，实现对
src目录的编译处理； - 提供对
package的编译、构建处理
入口修改使用 Vue CLI 3 的 page属性来配置：[图片上传中...(image-a03fbc-1634089581849-4)]
3、编写 packages 组件库
创建一个 menu-nav组件
-
创建组件
- 在
packages目录下，所有的单个组件都以文件夹的形式存储，这里创建一个目录 menu-nav文件夹； - 在 menu-nav
/目录下创建src/目录存储组件源码，所有 menu-nav依赖的除第三方资源都存放与该目录下； - 在
/ menu-nav目录下创建index.js` 文件对外提供对组件的引用
- 在
示例代码：
image.png
4.导出 packages 组件库
修改 /packages/index.js 文件，整合所有组件，并对整个组件库进行导出：
// 导入组件 import LayoutH from './menu-nav/layoutH' import LayoutV from './menu-nav/layoutV' import LayoutHV from './menu-nav/layoutHV' // 存储组件列表 const components = [
LayoutH, LayoutV, LayoutHV
]
// 定义 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, // 以下是具体的组件列表 LayoutH, LayoutV, LayoutHV
}
5.发布组件库到 npm
packages 目录的编译打包
在 package.json的 scripts字段中新增一下命令：
<pre style="margin: 10px 0px 0px; padding: 0px; font-family: ConfluenceInstalledFont, monospace;">"lib": "vue-cli-service build --target lib --name layout --dest lib packages/index.js"</pre>
<pre style="margin: 10px 0px 0px; padding: 0px; font-family: ConfluenceInstalledFont, monospace;">"publishConfig":{
"registry":"https://repo.log56.com/nexus3/repository/npm-hosted/" }, </pre>
--target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。
--dest : 输出目录，默认 dist。这里我们改成 lib
[entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。
image.png
配置好了后，执行编译命令: npm run lib
package.json 配置 （见上截图）
-
name: 包名，该名字是唯一的。可在 npm 官网搜索名字。 -
version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。 -
description: 描述。 -
main: 入口文件，该字段需指向我们最终编译后的包文件。 -
keyword：关键字，以空格分离希望用户最终搜索的词。 -
author：作者 -
private：是否私有，需要修改为 false 才能发布到 npm
添加 .npmignore 文件
发布时，只有编译后的 lib 目录、package.json、README.md才需要被发布。所以通过配置.npmignore文件忽略不需要提交的目录和文件。
`# 忽略目录 examples/ packages/ public/ # 忽略指定文件 vue.config.js babel.config.js .map # 本地文件 .env.local .env..local # 日志文件 npm-debug.log* yarn-debug.log* yarn-error.log* # 编辑器缓存文件 .idea .vscode *.suo .ntvs *.njsproj *.sln .sw
登录公司npm仓库进行发布
https://confluence.log56.com/pages/viewpage.action?pageId=145934495 发布需要使用--登录发布权限账号
npm login --registry=https://repo.log56.com/nexus3/repository/npm-hosted/
Username : deployment
password : wtyt123
Email : fuguangcai@log56.com
登录私有库--抓取包使用
命令：npm adduser --registry=https://repo.log56.com/nexus3/repository/npm-group/
根据步骤输入以下内容：
Username : log56repo
password : log56repo!@#*(
Email : fuguangcai@log56.com
--切换下载地址
命令：npm config set registry https://repo.log56.com/nexus3/repository/npm-group/
抓包：npm i svgaplayerweb`
npm publish执行发布组件
6.使用组件库
安装发布的组件库：
npm i zxq-menu-ui
# 在 main.js 引入并注册
import menuUI from 'zxq-menu-ui'
<pre style="margin: 10px 0px 0px; padding: 0px; font-family: ConfluenceInstalledFont, monospace;">import 'zxq-menu-ui/lib/layout.css'</pre>
Vue.use(menuUI)
最后就可以像使用elementui那样正常使用组件了
image.png
image.png
