封裝UI組件庫系列第一篇·搭建項目

前言

🌟搭建項目

創(chuàng)建工程

基本結構

?1.創(chuàng)建8個組件展示頁面

??2.配置路由文件router/index.js

?3.頁面布局

🌟總結

---

前言

在前端開發(fā)中，大家可能已經(jīng)用過各種各樣的UI組件庫了，現(xiàn)在市面上熱門的有Element-ui、Ant Design等等，這些即插即用的組件庫確實大大提升了開發(fā)效率，避免了很多的重復勞動，但這些組件庫再怎么完善，又怎么能滿足得了我們可愛的產(chǎn)品經(jīng)理呢？所以工作中難免會需要開發(fā)公司內(nèi)部的UI組件庫，或者基于已有組件庫進行二開。

【封裝UI組件庫系列】文章，將從0開始--》搭建項目--》封裝八大經(jīng)典功能組件--》打包組件庫--》將組件庫發(fā)布至npm--》使用自己封裝的組件庫。技術方面使用的是Vue3 + Vite + Sass 來完成一個模仿Element Plus的組件庫。最終完成效果如下：

🌟搭建項目

創(chuàng)建工程

組件庫使用Vue3+Vite搭建，所以第一步先創(chuàng)建工程：

pnpm create vue@latest

我使用的是pnpm包管理工具，這個根據(jù)個人情況來就行npm、yarn等都可?。

項目創(chuàng)建完成后?pnpm i 安裝依賴，pnpm dev啟動項目：

基本結構

接下來我們將以下圖為最終效果來一步步實現(xiàn)：

?1.創(chuàng)建8個組件展示頁面：

?2.配置路由文件router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import IconView from '../views/IconView.vue'const 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' ，就是使用的這里的樣式。

這時啟動項目會發(fā)現(xiàn)如下圖：

這是因為在main.js中引用了默認樣式import './assets/main.css'

打開main.css文件，刪去我們用不到的樣式，剩下如圖：

?再打開項目得到如下圖效果，那么項目的基本布局就完成了。

本篇將項目以及頁面搭建好后，下一篇就是使用Sass語法模仿Element Plus 創(chuàng)建主題色彩，以及重置樣式。

🌟總結

【封裝UI組件庫系列】文章會持續(xù)更新，將帶著大家從0開始--》搭建項目--》封裝八大經(jīng)典功能組件--》打包組件庫--》將組件庫發(fā)布至npm--》最后使用自己封裝的組件庫。如果文中出現(xiàn)有瑕疵的地方各位通過評論或者私信聯(lián)系我，我們一起進步！該系列文章建議從第一篇開始看，系列專欄地址：從零開始封裝UI組件庫完整篇