前言
其实这个从零有点歧义，因为本质上是要基于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作为包管理的工具，如果你使用其他的工具，请访问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
完美，等待命令执行完成，现在我们已经成功创建了一个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+单击 访问链接，这时候不出意外的话，您将会看到一个告诉你项目创建成功的页面，界面如下图所示，如果你现在看到的和下图一样，那么恭喜你，成功创建了一个基于 vite+vue3 的项目。
配置UI库
在基础的框架安装好之后，现在让我们来一起配置下需要的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
因为我们使用的是
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 的按需引入，在下一个章节，我们将会对项目进行一些规则的配置和约束；
