vue3使用Vite打包組件庫(kù)從0搭建過(guò)程詳解
手動(dòng)搭建一個(gè)用于測(cè)試組件庫(kù)組件 Vue3 項(xiàng)目
本篇文章將在項(xiàng)目中引入 typescript,以及手動(dòng)搭建一個(gè)用于測(cè)試組件庫(kù)組件 Vue3 項(xiàng)目
因?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
初始化 ts
在根目錄執(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)整
搭建一個(gè)基于 vite 的 vue3 項(xiàng)目
因?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
新建vite.config.ts配置文件
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});
新建入口 html 文件
@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
新建app.vue文件
<template> <div>啟動(dòng)測(cè)試</div> </template>
入口 main.ts
新建main.ts
import { createApp } from "vue";
import App from "./app.vue";
const app = createApp(App);
app.mount("#app");
配置腳本啟動(dòng)項(xiàng)目
在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ò)便消失了。
到這里我們就完成一個(gè) Vue3 項(xiàng)目的搭建,后續(xù)便可以在這個(gè)項(xiàng)目中進(jìn)行本地組件的調(diào)試了
本篇文章倉(cāng)庫(kù)地址:配置環(huán)境
以上就是vue3使用Vite打包組件庫(kù)從0搭建過(guò)程詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3 Vite打包組件庫(kù)搭建的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- Vite?vue3多頁(yè)面入口打包以及部署踩坑實(shí)戰(zhàn)
- Vue3從0搭建Vite打包組件庫(kù)使用詳解
- 從0搭建Vue3組件庫(kù)之如何使用Vite打包組件庫(kù)
- vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮
- vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無(wú)法加載頁(yè)面的問(wèn)題及解決
- 關(guān)于vite+vue3打包部署問(wèn)題
- Vue3在history模式下如何通過(guò)vite打包部署白屏
- VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問(wèn)題解決方法
- VUE3項(xiàng)目VITE打包優(yōu)化的實(shí)現(xiàn)
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue上傳圖片組件的編寫(xiě)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況
這篇文章主要介紹了vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
基于vue實(shí)現(xiàn)分頁(yè)/翻頁(yè)組件paginator示例
本篇文章主要介紹了基于vue實(shí)現(xiàn)分頁(yè)/翻頁(yè)組件paginator示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
在使用 Vue.js 進(jìn)行開(kāi)發(fā)時(shí),模板中的 HTML 注釋通常會(huì)被 Vue 的編譯器自動(dòng)移除,然而,在某些情況下,我們可能希望保留這些注釋,例如為了調(diào)試、文檔生成或其他特殊需求,本文將詳細(xì)介紹如何在 Vue 渲染模板時(shí)保留 HTML 注釋,并提供相關(guān)的代碼示例,需要的朋友可以參考下2025-03-03
vue實(shí)現(xiàn)手機(jī)號(hào)碼抽獎(jiǎng)上下滾動(dòng)動(dòng)畫(huà)示例
本篇文章主要介紹了vue實(shí)現(xiàn)手機(jī)號(hào)碼抽獎(jiǎng)上下滾動(dòng)動(dòng)畫(huà)示例。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頂部菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家介紹了Vue3源碼分析組件掛載初始化props與slots實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Vue狀態(tài)機(jī)的開(kāi)啟與停止操作詳細(xì)講解
Vuex是專門(mén)為Vuejs應(yīng)用程序設(shè)計(jì)的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機(jī)快速了解與實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue項(xiàng)目用后端返回的文件流實(shí)現(xiàn)docx和pdf文件預(yù)覽
本文主要介紹了vue項(xiàng)目用后端返回的文件流實(shí)現(xiàn)docx和pdf文件預(yù)覽，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue3組件不發(fā)生變化如何監(jiān)聽(tīng)pinia中數(shù)據(jù)變化
這篇文章主要給大家介紹了關(guān)于Vue3組件不發(fā)生變化如何監(jiān)聽(tīng)pinia中數(shù)據(jù)變化的相關(guān)資料,pinia是Vue的存儲(chǔ)庫(kù),它允許您跨組件/頁(yè)面共享狀態(tài),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11