从0搭建Vue3组件库(三): 组件库的环境配置
本篇文章将在项目中引入 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 的项目
安装插件
我们需要安装vite
和vitejs/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 项目
但是有一个问题就是 ts 无法识别*.vue
文件,所以编译器会报红
此时我们需要新建一个声明文件vue-shim.d.ts
,让 ts 认识*.vue
的文件
declare module '*.vue' {
import type { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>
}
此时报错便消失了。
到这里我们就完成一个 Vue3 项目的搭建,后续便可以在这个项目中进行本地组件的调试了
本篇文章仓库地址:配置环境 STAR! STAR! STAR!
从0搭建Vue3组件库(三): 组件库的环境配置的更多相关文章
- 从0搭建vue3组件库: 如何完整搭建一个前端脚手架?
相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等:本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kit ...
- CentOS7下搭建zabbix监控(三)——Zabbix监控服务配置
CentOS7下搭建zabbix监控(一)——Zabbix监控端配置 CentOS7下搭建zabbix监控(二)——Zabbix被监控端配置 (1).配置Zabbix监控Apache服务 主机名:yo ...
- VC 静态库与动态库(三)动态库创建与使用_隐式链接
动态库分为二种,一种隐式链接,另一种显示调用.不论哪种动态库,本质都是运行时动态加载 隐式链接:程序运行时,由编译系统自动加载动态库,然后根据程序的引入表进行重定位,当程序退出时自动卸载动态库 显示调 ...
- Ubuntu18.04 + CUDA9.0 + cuDNN7.3 + Tensorflow-gpu-1.12 + Jupyter Notebook深度学习环境配置
目录 一.Ubuntu18.04 LTS系统的安装 1. 安装文件下载 2. 制作U盘安装镜像文件 3. 开始安装 二.设置软件源的国内镜像 1. 设置方法 2.关于ubuntu镜像的小知识 三.Nv ...
- Ubuntu16.04 + CUDA9.0 + cuDNN7.3 + Tensorflow-gpu-1.12 + Jupyter Notebook 深度学习环境配置
目录 一.Ubuntu16.04 LTS系统的安装 二.设置软件源的国内镜像 1. 设置方法 2.关于ubuntu镜像的小知识 三.Nvidia显卡驱动的安装 1. 首先查看显卡型号和推荐的显卡驱动 ...
- Java开发学习(三十七)----SpringBoot多环境配置及配置文件分类
一.多环境配置 在工作中,对于开发环境.测试环境.生产环境的配置肯定都不相同,比如我们开发阶段会在自己的电脑上安装 mysql ,连接自己电脑上的 mysql 即可,但是项目开发完毕后要上线就需要该配 ...
- 从0搭建vue3组件库: Input组件
本篇文章将为我们的组件库添加一个新成员:Input组件.其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 ...
- 从0搭建Vue3组件库:button组件
button组件几乎是每个组件库都有的:其实实现一个button组件是很简单的.本篇文章将带你一步一步的实现一个button组件.如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScri ...
- 从0搭建vue3组件库:Shake抖动组件
先看下效果 其实就是个抖动效果组件,实现起来也非常简单.之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这 ...
- 从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag
今天看到一篇文章中提到了一个好用的工具release-it.刚好可以用在我正在开发的vue3组件库.纸上得来终觉浅,绝知此事要躬行,说干就干,下面就介绍如何将release-it应用到实际项目中,让组 ...
随机推荐
- python语法之注释
引言 注释的最大作用是提高程序的可读性,在开发过程中非常有必要加上注释.Python 支持两种类型的注释,分别是单行注释和多行注释. 1 单行注释 Python 使用井号#作为单行注释的符号,语法格式 ...
- Dubbo架构设计与源码解析(三)责任链模式
作者:周可强 一.责任链模式简介 1.责任链模式定义 责任链(Chain of Responsibility)模式的定义:为了避免请求发送者与多个请求处理者耦合在一起,于是将所有请求的处理者通过前一对 ...
- Python免杀过360
本文章仅供参考学习 作者:mantou 博客地址:https://www.cnblogs.com/mantou0/ 分离免杀 这个我就不多说了,效果确实不错,网上关于分离免杀的也有很多文章 不分离过3 ...
- 记一次在CentOS上安装GitLab的流程
1.本次环境说明 系统:Centos7.6 IP地址:http://192.168.3.213: 最低配置要求:2核心CPU和4G内存,这是因为[GitLab]的整体运行包含了多个进程 2.自行安装 ...
- Spark详解(08) - Spark(3.0)内核解析和源码欣赏
Spark详解(08) - Spark(3.0)内核解析和源码欣赏 源码全流程 Spark提交流程(YarnCluster) Spark通讯架构 Spark任务划分 Task任务调度 Shuffle原 ...
- python之路53 ajax补充返回序列化数据,多对多创建三种方式,django内置序列化组件(drf前身),批量操作数据,自定义分页器,form组件
ajax补充说明 主要是针对回调函数args接收到的响应数据 1.后端request.is_ajax() 用于判断当前请求是否由ajax发出 2.后端返回的三板斧都会被args接收不再影响整个浏览器页 ...
- [WPF]Win10便签软件
项目地址 Github:项目地址 软件截图 项目中用到的技术和问题 [WPF]限制程序单例运行 [WPF]创建系统栏小图标 [WPF]程序随系统自启动 [WPF]xml序列化以及反序列化数据 [WPF ...
- MySQL 留存率和复购率的场景分析
实际工作中常见的业务场景是求次日留存率,还有一些会对次日留存率增加限制,例如求新用户的次日留存率或者求活跃用户留存率.另外,留存率和复购率看起来都是统计重复出现的概率,但实际求解方法是不一样的. [场 ...
- js函数中的this指向
写代码的时候遇到这个问题了,在这里复习一下 非箭头函数 非箭头函数的this指向比较好理解,就是调用这个函数的对象,举个栗子: var obj = { foo: { bar: 3, foo:{ bar ...
- SQLSERVER 的四个事务隔离级别到底怎么理解?
一:背景 1. 讲故事 在有关SQLSERVER的各种参考资料中,经常会看到如下四种事务隔离级别. READ UNCOMMITTED READ COMMITTED SERIALIZABLE REPEA ...