技術文章 » 從0搭建Vue3元件庫(三): 元件庫的環境設定

從0搭建Vue3元件庫(三): 元件庫的環境設定

2023-03-03 12:02:54

本篇文章將在專案中引入 typescript,以及手動搭建一個用於測試元件庫元件 Vue3 專案

因為我們是使用 Vite+Ts 開發的是 Vue3 元件庫,所以我們需要安裝 typescript、vue3,同時專案將採用 Less 進行元件庫樣式的管理

pnpm add vue@next typescript less -D -w

使用pnpm如果要安裝在專案根目錄下,則需要加-w

初始化 ts

在根目錄執行npx tsc --init,然後就會自動生成 ts 的組態檔tsconfig.json,然後我們對其做一個更換

{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "preserve",
    "strict": true,
    "target": "ES2015",
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "moduleResolution": "Node",
    "lib": ["esnext", "dom"]
  }
}

tsconfig.json暫時先做這樣一個設定,後續可能會有一定的調整

搭建一個基於 vite 的 vue3 專案

因為我們要開發的是一個 Vue3 元件庫,肯定需要一個 Vue3 專案來測試我們的元件庫,所以這裡將自己搭建一個基於 Vite 的 Vue3 專案來對元件進行偵錯。因此我們在根目錄新建一個叫 play 的資料夾然後初始化pnpm init,後續的元件偵錯就在這個專案下進行。接下來我們就開始搭建一個 Vue3+Vite 的專案

安裝外掛

我們需要安裝vite和vitejs/plugin-vue外掛,@vitejs/plugin-vue外掛是為了解析字尾為.vue檔案的。在 play 目錄下執行

pnpm add vite @vitejs/plugin-vue -D

設定 vite.config.ts

新建vite.config.ts組態檔

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

新建入口 html 檔案

@vitejs/plugin-vue會預設載入 play 下的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>play</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="main.ts" type="module"></script>
  </body>
</html>

因為 vite 是基於 esmodule 的,所以script標籤中需要新增type="module"

app.vue

新建app.vue檔案

<template>
  <div>啟動測試</div>
</template>

入口 main.ts

新建main.ts

import { createApp } from "vue";
import App from "./app.vue";

const app = createApp(App);

app.mount("#app");

設定指令碼啟動專案

在package.json設定scripts指令碼

{
  "name": "play",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.1.1"
  }
}

因為 play 專案需要測試原生的元件庫,所以也需要將 play 和我們的元件庫關聯在一起。修改一下pnpm-workspace.yaml檔案

packages:
  - "packages/**"
  - "play"

此時 play 專案便可以安裝本地 packages 下的包了

最後執行pnpm run dev,便可啟動我們的 play 專案

但是有一個問題就是 ts 無法識別*.vue檔案,所以編譯器會報紅

此時我們需要新建一個宣告檔案vue-shim.d.ts,讓 ts 認識*.vue的檔案

declare module '*.vue' {
    import type { DefineComponent } from "vue";
    const component: DefineComponent<{}, {}, any>
}

此時報錯便消失了。

到這裡我們就完成一個 Vue3 專案的搭建,後續便可以在這個專案中進行本地元件的偵錯了

本篇文章倉庫地址:設定環境 STAR! STAR! STAR!