本文旨在給大家提供一種構建一個完整 UI 庫腳手架的思路：包括如何快速并優雅地構建UI庫的主頁、如何托管主頁、如何編寫腳本提升自己的開發效率、如何生成 CHANGELOG 等

創新互聯公司自2013年創立以來，先為寶山等服務建站，寶山等地企業，進行企業商務咨詢服務。為寶山企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

前言

主流的開源 UI 庫代碼結構主要分為三大部分：

• 組件庫本身的代碼：這部分代碼會發布到 npm 上
• 預覽示例和查看文檔的網站代碼：類似 Vant、ElementUI 這類網站。
• 配置文件和腳本文件：用于打包和發布等等

編寫此博文的靈感 UI 框架庫（ vue-cards ）,PS:此 UI框架庫相對于Vant、ElementUI會比較簡單點，可以作為一份自定義UI框架庫的入坑demo，同時這篇博文也是解讀這份 UI 框架庫的構建到上線的一個過程

前置工作

以下工作全部基于 Vue CLI 3.x，所以首先要保證機子上有 @vue/cli

vue create vtp-component # vtp-component 作為教學的庫名vue-router , dart-sass , babel , eslint 這些是該項目使用的依賴項，小主可以根據自己的需求進行相應的切換

start

開始造輪子了

工作目錄

在根目錄下新增四個文件夾，一個用來存放組件的代碼（packages）,一個用來存放 預覽示例的網站 代碼（examples）（這里直接把初始化模板的 src 目錄更改為 examples 即可，有需要的話可以將該目錄進行清空操作，這里就不做過多的說明），一個用來存放編譯腳本代碼（build）修改當前的工作目錄為以下的格式嗎，一個用來存放自定義生成組件和組件的說明文檔等腳本（scripts）

|--- build
|
|--- examples
|
|--- packages
|

|--- scripts

讓 webpack 編譯 examples

由于我們將 src 目錄修改成了 examples，所以在 vue.config.js 中需要進行相應的修改

const path = require('path')
function resolve (dir) {
 return path.join(__dirname, dir)
}
module.exports = {
 productionSourceMap: true,
 // 修改 src 為 examples
 pages: {
 index: {
  entry: 'examples/main.js',
  template: 'public/index.html',
  filename: 'index.html'
 }
 },
 chainWebpack: config => {
 config.resolve.alias
  .set('@', resolve('examples'))
 }
}

當前名稱：使用Vuecli3.0構建自定義組件庫的方法-創新互聯
分享地址：http://vcdvsql.cn/article38/cdjjpp.html

成都網站建設公司_創新互聯，為您提供虛擬主機、網頁設計公司、靜態網站、微信公眾號、域名注冊、網站設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