Vue3 組件庫(kù)的環(huán)境配置搭建過(guò)程
本篇文章將在項(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)境 STAR! STAR! STAR!
到此這篇關(guān)于Vue3 組件庫(kù)的環(huán)境配置的文章就介紹到這了,更多相關(guān)Vue3 組件庫(kù)配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3+Ts使用pinia方式(vue-lic搭建項(xiàng)目)
文章介紹了如何在Vue 3項(xiàng)目中使用Pinia進(jìn)行狀態(tài)管理,主要內(nèi)容包括安裝Pinia、初始化、在main.ts中注冊(cè)和使用,以及在.vue的setup中使用state,文章還提到getters和actions的使用可以參考官方文檔,總結(jié)部分表達(dá)了作者希望得到大家支持的意愿2025-01-01
這篇文章主要介紹了vue?按需引入vant跟全局引入方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue之Vue.use的使用場(chǎng)景及說(shuō)明
這篇文章主要介紹了vue之Vue.use的使用場(chǎng)景，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue select組件的使用與禁用實(shí)現(xiàn)代碼
這篇文章主要介紹了vue--select組件的使用與禁用的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下2018-04-04
vue項(xiàng)目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果
這篇文章主要介紹了vue項(xiàng)目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中tab選項(xiàng)卡的實(shí)現(xiàn)思路
今天給大家分享vue中tab 選項(xiàng)卡的一些套路，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-11
這篇文章介紹了使用vue-cli搭建腳手架的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容(rules?案例)
這篇文章主要介紹了Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容-rules-案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
用vue3封裝一個(gè)符合思維且簡(jiǎn)單實(shí)用的彈出層
最近新項(xiàng)目中需要一個(gè)彈窗組件,所以我就做了一個(gè),下面這篇文章主要給大家介紹了關(guān)于如何利用vue3封裝一個(gè)符合思維且簡(jiǎn)單實(shí)用的彈出層,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Vue3使用hooks函數(shù)實(shí)現(xiàn)代碼復(fù)用詳解
這篇文章主要介紹了Vue3使用hooks函數(shù)實(shí)現(xiàn)代碼復(fù)用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復(fù)用性,?讓我們能在不同的組件中都利用hooks函數(shù)2022-06-06