搭建開發環境
Vite初始化
新建一個空的文件夾，比如叫 Vue3UI ，然後使用命令行在此文件夾下使用npm初始化：
npm init
回車後，我們再安裝vite（我們這裏選擇使用Vite進行打包，使用別的也類似）：
npm install --save-dev vite
根目錄創建 index.html 文件，裏面內容如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Vue3 UI</title>
</head>
<body>
Hello Vue3 UI!
</body>
</html>現在，在之前生成的 package.json 中添加vite啓動命令：
{
"script": {
"dev": "vite"
}
}現在，試着運行Vite吧：
npm run dev
看見類似下面的語句，就説明運行成功了：
VITE v5.3.4 ready in 841 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
然後瀏覽器訪問即可：
至此，Vite就準備好了。
小結：Vite其實簡單的理解就是一個HTTP服務器，只不過，可以通過安裝插件等方式，對一些文件等進行"調整"。
測試TS代碼
在正式開發Vue組件前，我們先來試試普通的TS代碼是否可以正常運行。
創建文件 index.ts：
const str: String = 'Hello Vue3 UI';
console.log(str);在 index.html 的body標籤中引入：
<script src="./index.ts"></script>保存後刷新瀏覽器，可以在控制枱中看到如圖顯示，説明 TS 可以正常使用：
添加對Vue的支持
首先，我們需要安裝Vue（這裏安裝的是vue3版本，因為vue發佈後由用户安裝，因此這裏安裝到dev下，下同）：
npm install --save-dev vue
下面，我們來具體説明，以一個Button為例。
Render函數
創建 src/Button/index.ts 文件：
import { defineComponent, h } from 'vue';
export default defineComponent({
name: 'Button',
render() {
return h("button", null, "一個按鈕（點擊我）");
}
});在 index.html 中增加根容器，展示組件：
<div id="app"></div>在 index.ts 中創建 Vue 實例並使用組件：
import { createApp } from 'vue';
import Button from './button';
createApp(Button).mount('#app');啓動項目後，瀏覽器沒有顯示按鈕，而且控制枱報錯：
Uncaught SyntaxError: Cannot use import statement outside a module (at index.ts:1:1)
因為 index.ts 中使用了 es6 的語法，所以在 index.html 中引入時需要指定為模塊導入：
<script src="./index.ts" type="module"></script>修改後按鈕顯示了，但是在瀏覽器控制枱會有以下告警：
怎麼辦？安裝下面插件：
npm install --save-dev @vitejs/plugin-vue
新建vite.config.ts文件並寫入如下內容：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue() // VUE插件
]
});
再次啓動時，命令行會如下警告：
在 package.json 中增加配置：
{
"type": "module"
}運行項目，可以看到按鈕，啓動時和瀏覽器控制枱就都沒有警告了：
單文件組件
也就是使用 Button.vue 文件來編寫組件。
上一步我們已經添加了 @vitejs/plugin-vue 插件，所以這裏其實已經支持了。
JSX 組件
首先需要安裝支持jsx的插件：
npm install --save-dev @vitejs/plugin-vue-jsx
然後修改 vite.config.ts 配置：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
plugins: [
vue(), // VUE 插件
vueJsx() // JSX 插件
],
});剛剛的按鈕，就可以改成 src/Button/index.tsx ：
import { defineComponent, h } from 'vue';
export default defineComponent({
name: 'Button',
render() {
return <button>一個按鈕（點擊我）</button>;
}
});封裝庫文件
組件庫需要支持兩種導入方式：
- 完整引入 ：一次性引入全部組件，通過 Vue.use 以 Vue 插件的方式引入；
- 按需引入 ：導入單個組件，使用Vue.component 註冊。
創建入口文件 src/index.ts，內容如下：
import { App } from "vue";
import UiButton from "./Button";
export { UiButton }; // 導出單獨組件
export default { // 實現 install 方法
install(app: App) {
app.component(UiButton.name as string, UiButton);
}
}現在，需要在 vite.config.ts 文件中配置build：
{
build: {
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue"
}
}
},
minify: false, // 可以指定壓縮工具terser
sourcemap: true, // 是否生成 sourcemap 文件
cssCodeSplit: true, // css 代碼分割
lib: {
entry: "./src/index.ts",
name: "Vue3UI",
fileName: "vue3ui",
formats: ["es", "umd", "iife"] // 輸出常用的三種模塊類型
}
}
}在 package.json 增加 build 命令打包：
{
"script": {
"build": "vite build"
}
}運行 npm run build 即可完成打包。
