从零开始写一套广告组件【一】基础框架搭建&UI组件配置

前言

其实这个从零有点歧义，因为本质上是要基于tdesign-vue-next来进行二次封装为一套广告UI组件库，在我们一起搭建UI库之前，先让我们对以下内容做出共识：

1. 复制命令的时候请不要携带上`$`符号
2. 请保证设备上已经安装了`Node.js`，推荐使用 `nvm` 进行管理

内容

vue：https://cn.vuejs.org/guide/quick-start.html

tdesign-vue-next：https://tdesign.tencent.com/vue-next/overview

创建项目

首先让我们使用 vue 的脚手架来搭建一个全新的项目。

$ pnpm create vue@latest   

执行上面的命令后，会有接下来的一段交互：

$ pnpm create vue@latest          
.../192059603b6-365f                     | Progress: resolved 1, reused 0, downl.../192059603b6-365f                     |   +1 +
.../192059603b6-365f                     | Progress: resolved 1, reused 0, downl.../192059603b6-365f                     | Progress: resolved 1, reused 1, downloaded 0, added 1, done

Vue.js - The Progressive JavaScript Framework

✔ 請輸入專案名稱： … eaui
✔ 是否使用 TypeScript？ … 否 / 是
✔ 是否啟用 JSX 支援？ … 否 / 是
✔ 是否引入 Vue Router 進行單頁應用程式開發？ … 否 / 是
✔ 是否引入 Pinia 用於狀態管理？ … 否 / 是
✔ 是否引入 Vitest 用於單元測試 … 否 / 是
✔ 是否要引入一款端對端（End to End）測試工具？ › Playwright
✔ 是否引入 ESLint 用於程式碼品質檢測？ … 否 / 是
✔ 是否引入 Prettier 用於程式碼格式化？ … 否 / 是
✔ 是否引入 Vue DevTools 7 擴充元件以協助偵錯？（試驗性功能） … 否 / 是

正在建置專案 /Users/wangyang/Documents/eaui...

專案建置完成，可執行以下命令：

  cd eaui
  pnpm install
  pnpm format
  pnpm dev                        

ok，现在我们已经成功创建了一个Vue3的项目，现在让我们来执行上述的命令：

$ pnpm install
WARN  5 deprecated subdependencies found: @humanwhocodes/config-array@0.13.0, @humanwhocodes/object-schema@2.0.3, glob@7.2.3, inflight@1.0.6, rimraf@3.0.2
Packages: +431
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 468, reused 396, downloaded 35, added 431, done
node_modules/.pnpm/vue-demi@0.14.10_vue@3.5.6_typescript@5.4.5_/node_modules/vue-demi: Running postinstall script, done in 74ms

dependencies:
+ pinia 2.2.2
+ vue 3.5.6

devDependencies:
+ @playwright/test 1.47.1
+ @rushstack/eslint-patch 1.10.4
+ @tsconfig/node20 20.1.4
+ @types/jsdom 21.1.7
+ @types/node 20.16.5 (22.5.5 is available)
+ @vitejs/plugin-vue 5.1.4
+ @vitejs/plugin-vue-jsx 4.0.1
+ @vue/eslint-config-prettier 9.0.0
+ @vue/eslint-config-typescript 13.0.0
+ @vue/test-utils 2.4.6
+ @vue/tsconfig 0.5.1
+ eslint 8.57.1 (9.10.0 is available)
+ eslint-plugin-playwright 1.6.2
+ eslint-plugin-vue 9.28.0
+ jsdom 24.1.3 (25.0.0 is available)
+ npm-run-all2 6.2.3
+ prettier 3.3.3
+ typescript 5.4.5 (5.6.2 is available)
+ vite 5.4.6
+ vite-plugin-vue-devtools 7.4.5
+ vitest 1.6.0 (2.1.1 is available)
+ vue-tsc 2.1.6

Done in 5.6s

$ pnpm format
> eaui@0.0.0 format /Users/wangyang/Documents/eaui
> prettier --write src/

src/App.vue 58ms (unchanged)
src/assets/base.css 7ms (unchanged)
src/assets/main.css 2ms (unchanged)
src/components/__tests__/HelloWorld.spec.ts 9ms (unchanged)
src/components/HelloWorld.vue 23ms (unchanged)
src/components/icons/IconCommunity.vue 2ms (unchanged)
src/components/icons/IconDocumentation.vue 1ms (unchanged)
src/components/icons/IconEcosystem.vue 2ms (unchanged)
src/components/icons/IconSupport.vue 1ms (unchanged)
src/components/icons/IconTooling.vue 2ms (unchanged)
src/components/TheWelcome.vue 7ms (unchanged)
src/components/WelcomeItem.vue 5ms (unchanged)
src/main.ts 3ms (unchanged)
src/stores/counter.ts 3ms (unchanged)

$ pnpm dev
> eaui@0.0.0 dev /Users/wangyang/Documents/eaui
> vite


  VITE v5.4.6  ready in 862 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help

现在让我们 Cmd+单击 访问链接，您将会看到一个告诉你项目创建成功的页面：

配置UI库

安装

现在让我们来一起安装 tdesign-vue-next

$ pnpm i tdesign-vue-next
WARN  5 deprecated subdependencies found: @humanwhocodes/config-array@0.13.0, @humanwhocodes/object-schema@2.0.3, glob@7.2.3, inflight@1.0.6, rimraf@3.0.2
Already up to date
Progress: resolved 481, reused 444, downloaded 0, added 0, done
Done in 639ms

配置

现在让我们来配置下插件 unplugin-vue-components 和 unplugin-auto-import ，通过插件实现按需引用使用。

$ pnpm add -D unplugin-vue-components unplugin-auto-import 
 WARN  5 deprecated subdependencies found: @humanwhocodes/config-array@0.13.0, @humanwhocodes/object-schema@2.0.3, glob@7.2.3, inflight@1.0.6, rimraf@3.0.2
Packages: +13
+++++++++++++
Progress: resolved 494, reused 453, downloaded 4, added 13, done

devDependencies:
+ unplugin-auto-import 0.18.3
+ unplugin-vue-components 0.27.4

Done in 1.1s

vite

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';
export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [TDesignResolver({
        library: 'vue-next'
      })],
    }),
    Components({
      resolvers: [TDesignResolver({
        library: 'vue-next'
      })],
    }),
  ],
};

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css';

const app = createApp(App)

app.use(createPinia())

app.mount('#app')

验证

现在让我们在 App.vue 中，尝试下使用 Button 的UI组件，看是否能正常展示。

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
  <!-- 验证组件导入 -->
  <t-button>按钮</t-button>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

总结

好了，在这一章我们学会了如何使用vue的脚手架创建项目，并通过插件 unplugin-vue-components 和 unplugin-auto-import 来配置 tdesign-vue-next 的按需引入。