您好,登錄后才能下訂單哦!
這篇文章主要講解了“Vue3組件庫(kù)的環(huán)境如何配置”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“Vue3組件庫(kù)的環(huán)境如何配置”吧!
因?yàn)槲覀兪鞘褂?Vite+Ts 開(kāi)發(fā)的是 Vue3 組件庫(kù),所以我們需要安裝 typescript、vue3,同時(shí)項(xiàng)目將采用 Less 進(jìn)行組件庫(kù)樣式的管理
pnpm add vue@next typescript less -D -w
使用pnpm如果要安裝在項(xiàng)目根目錄下,則需要加-w
在根目錄執(zhí)行npx tsc --init
,然后就會(huì)自動(dòng)生成 ts 的配置文件tsconfig.json
,然后我們對(duì)其做一個(gè)更換
{ "compilerOptions": { "baseUrl": ".", "jsx": "preserve", "strict": true, "target": "ES2015", "module": "ESNext", "skipLibCheck": true, "esModuleInterop": true, "moduleResolution": "Node", "lib": ["esnext", "dom"] } }
tsconfig.json
暫時(shí)先做這樣一個(gè)配置,后續(xù)可能會(huì)有一定的調(diào)整
因?yàn)槲覀円_(kāi)發(fā)的是一個(gè) Vue3 組件庫(kù),肯定需要一個(gè) Vue3 項(xiàng)目來(lái)測(cè)試我們的組件庫(kù),所以這里將自己搭建一個(gè)基于 Vite 的 Vue3 項(xiàng)目來(lái)對(duì)組件進(jìn)行調(diào)試。因此我們?cè)诟夸浶陆ㄒ粋€(gè)叫 play 的文件夾然后初始化pnpm init
,后續(xù)的組件調(diào)試就在這個(gè)項(xiàng)目下進(jìn)行。接下來(lái)我們就開(kāi)始搭建一個(gè) Vue3+Vite 的項(xiàng)目
我們需要安裝vite
和vitejs/plugin-vue
插件,@vitejs/plugin-vue
插件是為了解析后綴為.vue
文件的。在 play 目錄下執(zhí)行
pnpm add vite @vitejs/plugin-vue -D
新建vite.config.ts
配置文件
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [vue()], });
@vitejs/plugin-vue
會(huì)默認(rèn)加載 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>
因?yàn)?vite 是基于 esmodule 的,所以script
標(biāo)簽中需要添加type="module"
新建app.vue
文件
<template> <div>啟動(dòng)測(cè)試</div> </template>
新建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" } }
因?yàn)?play 項(xiàng)目需要測(cè)試本地的組件庫(kù),所以也需要將 play 和我們的組件庫(kù)關(guān)聯(lián)在一起。修改一下pnpm-workspace.yaml
文件
packages: - "packages/**" - "play"
此時(shí) play 項(xiàng)目便可以安裝本地 packages 下的包了
最后執(zhí)行pnpm run dev
,便可啟動(dòng)我們的 play 項(xiàng)目
但是有一個(gè)問(wèn)題就是 ts 無(wú)法識(shí)別*.vue
文件,所以編譯器會(huì)報(bào)紅
此時(shí)我們需要新建一個(gè)聲明文件vue-shim.d.ts
,讓 ts 認(rèn)識(shí)*.vue
的文件
declare module '*.vue' { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any> }
此時(shí)報(bào)錯(cuò)便消失了。
感謝各位的閱讀,以上就是“Vue3組件庫(kù)的環(huán)境如何配置”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)Vue3組件庫(kù)的環(huán)境如何配置這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。