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组件库的环境怎么配置的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Vue3如何实现刷新页面局部内容
May 26, 2023 pm 05:31 PM
想要实现页面的局部刷新，我们只需要实现局部组件（dom）的重新渲染。在Vue中，想要实现这一效果最简便的方式方法就是使用v-if指令。在Vue2中我们除了使用v-if指令让局部dom的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。如下图所示，如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载，并展示对应的加载状态。由于Vue3.X中scriptsetup语法中组件内守卫只有o
vue3项目中怎么使用tinymce
May 19, 2023 pm 08:40 PM
tinymce是一个功能齐全的富文本编辑器插件，但在vue中引入tinymce并不像别的Vue富文本插件一样那么顺利，tinymce本身并不适配Vue，还需要引入@tinymce/tinymce-vue，并且它是国外的富文本插件，没有通过中文版本，需要在其官网下载翻译包(可能需要翻墙)。1、安装相关依赖npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下载中文包3.引入皮肤和汉化包在项目public文件夹下新建tinymce文件夹，将下载的
vue3+vite:src使用require动态导入图片报错怎么解决
May 21, 2023 pm 03:16 PM
vue3+vite:src使用require动态导入图片报错和解决方法vue3+vite动态的导入多张图片vue3如果使用的是typescript开发，就会出现require引入图片报错，requireisnotdefined不能像使用vue2这样imgUrl:require(’…/assets/test.png’)导入，是因为typescript不支持require所以用import导入，下面介绍如何解决：使用awaitimport
Vue3怎么解析markdown并实现代码高亮显示
May 20, 2023 pm 04:16 PM
Vue实现博客前端，需要实现markdown的解析，如果有代码则需要实现代码的高亮。Vue的markdown解析库有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked，代码高亮的库选用的是highlight.js。具体实现步骤如下：一、安装依赖库在vue项目下打开命令窗口，并输入以下命令npminstallmarked-save//marked用于将markdown转换成htmlnpmins
Vue3中怎么实现选取头像并裁剪
May 29, 2023 am 10:22 AM
最终效果安装VueCropper组件yarnaddvue-cropper@next上面的安装值针对Vue3的，如果时Vue2或者想使用其他的方式引用，请访问它的npm官方地址:官方教程。在组件中引用使用时也很简单，只需要引入对应的组件和它的样式文件，我这里没有在全局引用，只在我的组件文件中引入import{userInfoByRequest}from'../js/api'import{VueCropper}from'vue-cropper&
Vue3复用组件怎么使用
May 20, 2023 pm 07:25 PM
前言无论是vue还是react，当遇到多处重复代码的时候，我们都会想着如何复用这些代码，而不是一个文件里充斥着一堆冗余代码。实际上，vue和react都可以通过抽组件的方式来达到复用，但如果遇到一些很小的代码片段，你又不想抽到另外一个文件的情况下，相比而言，react可以在相同文件里面声明对应的小组件，或者通过renderfunction来实现，如：constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
怎么使用vue3+ts+axios+pinia实现无感刷新
May 25, 2023 pm 03:37 PM
vue3+ts+axios+pinia实现无感刷新1.先在项目中下载aiXos和pinianpmipinia--savenpminstallaxios--save2.封装axios请求-----下载js-cookienpmiJS-cookie-s//引入aixosimporttype{AxiosRequestConfig,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
vue3项目打包发布到服务器后访问页面显示空白怎么解决
May 17, 2023 am 08:19 AM
vue3项目打包发布到服务器后访问页面显示空白1、处理vue.config.js文件中的publicPath处理如下：const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({publicPath:process.env.NODE_ENV==='production'?'./':'/&
