Vue3 企業級優雅實戰 - 組件庫框架 - 6 搭建example環境

来源:https://www.cnblogs.com/youyacoder/archive/2022/11/16/16896098.html
-Advertisement-
Play Games

該系列已更新文章: 分享一個實用的 vite + vue3 組件庫腳手架工具,提升開發效率 開箱即用 yyg-cli 腳手架:快速創建 vue3 組件庫和vue3 全家桶項目 Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo Vue3 企業級優雅實戰 - 組件庫框架 ...


該系列已更新文章:
分享一個實用的 vite + vue3 組件庫腳手架工具,提升開發效率
開箱即用 yyg-cli 腳手架:快速創建 vue3 組件庫和vue3 全家桶項目
Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo
Vue3 企業級優雅實戰 - 組件庫框架 - 2 初始化 workspace-root
Vue3 企業級優雅實戰 - 組件庫框架 - 3 搭建組件庫開發環境
Vue3 企業級優雅實戰 - 組件庫框架 - 4 組件庫的 CSS 架構
Vue3 企業級優雅實戰 - 組件庫框架 - 5 組件庫通用工具包

前面用了大量篇幅介紹組件庫的開發環境搭建,包括:創建組件、創建組件庫入口、組件庫樣式架構、組件庫公共包,做了一大堆工作,還不能預覽示例組件 foo,本文便搭建 example 開發環境和打包構建,併在 example 中使用組件庫。

1 搭建 example 開發環境

1.1 創建 example 項目

example 本質上就是一個 vite3 + vue3 的項目,可以通過 vite 來創建,也可以通過優雅哥編寫的 yyg-cli 來創建一個全家桶項目,甚至可以手動搭建。後面程式員優雅哥會用 example 來實現一個完整的企業級中後臺管理項目,用它來驅動組件庫的組件開發。

簡單一些,這裡就使用 vite 來創建 example 項目。從命令行中進入 example 目錄,運行:

pnpm create vite
  1. 輸入該命令後,稍等一會兒會提示輸入 project name,由於咱們已經創建 example 目錄,這裡輸入一個點(.)即可;
  2. framework 選擇 Vue
  3. variant 選擇 TypeScript

1.2 修改 package.json

生成項目後,先不要著急安裝依賴,因為有些依賴已經在 workspace-root 中安裝了,在這個子模塊中便無需重覆安裝。

修改 package.jsonnamedependenciesdevDependencies,修改後內容如下:

{
  "name": "@yyg-demo-ui/example",
  ...
  "dependencies": {
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
    "typescript": "^4.6.4"
  }
}

1.3 修改 vite 配置文件

自動生成的 vite.config.ts 文件只配置了 vue 插件,咱需要對其進行其他配置,如 TSX 插件、ESLint 插件、路徑別名等:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import eslint from 'vite-plugin-eslint'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    eslint()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    cors: true,
    proxy: {}
  },
  build: {
    outDir: path.resolve(__dirname, '../dist')
  }
})

1.4 多環境支持

這一步非必須,只是為了後面的項目開發做準備的。多環境支持在之前的文章中已經詳細講過,各位可以翻閱之前的文章,這裡僅快速操作一遍。

  1. example 目錄下創建 env 目錄,併在該目錄中分別創建四個文件:

example/env/.env

VITE_BASE_API=/api
VITE_APP_NAME='demo app'

example/env/.env.dev

VITE_BASE_API=/dev-api
NODE_ENV=production

example/env/.env.uat

VITE_BASE_API=/uat-api

example/env/.env.prod

VITE_BASE_API=/prod-api
  1. vite.config.ts 中指定環境文件目錄:
export default defineConfig({
  ...
  envDir: path.resolve(__dirname, 'env'),
	...
})

  1. src 中創建 env.d.ts 文件,以便於類型提示:
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_BASE_API: string;
  readonly VITE_APP_NAME: string;
}

// eslint-disable-next-line no-unused-vars
interface ImportMeta {
  readonly env: ImportMetaEnv
}
  1. 修改 package.json 的 scripts:
{
  ...
  "scripts": {
    "dev:dev": "vite --mode dev",
    "dev:uat": "vite --mode uat",
    "dev:prod": "vite --mode prod",
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
    "build:uat": "vue-tsc --noEmit && vite build --mode uat",
    "build:prod": "vue-tsc --noEmit && vite build --mode prod",
    "preview": "vite preview"
  },
  ...
}
  1. 在 main.ts 中測試輸入環境變數:
