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

創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，先為寶山等服務(wù)建站，寶山等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為寶山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

前言

主流的開源 UI 庫代碼結(jié)構(gòu)主要分為三大部分：

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

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

前置工作

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

vue create vtp-component # vtp-component 作為教學(xué)的庫名vue-router , dart-sass , babel , eslint 這些是該項(xiàng)目使用的依賴項(xiàng)，小主可以根據(jù)自己的需求進(jìn)行相應(yīng)的切換

start

開始造輪子了

工作目錄

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

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

|--- scripts

讓 webpack 編譯 examples

由于我們將 src 目錄修改成了 examples，所以在 vue.config.js 中需要進(jìn)行相應(yīng)的修改

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'))
 }
}

當(dāng)前名稱：使用Vuecli3.0構(gòu)建自定義組件庫的方法-創(chuàng)新互聯(lián)
分享地址：http://chinadenli.net/article38/cdjjpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)頁設(shè)計(jì)公司、靜態(tài)網(wǎng)站、微信公眾號、域名注冊、網(wǎng)站設(shè)計(jì)公司

廣告

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