溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue3組件庫的環境如何配置”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue3組件庫的環境如何配置”吧！
因為我們是使用 Vite+Ts 開發的是 Vue3 組件庫,所以我們需要安裝 typescript、vue3,同時項目將采用 Less 進行組件庫樣式的管理
pnpm add vue@next typescript less -D -w
使用pnpm如果要安裝在項目根目錄下,則需要加-w
在根目錄執行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暫時先做這樣一個配置,后續可能會有一定的調整
因為我們要開發的是一個 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配置文件
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});@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文件
<template> <div>啟動測試</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"
}
}因為 play 項目需要測試本地的組件庫,所以也需要將 play 和我們的組件庫關聯在一起。修改一下pnpm-workspace.yaml文件
packages: - "packages/**" - "play"
此時 play 項目便可以安裝本地 packages 下的包了
最后執行pnpm run dev,便可啟動我們的 play 項目
但是有一個問題就是 ts 無法識別*.vue文件,所以編譯器會報紅
此時我們需要新建一個聲明文件vue-shim.d.ts,讓 ts 認識*.vue的文件
declare module '*.vue' {
import type { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>
}此時報錯便消失了。
感謝各位的閱讀，以上就是“Vue3組件庫的環境如何配置”的內容了，經過本文的學習后，相信大家對Vue3組件庫的環境如何配置這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
