滁州医院网站建设费用,做的最好的理财网站,南充手机网站建设,哪个网站可以做平面兼职封装UI组件库系列第一篇搭建项目
前言
#x1f31f;搭建项目
创建工程
基本结构 1.创建8个组件展示页面
2.配置路由文件router/index.js 3.页面布局
#x1f31f;总结 前言
在前端开发中#xff0c;大家可能已经用过各种各样的UI组件库了#xff0c;现在市面上热…封装UI组件库系列第一篇·搭建项目
前言
搭建项目
创建工程
基本结构 1.创建8个组件展示页面
2.配置路由文件router/index.js 3.页面布局
总结 前言
在前端开发中大家可能已经用过各种各样的UI组件库了现在市面上热门的有Element-ui、Ant Design等等这些即插即用的组件库确实大大提升了开发效率避免了很多的重复劳动但这些组件库再怎么完善又怎么能满足得了我们可爱的产品经理呢所以工作中难免会需要开发公司内部的UI组件库或者基于已有组件库进行二开。
【封装UI组件库系列】文章将从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》使用自己封装的组件库。技术方面使用的是Vue3 Vite Sass 来完成一个模仿Element Plus的组件库。最终完成效果如下 从零开始封装UI组件库效果演示 搭建项目
创建工程
组件库使用Vue3Vite搭建所以第一步先创建工程
pnpm create vuelatest
我使用的是pnpm包管理工具这个根据个人情况来就行npm、yarn等都可 。 项目创建完成后 pnpm i 安装依赖pnpm dev启动项目 基本结构
接下来我们将以下图为最终效果来一步步实现 1.创建8个组件展示页面 2.配置路由文件router/index.js
import { createRouter, createWebHistory } from vue-router
import IconView from ../views/IconView.vueconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,name: icon,component: IconView},{path: /button,name: button,component: () import(../views/ButtonView.vue)},{path: /card,name: card,component: () import(../views/CardView.vue)},{path: /dialog,name: dialog,component: () import(../views/DialogView.vue)},{path: /collapse,name: collapse,component: () import(../views/CollapseView.vue)},{path: /pager,name: pager,component: () import(../views/PagerView.vue)},{path: /tooltip,name: tooltip,component: () import(../views/TooltipView.vue)},{path: /dropdown,name: dropdown,component: () import(../views/DropdownView.vue)}],linkActiveClass: active
})export default router
3.页面布局
在App.vue中将页面基本布局完善 样式会使用sass所以需要pnpm add -D sass .active 其实就是选中样式上面在路由文件配置的linkActiveClass: active 就是使用的这里的样式。
这时启动项目会发现如下图 这是因为在main.js中引用了默认样式import ./assets/main.css 打开main.css文件删去我们用不到的样式剩下如图 再打开项目得到如下图效果那么项目的基本布局就完成了。 本篇将项目以及页面搭建好后下一篇就是使用Sass语法模仿Element Plus 创建主题色彩以及重置样式。 总结
【封装UI组件库系列】文章会持续更新将带着大家从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》最后使用自己封装的组件库。如果文中出现有瑕疵的地方各位通过评论或者私信联系我我们一起进步该系列文章建议从第一篇开始看系列专栏地址从零开始封装UI组件库完整篇
