Vue3 组件库的环境配置搭建过程

作者:迪迪滴 时间:2024-04-30 10:19:58 

本篇文章将在项目中引入 typescript,以及手动搭建一个用于测试组件库组件 Vue3 项目

因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript、vue3,同时项目将采用 Less 进行组件库样式的管理

pnpm add vue@next typescript less -D -w

使用pnpm如果要安装在项目根目录下,则需要加-w

初始化 ts

在根目录执行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暂时先做这样一个配置,后续可能会有一定的调整

搭建一个基于 vite 的 vue3 项目

因为我们要开发的是一个 Vue3 组件库,肯定需要一个 Vue3 项目来测试我们的组件库,所以这里将自己搭建一个基于 Vite 的 Vue3 项目来对组件进行调试。因此我们在根目录新建一个叫 play 的文件夹然后初始化pnpm init,后续的组件调试就在这个项目下进行。接下来我们就开始搭建一个 Vue3+Vite 的项目

安装插件

我们需要安装vitevitejs/plugin-vue插件,@vitejs/plugin-vue插件是为了解析后缀为.vue文件的。在 play 目录下执行

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 和我们的组件库关联在一起。修改一下pnpm-workspace.yaml文件

packages:
 - "packages/**"
 - "play"

此时 play 项目便可以安装本地 packages 下的包了

最后执行pnpm run dev,便可启动我们的 play 项目

Vue3 组件库的环境配置搭建过程

但是有一个问题就是 ts 无法识别*.vue文件,所以编译器会报红

Vue3 组件库的环境配置搭建过程

此时我们需要新建一个声明文件vue-shim.d.ts,让 ts 认识*.vue的文件

declare module '*.vue' {
   import type { DefineComponent } from "vue";
   const component: DefineComponent<{}, {}, any>
}

此时报错便消失了。

到这里我们就完成一个 Vue3 项目的搭建,后续便可以在这个项目中进行本地组件的调试了

本篇文章仓库地址:配置环境 STAR! STAR! STAR!

来源:https://www.cnblogs.com/zdsdididi/p/17174791.html

标签:Vue3,组件库
0
投稿

猜你喜欢

  • SQL Server Alert发送告警邮件少了的原因

    2024-01-27 14:15:38
  • 月影:JavaScript王者归来

    2008-08-05 17:18:00
  • react native环境安装流程

    2023-07-02 10:22:36
  • win7安装python生成随机数代码分享

    2021-05-18 10:47:39
  • Python包和模块的分发详细介绍

    2021-10-06 07:25:32
  • Python 中判断列表是否为空的方法

    2023-10-25 13:19:12
  • 深入了解如何基于Python读写Kafka

    2021-02-13 09:33:09
  • Python操作Redis之设置key的过期时间实例代码

    2022-02-11 06:13:05
  • PHP session 会话处理函数

    2023-11-15 14:55:53
  • Python 使用tf-idf算法计算文档关键字权重并生成词云的方法

    2022-03-28 13:09:18
  • TensorFlow可视化工具TensorBoard默认图与自定义图

    2023-03-03 06:53:22
  • Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法

    2022-11-16 20:48:41
  • PyTorch的深度学习入门之PyTorch安装和配置

    2022-12-27 22:20:34
  • python实现图片中文字分割效果

    2023-03-11 16:39:42
  • Python代码块及缓存机制原理详解

    2023-07-02 08:12:07
  • SQL子查询全接触

    2007-08-20 10:51:00
  • MySQL 数据库范式化设计理论总结

    2024-01-12 17:29:07
  • 使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示

    2022-08-08 05:41:40
  • Python enumerate遍历数组示例应用

    2023-06-10 16:59:26
  • 需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析

    2023-11-19 02:10:43
  • asp之家 网络编程 m.aspxhome.com