手动搭建一个用于测试组件库组件 Vue3 项目
本篇 文章 将在项目中引入 ty PE script,以及手动搭建一个用于测试组件库组件 Vue3 项目
因为我们是使用 V IT e+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript、vue3,同时项目将采用 Less 进行组件库样式的管理
pnpm add vue@next typescript less -D -w
使用pnpm如果要安装在项目根目录下,则需要加 -w
初始化 ts
在根目录执行 npx tsc - -i nit ,然后就会自动生成 ts 的配置文件 ts config .json ,然后我们对其做一个更换
{
"compilerOptions": {
"baseUrl": ".",
"jsx": " PR eserve",
"strict": true,
"t arg et": "ES2015",
"module": "ESNext",
"skipLibCheck": true,
" ESM odul ei nterop": true,
"moduleResolution": "Node",
"lib": ["esnext", "dom"]
}
}
tsconfig.json 暂时先做这样一个配置,后续可能会有一定的 调整
搭建一个基于 vite 的 vue3 项目
因为我们要开发的是一个 Vue3 组件库,肯定需要一个 Vue3 项目来测试我们的组件库,所以这里将自己搭建一个基于 Vite 的 Vue3 项目来对组件进行调试。因此我们在根目录新建一个叫 play 的文件夹然后初始化 pnpm init ,后续的组件调试就在这个项目下进行。接下来我们就 开始 搭建一个 Vue3+Vite 的项目
安装插件
我们需要安装 vite 和 vitejs/plu gin -vue 插件, @vitejs/plugin-vue 插件是为 了解 析后缀为 .vue 文件的。在 play 目录下执行
pnpm add vite @vitejs/plugin-vue -D
配置 vite.config.ts
新建 vite.config.ts 配置文件
import { define Config } From "vite";
import vue f rom "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});
新建入口 ht ML 文件
@vitejs/plugin-vue 会默认加载 play 下的 index.html
<!DOCTYPE html>
<html lang="en">
<head>
< ;m eta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE= Edge " />
<meta n am e="viewport" content="width=device-width, initial -s cale=1.0" />
<title>play</title>
</head>
<body>
<div id="app"></div>
<script src="m ai n.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"
},
"keywo rds ": [],
"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 { Define component } from "vue";
const component: DefineComponent<{}, {}, any>
}
此时报错便 消失 了。
到这里我们就完成一个 Vue3 项目的搭建,后续便可以在这个项目中进行本地组件的调试了
本篇文章仓库地址: 配置环境
以上就是vue3使用Vite打包组件库从0搭建过程详解的详细内容，更多关于vue3 Vite打包组件库搭建的资料请关注其它相关文章！
您可能感兴趣的文章: Vue3从0搭建Vite打包组件库使用详解 Vue3+Vite项目按需自动导入配置以及一些常见问题修复 使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程 vue3+vite+ts使用monaco-editor编辑器的简单步骤 Vue3中Vite和Vue-cli的特点与区别详解 vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案
总结
以上是 为你收集整理的 vue3使用Vite打包组件库从0搭建过程详解 全部内容，希望文章能够帮你解决 vue3使用Vite打包组件库从0搭建过程详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于vue3使用Vite打包组件库从0搭建过程详解的详细内容...