品牌网站建设内容框架,react 做网站,福州网站建设方案咨询,北京好的广告公司一直对开源UI组件库比较感兴趣#xff0c;摸索着开发了一套#xff0c;虽然还只是开始#xff0c;但是从搭建到发布这套流程基本弄明白了#xff0c;现在分享给大家#xff0c;希望对同样感兴趣的同学有所帮助。 目前我的这套名为hasaki-ui的组件库仅有两个组件#xff0… 一直对开源UI组件库比较感兴趣摸索着开发了一套虽然还只是开始但是从搭建到发布这套流程基本弄明白了现在分享给大家希望对同样感兴趣的同学有所帮助。 目前我的这套名为hasaki-ui的组件库仅有两个组件大致成果如下后续有时间会继续完善。 该项目采用的技术栈为Vite Vue3还使用了一些基本的Markdown知识阅读本文档前希望你至少对vue有些基础那么我们正式开始。
一、创建一个Vite项目 参照vite官网打开命令行执行上述命令之一按提示操作即可创建完成后你得到了一个以你创建的项目名为名的一个文件夹我的为hasaki-ui直接以成品进行说明吧。 二、组件开发 本文重点不在于某个组件的开发而是库开发的配置、发布流程所以在此以一个很简单的demo组件作为说明。 doc.md为组件的说明文档一般是用 Markdown 来写。这里我们需要使用 vite-plugin-vue-markdown插件来将 md 文件转换成 vue 文件。
// doc.md
script setup
import doc from ./doc.vue;
import PreviewCode from /components/PreviewCode.vue
/script# DEMOdoc/
PreviewCode compNamedemo /doc.vue 为展示demo组件的vue文件
// doc.vue
templatediv classdemo-docDemo //div
/template
script langts
export default {name: DemoDoc
}
/script
script langts setup/script
style langscss scoped
.demo-doc {width: 100%;height: 100%;padding: 20px;
}
/style库组件
// Demo.vue
templatediv classdemoDemo is here/div
/template
script langts
export default {name: Demo
}
/script
script langts setup
import { onMounted } from vueonMounted(() {console.log(demo 出现啦)
})
// endregion
/script
style langscss scoped
.demo {height: 100%;width: 100%;display: flex;flex-direction: column;overflow: hidden;
}
/stylePreviewCode.vue组件用于获取组件源码用于在页面展示源码
// PreviewCode.vue
templatediv classpreview-codediv classshowCode clickshowOrhideCodespan{{ showCode ? 隐藏代码 : 显示代码 }} lt; gt;/span/divel-scrollbartransitionpre v-highlight v-ifshowCodecode{{ sourceCode }}/code/pre/transition/el-scrollbar/div
/templatescript setup
import { onMounted, ref } from vueconst props defineProps({compName: {type: String,default: ,require: true}
})const showCode ref(false)
const sourceCode ref()const showOrhideCode () {showCode.value !showCode.value
}const getSourceCode async () {let code await import(/* vite-ignore */ /components/hasaki-ui/${props.compName}/doc/doc.vue?raw)sourceCode.value code.default
}onMounted(() {getSourceCode()
})
/script
style langscss
.preview-code {height: 300px;.showCode {cursor: pointer;color: #777;text-align: right;padding-right: 50px;:hover {color: #409eff;}}
}.v-enter-active,
.v-leave-active {transition: all 0.5s ease;
}.v-enter-from,
.v-leave-to {opacity: 0;transform: translateY(200px);
}
/style组件出口
// index.ts
import ElTablePagination from ./ElTablePagination/ElTablePagination.vue
import SelectTree from ./SelectTree/SelectTree.vue
import Demo from ./demo/Demo.vue// 按需引入
export { ElTablePagination, SelectTree, Demo }const component [ElTablePagination, SelectTree, Demo]const HasakiUI {install(App: any) {component.forEach((item) {App.component(item.name, item)})}
}export default HasakiUI在src的main.ts中引入组件库
import { createApp } from vue
import App from ./App.vue
import router from ./router
import HasakiUI from ./components/hasaki-uiimport hljs from highlight.js // 引入代码高亮文件
import highlight.js/styles/color-brewer.cssconst app createApp(App)app.directive(highlight, function (el) {const blocks el.querySelectorAll(pre code)blocks.forEach((block) {hljs.highlightBlock(block)})
})app.use(router)
app.use(HasakiUI)
app.mount(#app)接下来我们简单写下项目外壳样式
// views/home-page.vue
templatediv classhome-pagediv classhome-page-sidebardiv classlogoimg src/favicon.ico alt /hasaki-ui/divul v-foritem in routes :keyitemliv-for(ele, index) in item.children:keyele:class{ active: mIndex index }clickgoPath(ele, index){{ ele.name }}/li/ul/divmain classhome-page-mainrouter-view/router-view/main/div
/templatescript setup
import { computed, ref } from vue
import { useRouter } from vue-routerconst router useRouter()
const mIndex ref(sessionStorage.getItem(mIndex) || 0)
const routes computed(() router.options.routes)const goPath (ele, index) {mIndex.value indexrouter.push({path: ele.path})sessionStorage.setItem(mIndex, index)
}
/scriptstyle langscss scoped
.home-page {display: flex;justify-content: space-between;width: 100%;height: 100%;overflow: hidden;-sidebar {width: 200px;height: 100%;border-right: 1px solid #eee;text-align: center;.logo {display: flex;align-items: center;padding: 15px;font-size: 20px;img {width: 25px;margin-right: 10px;}}ul {li {height: 50px;line-height: 50px;cursor: pointer;}.active {color: #409eff;background-color: #ecf5ff;border-right: 1px solid #409eff;}}}-main {flex: 1;padding: 20px 50px;overflow-y: auto;}
}
/style配置路由
// router/index.ts
import { createRouter, createWebHistory } from vue-router
const routes [{path: /,name: 组件页面,component: () import(/views/home-page.vue),redirect: /demo,children: [{path: /demo,name: Demo,// ts-ignorecomponent: () import(/components/hasaki-ui/demo/doc/doc.md)},{path: /el-table-pagination,name: 分页表格,// ts-ignorecomponent: () import(/components/hasaki-ui/ElTablePagination/doc/doc.md)},{path: /select-tree,name: 树选择器,// ts-ignorecomponent: () import(/components/hasaki-ui/SelectTree/doc/doc.md)}]}
]
const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes
})export default router// App.vue
script setup langts/script
templatediv classmainRouterView //div
/template
style scoped langscss
.main {width: 100vw;height: 100vh;
}
/styleMarkdown 插件需要我们在vite.config.ts中进行配置 到这里我们的一个简单的组件库demo就完成了 三、库模式开发打包配置 在此我们介绍如何把我们开发的组件库进行打包重点是配置lib字段来进行库开发
// vite.config.ts
import { fileURLToPath, URL } from node:url
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import vueJsx from vitejs/plugin-vue-jsx
import Markdown from vite-plugin-vue-markdown// https://vitejs.dev/config/
export default defineConfig({base: /hasaki-ui/,plugins: [vue({include: [/\.vue$/, /\.md$/]}),vueJsx(),Markdown()],build: {outDir: hasaki-ui, //输出文件名称lib: {entry: fileURLToPath(new URL(./src/components/hasaki-ui/index.ts, import.meta.url)), //指定组件编译入口文件name: hasaki-ui, // 包名fileName: hasaki-ui // 打包文件名}, //库编译模式配置rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: [vue, vue-router],output: {// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: Vue}}}, // rollup打包配置terserOptions: {// 在打包代码时移除 console、debugger 和 注释compress: {/* (default: false) -- Pass true to discard calls to console.* functions.If you wish to drop a specific function call such as console.info and/orretain side effects from function arguments after dropping the functioncall then use pure_funcs instead*/drop_console: true, // 生产环境时移除consoledrop_debugger: true // 生产环境时移除debugger},format: {comments: false // 删除注释comments}}},resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}}
})在package.json中配置发布信息
{name: hasaki-ui, // 发布包的名称version: 0.0.5, // 版本号每次更新注意升级版本号private: false, // 是否为私有这里注意应为falsemain: ./hasaki-ui/hasaki-ui.umd.js, // 入口文件module: ./hasaki-ui/hasaki-ui.mjs, // 模块入口sideEffects: false,keywords: [hasaki,hasaki-ui,HasakiUI], // 搜索关键词description: 一款基于Element-Plus开发的UI组件库,适用于vue3,大多为PC端后台管理系统常用组件, // 描述author: YXX, // 作者exports: {./hasaki-ui/style.css: ./hasaki-ui/style.css,.: {import: ./hasaki-ui/hasaki-ui.mjs,require: ./hasaki-ui/hasaki-ui.umd.js}}, // 引用路径映射解决加载样式失败问题files: [hasaki-ui/*], // 描述了将软件包作为依赖项安装时要包括的条目默认值为[“*”]这意味着它将包括所有文件,我们指定我们自己组件文件夹即可// ..重要的就上面这些
}执行 npm/yarn/pnpm run build进行打包出现如下表示打包成功了 四、发布
这一步其实很简单一个命令搞定npm publish但是初次发布需要登录你的npm
1、执行npm login 命令输入用户名和密码输入密码时是看不到的之后按提示输入绑定的邮箱成功后你的邮箱会收到一个one-time password填入后即登录成功。
2、登录之后就可以执行npm publish进行发布。
3、发布前要注意查看你的npm源是否为官方源https://registry.npmjs.org 如果不是要切回官方源否则发布失败
4、发布成功后到npm上就可以看到我们的包了至此我们就有了自己的一个开源包。
