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

首頁

web前端

Vue.js

Vue3元件庫的環境怎麼配置

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 14, 2023 am 10:28 AM

因為我們是使用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中文網其他相關文章！

陳述

本文轉載於：亿速云。如有侵權，請聯絡admin@php.cn刪除

vue.js vs.反應：可伸縮性和可維護性May 10, 2025 am 12:24 AM

Vue.js和React在可擴展性和可維護性上的表現各有優勢。 1)Vue.js易於上手，適合小型項目，CompositionAPI提升了大型項目可維護性。 2)React適用於大型複雜項目，Hooks和虛擬DOM提高了性能和可維護性，但學習曲線較陡峭。

vue.js和React的未來：趨勢和預測May 09, 2025 am 12:12 AM

Vue.js和React的未來趨勢和預測分別是：1)Vue.js將在企業級應用中廣泛應用，並在服務端渲染和靜態站點生成方面有突破；2)React將在服務器組件和數據獲取方面創新，並進一步優化並發模式。

Netflix的前端：深入研究其技術堆棧May 08, 2025 am 12:11 AM

Netflix的前端技術棧主要基於React和Redux。 1.React用於構建高性能的單頁面應用，通過組件化開發提升代碼重用性和維護性。 2.Redux用於狀態管理，確保狀態變化可預測和可追踪。 3.工具鏈包括Webpack、Babel、Jest和Enzyme，確保代碼質量和性能。 4.性能優化通過代碼分割、懶加載和服務端渲染實現，提升用戶體驗。

vue.js和前端：構建交互式用戶界面May 06, 2025 am 12:02 AM

Vue.js是一種漸進式框架，適用於構建交互性強的用戶界面。其核心功能包括響應式系統、組件化開發和路由管理。 1)響應式系統通過Object.defineProperty或Proxy實現數據監聽，自動更新界面。 2)組件化開發允許將界面拆分為可複用的模塊。 3)VueRouter支持單頁面應用，提升用戶體驗。