Vue3元件庫的環境怎麼配置-Vue.js-PHP中文網

Vue3元件庫的環境怎麼配置

WBOY

發布： 2023-05-14 10:28:05

轉載

1009 人瀏覽過

因為我們是使用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 專案

Vue3元件庫的環境怎麼配置

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

Vue3元件庫的環境怎麼配置

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

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

登入後複製

此時報錯便消失了。

以上是Vue3元件庫的環境怎麼配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！