前端搭建组件库流程记录

antd、element ui 这类组件库是单个非连续性的交互组件,现在参照这些组件库搭建出适合我们公司业务需求的模块化组件

1.使用到的基础技术

1. vue cil 3
2. npm
3. 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 配置的目的主要是：

1. 使 Demo 可访问，实现对 src目录的编译处理；
2. 提供对 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