Vue3コンポーネントライブラリの環境設定方法-Vue.js-php.cn

Vue3コンポーネントライブラリの環境設定方法

WBOY

リリース： 2023-05-14 10:28:05

転載

1039 人が閲覧しました

Vite Ts を使用して Vue3 コンポーネントライブラリを開発しているため、typescript と vue3 をインストールする必要があります。同時に、プロジェクトでは Less を使用してコンポーネントライブラリスタイルを管理します

pnpm add vue@next typescript less -D -w

ログイン後にコピー

Use pnpm ifプロジェクトのルートディレクトリにインストールする場合は、-w

Initialize ts

Execute 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 プロジェクトに基づいて vue3 プロジェクトを構築します。したがって、ルートディレクトリに play という名前の新しいフォルダーを作成し、pnpm init を初期化し、その後のコンポーネントのデバッグはこのプロジェクトの下で実行されます。次に、Vue3 Vite プロジェクトの構築を開始します

プラグインのインストール

viteとvitejs/plugin-vueplug-をインストールする必要がありますins,@vitejs/plugin-vueこのプラグインは、サフィックス .vue を持つファイルを解析するためのものです。再生ディレクトリで

pnpm add vite @vitejs/plugin-vue -D

ログイン後にコピー

Configuration vite.config.ts

Newvite.config.tsConfiguration file

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

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

ログイン後にコピー

Newentry HTML file# を実行します。

##@vitejs/plugin-vue デフォルトで再生中の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

New

app.vuefile

<template>
  <div>启动测试</div>
</template>

ログイン後にコピー

入口メインを追加する必要があります。 ts

New

main.ts

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

const app = createApp(App);

app.mount("#app");

ログイン後にコピー

構成スクリプト起動プロジェクト

内

package.jsonConfigurationscriptsScript

{
  "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 プロジェクトはローカルパッケージの下にパッケージをインストールできます

最後に実行

pnpm run dev、プレイプロジェクトを開始できます

Vue3コンポーネントライブラリの環境設定方法 ##しかし、ts が

*.vue

ファイルを認識できないという問題があるため、コンパイラは赤を報告します

##現時点では、ファイル Vue3コンポーネントライブラリの環境設定方法 * を ts に知らせるために、新しい宣言ファイル

vue-shim.d.ts

を作成する必要があります。 vue

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

ログイン後にコピー

この時点でエラーメッセージは表示されなくなります。

以上がVue3コンポーネントライブラリの環境設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。