const env = import.meta.env
console.log(env)

1.5 測試啟動服務

執行 pnpm run dev:dev,測試服務是否能正常啟動,然後在瀏覽器中訪問 localhost:3000,測試界面是否正常,環境變數是否正常輸出。

2 測試 foo 組件

example 能正常運行後,說明 example 已經初始化成功,接下來便需要測試前面開發的 foo 組件了。

2.1 安裝依賴

由於自定義組件庫依賴於 element-plus,首先需要在 example 中安裝 element-plus

pnpm install element-plus

接著安裝咱們的本地組件庫 @yyg-demo-ui/yyg-demo-ui

pnpm install @yyg-demo-ui/yyg-demo-ui

此時 example 的 package.json dependencies 如下:

"dependencies": {
  "@yyg-demo-ui/yyg-demo-ui": "workspace:^1.0.0",
  "element-plus": "^2.2.21"
},

2.2 引入組件庫

main.ts 中分別引入 element-plus 和 自定義組件庫:

...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import YygDemoUi from '@yyg-demo-ui/yyg-demo-ui'

...

const app = createApp(App)
app.use(ElementPlus)
app.use(YygDemoUi)
app.mount('#app')

2.3 使用組件

項目創建時自動在 src/style.css 生成了很多樣式,可以將裡面的內容都刪除,留下一個空的 style.css 文件。

最後只需在 App.vue 中測試 foo 組件即可,修改 App.vue 如下:

<template>
  <div class="site">
    <h1>組件庫測試站點 yyg-demo-ui</h1>
    <p>測試站點主要用於開發過程中測試組件,即在開發過程中由業務驅動組件開發。</p>
    <yyg-foo :msg="msg"></yyg-foo>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const msg = ref('hello world')
</script>

<style scoped lang="scss">
.site {
  padding: 20px;
}
</style>

2.4 運行查看效果

再次運行 pnpm run dev:dev,查看效果:

image-20221114010545252

foo 組件的樣式、功能、以及 testLog 函數都正常運行,則 example 和 組件庫的開發環境便已完成。

3 example 打包構建

在前面的 scripts 中添加了 build:devbuild:uatbuild:prod命令,分別對應dev、uat、prod 三個環境,咱們就以 dev 環境為例說明 example的打包構建。

從命令行中進入 example 目錄,依次進行打包構建、預覽:

  1. 執行 pnpm run build:dev 進行打包,打包構建成功後,會在整個項目的根目錄下生成 dist 目錄(該目錄在 vite.config.ts 中 build.outDir 配置);
  2. 執行 pnpm run preview 對打包後的文件進行預覽,訪問控制臺中輸出的埠,運行效果與上面的效果一致。

到這裡,example 的開發和構建便已經完成,咱們可以在 example 中使用組件庫的組件。下文將介紹組件庫文檔的開發和構建。

