Vue3 組件庫的環(huán)境配置搭建過程
本篇文章將在項目中引入 typescript,以及手動搭建一個用于測試組件庫組件 Vue3 項目
因為我們是使用 Vite+Ts 開發(fā)的是 Vue3 組件庫,所以我們需要安裝 typescript、vue3,同時項目將采用 Less 進(jìn)行組件庫樣式的管理
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 項目來對組件進(jìn)行調(diào)試。因此我們在根目錄新建一個叫 play 的文件夾然后初始化pnpm init,后續(xù)的組件調(diào)試就在這個項目下進(jìn)行。接下來我們就開始搭建一個 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會默認(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>因為 vite 是基于 esmodule 的,所以script標(biāo)簽中需要添加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 認(rèn)識*.vue的文件
declare module '*.vue' {
import type { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>
}此時報錯便消失了。
到這里我們就完成一個 Vue3 項目的搭建,后續(xù)便可以在這個項目中進(jìn)行本地組件的調(diào)試了
本篇文章倉庫地址:配置環(huán)境 STAR! STAR! STAR!
到此這篇關(guān)于Vue3 組件庫的環(huán)境配置的文章就介紹到這了,更多相關(guān)Vue3 組件庫配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
骨架屏就是在頁面未渲染完成的時候，先用一些簡單的圖形大致勾勒出頁面的基本輪廓，給用戶帶來更好的體驗。這篇文章主要介紹了vue 移動端注入骨架屏,需要的朋友可以參考下2019-06-06
這篇文章主要給大家介紹了關(guān)于vue單文件中引用路徑處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要為大家介紹了keep?alive用法及原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue3使用dayjs以及dayjs日期工具類,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了如何利用vite快速搭建vue3項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了拿來即用的vue旋轉(zhuǎn)木馬組件demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue2 router 動態(tài)傳參,多個參數(shù)的實例
下面小編就為大家?guī)硪黄獀ue2 router 動態(tài)傳參,多個參數(shù)的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue 音樂App QQ音樂搜索列表最新接口跨域設(shè)置方法
這篇文章主要介紹了vue 音樂App QQ音樂搜索列表最新接口跨域設(shè)置方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
今天小編就為大家分享一篇淺談vue同一頁面中擁有兩個表單時,的驗證問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
淺談vue獲得后臺數(shù)據(jù)無法顯示到table上面的坑
這篇文章主要介紹了淺談vue獲得后臺數(shù)據(jù)無法顯示到table上面的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08