Bagaimana untuk mengkonfigurasi persekitaran perpustakaan komponen Vue3-View.js-php.cn

Bagaimana untuk mengkonfigurasi persekitaran perpustakaan komponen Vue3

WBOY

Lepaskan： 2023-05-14 10:28:05

ke hadapan

1039 orang telah melayarinya

Oleh kerana kami menggunakan Vite+Ts untuk membangunkan perpustakaan komponen Vue3, kami perlu memasang skrip taip dan vue3 Pada masa yang sama, projek akan menggunakan Less untuk mengurus gaya perpustakaan komponen

pnpm add vue@next typescript less -D -w

Salin selepas log masuk

Gunakan pnpm. jika anda ingin memasangnya dalam projek Dalam direktori akar, anda perlu menambah -w

untuk memulakan ts

dan melaksanakan npx tsc --init dalam direktori akar, dan kemudian ts fail konfigurasi tsconfig.json akan dijana secara automatik, dan kemudian kami akan melakukannya Penggantian

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

Salin selepas log masuk

tsconfig.jsonBuat masa ini, buat konfigurasi sedemikian, mungkin terdapat pelarasan tertentu pada masa hadapan

Bina projek vue3 berdasarkan vite

Oleh kerana kami ingin membangunkan Ia adalah perpustakaan komponen Vue3 Kami pasti memerlukan projek Vue3 untuk menguji perpustakaan komponen kami, jadi di sini kami akan membina projek Vue3 berdasarkan Vite untuk menyahpepijat komponen. Oleh itu, kami mencipta folder baharu yang dipanggil main dalam direktori akar dan memulakan pnpm init penyahpepijatan komponen seterusnya akan dijalankan di bawah projek ini. Seterusnya kita mula membina projek Vue3+Vite

Pasang pemalam

Kita perlu memasang pemalam vite dan vitejs/plugin-vue The @vitejs/plugin-vue pemalam adalah untuk menghuraikan akhiran sebagai fail .vue. Laksanakan

pnpm add vite @vitejs/plugin-vue -D

Salin selepas log masuk

Konfigurasikan vite.config.ts

Buat vite.config.tsfail konfigurasi dalam direktori main

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

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

Salin selepas log masuk

Buat fail html entri baharu

@vitejs/plugin-vue index.html yang sedang dimainkan akan dimuatkan secara lalai

<!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>

Salin selepas log masuk

Oleh kerana vite adalah berdasarkan esmodule, anda perlu menambah scripttype="module"

app.vue

Baharu dalam teg

app.vueFail

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

Salin selepas log masuk

Entry main.ts

Baharumain.ts

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

const app = createApp(App);

app.mount("#app");

Salin selepas log masuk

Projek permulaan skrip konfigurasi

Dalam package.jsonKonfigurasiscripts Skrip

{
  "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"
  }
}

Salin selepas log masuk

Oleh kerana projek mainan perlu menguji perpustakaan komponen tempatan, ia juga perlu mengaitkan mainan dengan perpustakaan komponen kami. Ubah suai fail pnpm-workspace.yaml

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

Salin selepas log masuk

Kini projek main boleh memasang pakej di bawah pakej tempatan

Akhirnya laksanakan pnpm run dev untuk memulakan projek main kami

Bagaimana untuk mengkonfigurasi persekitaran perpustakaan komponen Vue3

Tetapi terdapat masalah yang ts tidak dapat mengenali fail *.vue, jadi pengkompil akan melaporkan mesej merah

Bagaimana untuk mengkonfigurasi persekitaran perpustakaan komponen Vue3

Pada masa ini kita perlu mencipta yang baharu Isytiharkan fail vue-shim.d.ts untuk membenarkan ts mengenali fail *.vue

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

Salin selepas log masuk

dan ralat akan hilang.

Atas ialah kandungan terperinci Bagaimana untuk mengkonfigurasi persekitaran perpustakaan komponen Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!