青岛建站合作,软文是什么样子的,网站建设灰色关键词,下载百度官方网站在日常开发中#xff0c;我们习惯性的会封装一些个性化的组件以适配各种业务场景#xff0c;突发奇想能不能建一个自己的组件库#xff0c;今后在各种业务里可以自由下载安装自己的组件。
一. 项目搭建
首先直接使用vue-cli创建一个vue2版本的项目#xff0c;并下载好ele…在日常开发中我们习惯性的会封装一些个性化的组件以适配各种业务场景突发奇想能不能建一个自己的组件库今后在各种业务里可以自由下载安装自己的组件。
一. 项目搭建
首先直接使用vue-cli创建一个vue2版本的项目并下载好elementui这里我们会尝试封装一个适配上万数据的下拉框组件。
二. 组件准备工作
项目搭建完成后我的目录结构大概是这样的 通常人们喜欢新建一个packages文件夹专门存放组件例如我们熟悉的element-ui就是如此但这里我想了想我本身就有一个components文件夹了干脆就直接使用这个文件夹做我的组件文件夹了没必要专门单独新建一个。
这里我们需要建一个index.js文件用于组件的注册操作以下是文件内容
let components []
const requireAll require.context(/components, true, /index\.vue$/)
const modulList requireAll.keys().map((item) requireAll(item))
modulList.forEach(({ default: vm }) {components.push(vm)
})// 全局引入
const install function (Vue) {// 遍历组件列表并注册全局组件components.forEach((component) {//component.name 此处使用到组件vue文件中的 name 属性Vue.component(Cl component.name, component)})
}let exportData {install,
}// 适配单个引入
components.forEach((component) {component.install function (Vue) {Vue.component(Cl component.name, component)}exportData[component.name] component
})export default exportData
简单说下上面的代码
首先我们创建了一个components数组用来存放我们获取的组件。获取组件的方法使用了webpack自带的一写api可以直接访问到我们指定的文件夹然后正则匹配出我们需要的组件文件。然后写一个install方法用于组件的批量全局注册。接着我们map下这个components将所有的组件分别构建一个install方法这样的话我们就可以拥有全局引用和按需引用两种引用模式了。注意这里按需导入并不能像element-ui那样直接import { Button } from “element-ui”element-ui可以这样写是因为他使用了babel-plugin-component 插件可以根据你提供的关键字比如Button去指定文件直接读取我们要按需导入的话据需要import toolsUi from element-ui
Vue.use(toolsUi.组件名称)最后我们将所有数据直接导出。
三. 构建出发布的包
然后我们需要在package.json里面配置下我们的打包命令这里我是这样写的
npmUp: vue-cli-service build --target lib ./src/components/index.js --name tools_ui --dest tools_uivue-cli-service build 对指定文件夹进行打包--target lib指定构建的目标为库library。这将使构建工具以库模式进行构建生成一个可供他人使用的组件库。./src/components/index.js指定入口文件路径。这是你组件库的主要入口文件。--name tools_ui指定组件库的名称。你的组件库将以 tools_ui 为名称进行构建和导出。--dest tools_ui指定构建输出的目录。生成的组件库将被输出到名为 tools_ui 的目录中。
然后我们直接执行命令npm run npmUp
这个时候我们就可以看到我们打包出来的文件夹了
四. 发布工作
我们在终端cd进入到我们的tools-ui下然后npm init -y来初始化一个新的 package.json文件在这个文件里面配置出我们的包信息例如版本名称等。然后我们使用npm adduser进行登录操作一般会校验用户名密码等前提是已经在npm上有自己的账号。最后我们使用npm publish进行发布操作。 注意第一次发布而可能会遇到大大小小的问题例如node版本npm版本问题npm登录问题包名称重复等问题需要具体问题具体分析一般他会有对应的提示。 五 使用组件库
我们可以直接npm i 发布库的名称进行下载操作。然后在main.js里面直接引入
import tools_ui from code_life/tools_ui
Vue.use(tools_ui)当然我们也可以按需加载
import tools_ui from code_life/tools_ui
Vue.use(tools_ui.MuchSelect)