感謝你閱讀本文,如果本文給了你一點點幫助或者啟發,還請三連支持一下,點贊、關註、收藏,程式員優雅哥會持續與大家分享更多乾貨


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 對於開發人員而言,資料庫的增刪改查操作才是最常使用的功能,學習 MongoDB 時還需對這些功能熟記於心才行啊。我就在這裡做一個簡單的備忘,多看官方文檔才是正道。 ...
  • 1.從官網下載 官網下載對應版本 https://www.elastic.co/cn/downloads/past-releases#kibana 2.解壓縮 tar -xvf kibana-7.15.2-linux-x86_64.tar.gz 3.修改配置文件 server.port: 5601 ...
  • 如今,視頻正在以一種前所未有的方式滲入日常生活,是當下人們記錄生活最熱門的方式。所以,用戶對視頻的畫質要求越來越高,App想要吸引更多的用戶,擁有視頻畫質新技術的強力支撐很關鍵。 HDR(High-Dynamic Range)就是一種提高影像亮度和對比度的處理技術。它可以將每個暗部的細節變亮,增加對 ...
  • 關於Intent.setDataAndType參數問題 install取設置屬於和類型,數據就是獲取到的uri,更具文件類型不同,type參數也不相同,具體參考下表 {尾碼名,MIME類型} ​ {".3gp", "video/3gpp"}, ​ {".apk", "application/vnd. ...
  • android studio 升級 Android Studio Dolphin | 2021.3.1 Patch 1後,xml佈局預覽界面報錯 一開始以為是那些警告導致的,有很多黃色的xml警告,比如命名的名字不是英文,或者設置了各種顏色值警告,或者系統要求你添加 contentDescripti ...
  • 滑動衝突 有時候 viewpager 嵌套 webview 後,左右滑動衝突,直接消費或者處理攔截導致上下不能滑動,所以需要根據滑動情況判斷處理,只在上下滑動時判斷事件交給子view class ScrollWebView(context: Context, attrs: AttributeSet) ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 場景 在App中撥打電話是一個比較常見的應用場景,但是我們通過搜索文章,發現,大部分的博文都是uni-app官網的copy, copy uni-app 提供的打電話,只是幫你把撥號界面呼出來,並不能直接撥打, 安卓原生API可以,IOS因 ...
  • 前言: 自學第一天,什麼是TS ,為什麼要用 TS TS 全程 Typed JavaScript at Any Scale 解釋起來就是 添加了類型系統的 JavaScript, 是 JavaScript 的一個超集 讓 JS 從動態類型的語言,變成了一個靜態類型的語言,給變數賦予了類型 好,到這裡 ...
一周排行
    -Advertisement-
    Play Games
  • 不廢話,直接代碼 private Stack<Action> actionStack = new Stack<Action>(); private void SetCellValues() { var worksheet = Globals.ThisAddIn.Application.ActiveS ...
  • OpenAPI 規範是用於描述 HTTP API 的標準。該標準允許開發人員定義 API 的形狀,這些 API 可以插入到客戶端生成器、伺服器生成器、測試工具、文檔等中。儘管該標準具有普遍性和普遍性,但 ASP.NET Core 在框架內預設不提供對 OpenAPI 的支持。 當前 ASP.NET ...
  • @DateTimeFormat 和 @JsonFormat 是 Spring 和 Jackson 中用於處理日期時間格式的註解,它們有不同的作用: @DateTimeFormat @DateTimeFormat 是 Spring 框架提供的註解,用於指定字元串如何轉換為日期時間類型,以及如何格式化日 ...
  • 一、背景說明 1.1 效果演示 用python開發的爬蟲採集軟體,可自動抓取抖音評論數據,並且含二級評論! 為什麼有了源碼還開發界面軟體呢?方便不懂編程代碼的小白用戶使用,無需安裝python、無需懂代碼,雙擊打開即用! 軟體界面截圖: 爬取結果截圖: 以上。 1.2 演示視頻 軟體運行演示視頻:見 ...
  • SpringBoot筆記 SpringBoot文檔 官網: https://spring.io/projects/spring-boot 學習文檔: https://docs.spring.io/spring-boot/docs/current/reference/html/ 線上API: http ...
  • 作為後端工程師,多數情況都是給別人提供介面,寫的好不好使你得重視起來。 最近我手頭一些活,需要和外部公司對接,我們需要提供一個介面文檔,這樣可以節省雙方時間、也可以防止後續扯皮。這是就要考驗我的介面是否規範化。 1. 介面名稱清晰、明確 顧名思義,介面是做什麼的,是否準確、清晰?讓使用這一眼就能知道 ...
  • 本文介紹基於Python語言,遍歷文件夾並從中找到文件名稱符合我們需求的多個.txt格式文本文件,並從上述每一個文本文件中,找到我們需要的指定數據,最後得到所有文本文件中我們需要的數據的合集的方法~ ...
  • Java JUC&多線程 基礎完整版 目錄Java JUC&多線程 基礎完整版1、 多線程的第一種啟動方式之繼承Thread類2、多線程的第二種啟動方式之實現Runnable介面3、多線程的第三種實現方式之實現Callable介面4、多線的常用成員方法5、線程的優先順序6、守護線程7、線程的讓出8、線 ...
  • 實時識別關鍵詞是一種能夠將搜索結果提升至新的高度的API介面。它可以幫助我們更有效地分析文本,並提取出關鍵詞,以便進行進一步的處理和分析。 該介面是挖數據平臺提供的,有三種模式:精確模式、全模式和搜索引擎模式。不同的模式在分詞的方式上有所不同,適用於不同的場景。 首先是精確模式。這種模式會儘量將句子 ...
  • 1 為啥要折騰搭建一個專屬圖床? 技術大佬寫博客都用 md 格式,要在多平臺發佈,圖片就得有外鏈 後續如博客遷移,國內博客網站如掘金,簡書,語雀等都做了防盜鏈,圖片無法遷移 2 為啥選擇CloudFlare R2 跳轉:https://dash.cloudflare.com/ 有白嫖額度 免費 CD ...