Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengkonfigurasi persekitaran perpustakaan komponen Vue3
Bagaimana untuk mengkonfigurasi persekitaran perpustakaan komponen Vue3
- WBOYke hadapan
- 2023-05-14 10:28:051002semak imbas
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
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"]
}
}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
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()],
});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>Oleh kerana vite adalah berdasarkan esmodule, anda perlu menambah scripttype="module"
app.vueFail
<template> <div>启动测试</div> </template>
Entry main.ts
Baharumain.ts
import { createApp } from "vue";
import App from "./app.vue";
const app = createApp(App);
app.mount("#app");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"
}
}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"
Kini projek main boleh memasang pakej di bawah pakej tempatan
Akhirnya laksanakan pnpm run dev untuk memulakan projek main kami
Tetapi terdapat masalah yang ts tidak dapat mengenali fail *.vue, jadi pengkompil akan melaporkan mesej merah
Pada masa ini kita perlu mencipta yang baharu Isytiharkan fail vue-shim.d.ts untuk membenarkan ts mengenali fail *.vue
declare module '*.vue' {
import type { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>
} 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!