Vue3 組件庫的環(huán)境配置搭建過程
本篇文章將在項目中引入 typescript,以及手動搭建一個用于測試組件庫組件 Vue3 項目
因為我們是使用 Vite+Ts 開發(fā)的是 Vue3 組件庫,所以我們需要安裝 typescript、vue3,同時項目將采用 Less 進行組件庫樣式的管理
pnpm add vue@next typescript less -D -w
使用pnpm如果要安裝在項目根目錄下,則需要加-w
初始化 ts
在根目錄執(zhí)行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暫時先做這樣一個配置,后續(xù)可能會有一定的調(diào)整
搭建一個基于 vite 的 vue3 項目
因為我們要開發(fā)的是一個 Vue3 組件庫,肯定需要一個 Vue3 項目來測試我們的組件庫,所以這里將自己搭建一個基于 Vite 的 Vue3 項目來對組件進行調(diào)試。因此我們在根目錄新建一個叫 play 的文件夾然后初始化pnpm init,后續(xù)的組件調(diào)試就在這個項目下進行。接下來我們就開始搭建一個 Vue3+Vite 的項目
安裝插件
我們需要安裝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會默認加載 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
新建app.vue文件
<template> <div>啟動測試</div> </template>
入口 main.ts
新建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 和我們的組件庫關(guān)聯(lián)在一起。修改一下pnpm-workspace.yaml文件
packages: - "packages/**" - "play"
此時 play 項目便可以安裝本地 packages 下的包了
最后執(zhí)行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 項目的搭建,后續(xù)便可以在這個項目中進行本地組件的調(diào)試了
本篇文章倉庫地址:配置環(huán)境 STAR! STAR! STAR!
到此這篇關(guān)于Vue3 組件庫的環(huán)境配置的文章就介紹到這了,更多相關(guān)Vue3 組件庫配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
文章介紹了如何在Vue 3項目中使用Pinia進行狀態(tài)管理,主要內(nèi)容包括安裝Pinia、初始化、在main.ts中注冊和使用,以及在.vue的setup中使用state,文章還提到getters和actions的使用可以參考官方文檔,總結(jié)部分表達了作者希望得到大家支持的意愿2025-01-01
這篇文章主要介紹了vue?按需引入vant跟全局引入方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue之Vue.use的使用場景，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue--select組件的使用與禁用的實現(xiàn)代碼，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下2018-04-04
vue項目實例中用query傳參如何實現(xiàn)跳轉(zhuǎn)效果
這篇文章主要介紹了vue項目實例中用query傳參如何實現(xiàn)跳轉(zhuǎn)效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
今天給大家分享vue中tab 選項卡的一些套路，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-11
這篇文章介紹了使用vue-cli搭建腳手架的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
Vue使用antd中input組件去驗證輸入框輸入內(nèi)容(rules?案例)
這篇文章主要介紹了Vue使用antd中input組件去驗證輸入框輸入內(nèi)容-rules-案例,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
最近新項目中需要一個彈窗組件,所以我就做了一個,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3封裝一個符合思維且簡單實用的彈出層,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
Vue3使用hooks函數(shù)實現(xiàn)代碼復用詳解
這篇文章主要介紹了Vue3使用hooks函數(shù)實現(xiàn)代碼復用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復用性,?讓我們能在不同的組件中都利用hooks函數(shù)2022-06-06