vue3+vite+ts

npm【一】---vue3+vite+ts 发布、更新自定义组件到npm仓库

1.初始化项目本示例使用npm7+版本（项目为sos-ol-map）#npm6.xnpminitvite@latestsos-ol-map--templatevue-ts#npm7+,需要额外的双横线：npminitvite@latestsos-ol-map----templatevue-ts#yarnyarncreatevitesos-ol-map--templatevue-ts#pnpmpnp

sisimi_43966973·2025-03-13 12:30

vue3+vite+ts项目中使用vue-router

vite.config.ts:import{defineConfig}from'vite';importvuefrom'@vitejs/plugin-vue';importpathfrom"path";exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{"@":path.resolve(__dirname,"src"),}},});

枫叶&情缘·2025-03-06 11:42

vue如何实现路由缓存

（以下示例皆是以vue3+vite+ts项目为例）场景一：所有路由都可以进行缓存在渲染路由视图对应的页面进行缓存设置，代码如下：：用来渲染当前路由对应的视图。

大宁宁吖·2024-09-11 00:59

【Vue3+Vite+TS】10.0 组件七：动态加载进度条

必备UI组件将用到的组件：Progress进度条组件设计新建src\components\baseline\progress\src\index.vueconstprops=defineProps({//说明：百分比，必填percentage:{required:true,type:Number,default:0,},//说明：进度条是否有动态效果isAnimation:{type:Boolea

bobokaka·2024-02-12 23:39

vue3+vite+ts 配置commit强制码提交规范配置 commitlint

配置git提交时的commit信息，统一提交git提交规范安装命令:npminstall-gcommitizennpmicz-customizablenpmi@commitlint/config-conventional@commitlint/cli-D文件配置根路径创建文件commitlint.config.jsmodule.exports={//继承的规则extends:['@commitli

周家大小姐.·2024-02-09 08:29

从零开始使用Konva，画图并绑定节点。

实战可行，vue3+vite+ts实现实现电子地图，左侧列表可拖拽绑定地图可绑定点设备坐标安装npminstallkonva插件引入importKonvafrom'konva'importKonvafrom'konva'import

Roottt_·2024-02-03 09:53

vue3+vite+ts使用pinia

你开心的样子我好喜欢·2024-02-02 20:41

TypeScript使用@来映射文件路径解决找不到模块“@/xxx”或其相应的类型声明的问题

TypeScript使用@来映射文件路径解决找不到模块“@/xxx”或其相应的类型声明的问题环境：Vue3+Vite+ts想便捷引用自定义模块由于在script中使用import{login}from"

不吃水果的太空人·2024-01-26 01:42

vue3+vite+ts+pinia 后台管理项目总结

前言近期准备面试中，觉得项目经验这里还需要再次总结，也参考了很多jym的文章，在这里如果发现有引用且介意，请联系我VUE3+VITE+TS项目中的要点使用vue3+vite+ts构建项目基础框架，配置代码运行环境

子伟-H5·2024-01-18 17:15

vue3+vite+ts环境定义

1.定义文件.env.deveolpment等其中定义内容2.基础定义NODE_ENV='development'3.其他定义以VITE_开头4.在你需要地方通过import.meta.env.xxxx进行获取即可5.对于环境切换，在package.json中进行定义scripts即可列如："dev":"vite--modedevelopment","prod":"vite--modeproduc

陈不知代码·2024-01-16 18:01

vue3+vite+ts 在img上获取静态图片

1.在vue3+ts项目中插入图片方式一，单个单个的插入importwordfrom'/@/assets/images/word.png'在setup中return，或是方式二:推荐核心方法,直接复制使用，需要更改URL地址这是我项目中的…/…/assets/images/${url}，这里静态资源路径需要改成你们自己的//获取assets静态资源functiongetAssetsFile(url

꧁“杂货店”꧂·2024-01-08 04:39

如何创建vue3+vite+ts的项目

本文章仅为新手提供刚接触vue3时不懂如何创建demo的教程。一般情况下，官方推荐使用vite来构建vue3项目，vite是一种新型前端构建工具，能够显著提升前端开发体验。但是使用Vite需要Node.js版本>=12.0.0。操作步骤yarncreatevite1、运行上述命令，会提示你输入项目的名称：2、选择所使用的框架3、选择使用的编程语言上述三步执行完后，就会创建成功一个模板4、根据创建成

南穑·2024-01-08 00:33

从零开始搭建企业级前端项目模板（vue3+vite+ts）

文章目录主要内容一、vite脚手架工具初始化项目二、项目代码加入eslint校验和自动格式化2.1安装对应依赖插件2.2配置script脚本，项目安装eslint配置2.3安装完成后，后面启动项目还缺少一些依赖，提前按需安装好三，修改eslintrc.cjs文件四、修改vue.config.ts文件五、修改添加常见配置六、Husky、lint-staged、commitlint功能添加七、styl

菜又爱编程·2024-01-08 00:32

vue3中引入文件ts报红色波浪线问题

在创建vue3+vite+ts的项目过程中，发现ts在引入文件时报红色波浪线解决方法：1.如果使用的vsCode中vue插件是Vetur的话，需要卸载重新安装支持vue3的Volar插件2.需要在src

dzry_lr·2023-12-29 21:15

tsconfig.app.json文件报红：Option ‘importsNotUsedAsValues‘ is deprecated...

在创建vue3+vite+ts项目时的tsconfig.json（或者tsconfig.app.json）配置文件经常会报一个这样的错误：爆红：Option‘importsNotUsedAsValues

一嘴一个橘子·2023-12-26 15:49

Vue3+Vite+TS解决父元素onMounted无法获取传给Slot的DOM

Vue3+Vite+TS解决父元素onMounted无法获取传给Slot的DOM子组件ChildComponentconstemits=defineEmits()onMounted(()=>{emits

奔跑的呱呱牛·2023-12-23 17:47

Vue3+Vite+TS解决调用组件实例有类型推断

Vue3+Vite+TS解决调用组件实例有代码提示子组件ChildComponent我是子组件import{reactive}from"vue"constform=reactive({name:""})

奔跑的呱呱牛·2023-12-23 17:47

vue3+vite+ts 搭建项目

1、vite项目初始化我们使用vite来初始化项目，记得初始化的过程选择vue-ts哟，这样我们就能引入ts，后面不用额外单独对他引入npminitvite@latest2、vite配置配置别名@（1）安装node依赖npmi--save-dev@types/node（2）引入node模块tsconfig.json{"compilerOptions":{...(省略配置)"types":["nod

Amy_yqh·2023-12-15 04:13

Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化

创建项目我在这里直接是通过vite提供的默认模板来创建一个vue3+ts的项目。这里可以cmd，然后npm-v来查看版本。#如果npm的版本是6.x版本，则使用下面这条命令创建项目yarncreatevite@latestvite-vue3-ts--templatevue-ts#如果npm的版本是7+以上版本，则使用以下命令yarncreatevite@latestvite-vue3-ts----

Undefined--1·2023-11-30 23:14

vue3+vite+ts使用Element+Plus

1.安装Element+Plusnpminstallelement-plus--save2.在index.html中加入3.修改main.tsimportElementPlusfrom'element-plus'import'element-plus/dist/index.css'createApp(App).use(ElementPlus).mount('#app')4.参照文档，添加按钮。在A

程序员正茂·2023-11-30 00:52

vue使用echarts中国地图

需求：Vue3+vite+TS项目内使用Echarts5绘制中国地图。

SwJieJie·2023-11-29 18:12

07. vue3+vite+qiankun搭建微应用前端框架，并接入vue3微应用

目录前言主应用微应用部署前言因为业务系统接入的需要，决定将一个vue3+vite+ts的主应用系统，改造成基于qiankun的微应用架构。此文记录了改造的过程及vue3微应用接入的种种问题。

哟哟-·2023-11-23 11:43

vue3介绍

底层做了很多优化2倍左右vue3+vite+ts渐进式框架vue3和vue2的区别新语法，性能上提升很多思想是一致的：动态绑定：状态data&计算属性，监听某些状态的变化做哪些事情，事件用v-on……性能上的提升视图的编译方面

betterangela·2023-11-22 18:11

vue3+vite+ts 安装遇到的一些问题和解决方案

下面问题都是一个坑一个坑踩过来的，借鉴了网上很多资料，这里只提vite安装，不提vue-cli//vite的安装npminstall-gcreate-vite-app先安装vite，安装成功后通过以下命令可以创建vue3项目//第一种create-vite-apptest//第二种npminitvite-apptestnpminit@vitejs/app//推荐这种1、下面是npm安装方式介绍，如

余温无痕·2023-11-22 03:29

vue3+vite+ts 发布自定义组件到npm

vue3+vite发布自定义组件到npm初始化项目编写组件配置打包组件上传到npm测试组件库初始化项目//创建项目pnpmcreatevitevue-test-app--templatevue-ts//运行项目cdvitevue-test-apppnpminstallpnpmrundev编写组件1、根目录下创建packages目录作为组件的开发包，目录下的index.ts文件作为整个组件库的出口文

FenceRain·2023-11-18 17:09

vue3配置@别名

备注：本示例是Vue3+Vite+Ts一、v

暴怒的代码·2023-11-13 13:02

Vue3+NodeJS 接入文心一言，发布一个 VSCode 大模型问答插件

首先明确插件开发方式二：新建一个Vscode插件项目1.官网教程地址2.一步一步来创建3.分析目录结构以及运行插件三：新建一个Vue3项目，在侧边栏中展示，实现vscode插件vue项目双向消息传递1.新建vue3

chengbo_eva·2023-11-12 23:29

Vue3+Vite+Ts创建项目

项目说明一.脚手架vitevue-cli ==》 webpackvite脚手架使用官网：https://vitejs.cn/Vue3vite官网：https://cn.vitejs.dev/Vite下一代的前端工具链，为开发者提供急速响应# 安装$ cnpm i vite -g$ vite -vvite/4.0.3 darwin-x64 node-v16.13.1windows注意处理/vit

前端青山·2023-11-12 16:07

Vue3+Vite+TS后台项目 ~ 6.用户登录校验

一、登录1.登录静态页编辑src/views/login/index.vue文件登录import{reactive,ref}from'vue'constuser=reactive({account:'admin',pwd:'123456',imgcode:''})constloading=ref(false)construles=ref({account:[{required:true,messa

后海 0_o·2023-11-04 15:20

Vue3+Vite+TS后台项目 ~ 9.权限管理_规则

日拱一卒无有尽，功不唐捐终入海一、接口封装新建src/api/menu.ts文件importrequestfrom'@/utils/request'import{IFormData}from'./types/form'importtype{Menu}from'./types/menu'//获取权限列表exportconstgetMenus=(params:{is_show:0|1|''keywor

后海 0_o·2023-10-30 15:24

Vue3+Vite+Ts 项目实战 02 配置 VueRouter、Pinia 配置和简单介绍、配置 SCSS

配置VueRouterVite创建的项目没有集成VueRouter，需要手动安装集成。Vue3使用最新版本的VueRouterv4.x。#安装npminstallvue-router@4创建路由配置文件：首页登录//src\router\index.tsimport{createRouter,createWebHistory,RouteRecordRaw}from'vue-router'const

皮蛋很白·2023-10-27 12:41

【Vue3+Vite+TS】2.0 组件一：伸缩菜单

必备UI组件伸缩菜单将用到以下几个组件：Container布局容器Menu菜单组件设计修改路由：src\router\index.tsimport{createRouter,createWebHistory,RouteRecordRaw}from'vue-router'importHomefrom'../views/Home/index.vue'importContainerfrom'../com

bobokaka·2023-10-27 09:01

【vue3】踩坑日记，vite与node版本对应（mac环境）

创建vue3+vite+ts项目时，报错Therequestedmodule‘vue’doesnotprovideanexportnamed‘computed’；node版本问题，Vite需要Node.js

Sandra·2023-10-22 01:31

vue3+vite+ts创建项目

1.Vite是一种新型前端构建工具，能够显著提升前端开发体验。Vite需要Node.js版本>=12.0.0。2.使用npm：#npm6.x$npminitvite@latest--templatevue#npm7+，需要加上额外的双短横线$npminitvite@latest----templatevue$cd$npminstall$npmrundev使用yarn：$yarncreatevite

芒果味的葡萄·2023-10-18 14:28

Vue3+Vite+TS基于Element plus 二次封装业务组件(含Vue3知识点)

前言使用Vue3+Vite+TS基于Elementplus二次封装业务组件，注册挂载为全局使用，代码简洁了许多。封装好我们的业务组件今后开发中遇到时，就可以直接使用啦！

东方睡衣·2023-10-16 21:56

vue3+vite+ts 使用svg

(1)安装插件yarnaddsvg-sprite-loader--save-dev(2)封装svgIcon组件在componemts里新建svgIcon文件夹，新建SvgIcon.vue，封装成组件constprops=defineProps({name:{type:String,required:true}}).svg-icon{width:1em;height:1em;vertical-ali

@呵呵·2023-10-16 10:11

在vue3+vite+Ts项目中使用svg

这里写自定义目录标题1、首先在conponents目录下创建组件2、在main.ts文件中在main.js里面全局注入svg-icon组件3、在utils目录下创建svg.ts文件4、在vite.config.js修改配置5、然后在icons文件下引入svg图标6、最后在页面中使用1、首先在conponents目录下创建组件svgIcon目录下的index.vue代码：import{defineP

#GZ·2023-10-16 10:35

vue3+vite+ts 配置别名@报错找不到模块

我在学习vue3+vite+ts的时候，在配置别名这一步的时候遇到了一个问题，使用@引入会报错，如下图所示。

高冷冷·2023-10-15 02:52

Vue3+Vite+Ts 项目实战 05 用户登录和身份认证

用户登录页面添加登录接口//src\api\common.ts//公共基础接口封装importrequestfrom'@/utils/request'import{DemoData,LoginResponse}from'@/api/types/common'exportconstdemo=()=>{returnrequest({method:'GET',url:'/demo'})}exportco

皮蛋很白·2023-10-13 01:45

vue3+vite+ts 组件中自动导入 ref 和 reactive

前言在每个vue组件中，都去手动引入ref和reactive是非常繁琐的一件事，我们可以通过插件来完成自动导入安装插件npmiunplugin-auto-import-D配置插件在vite.config.ts中增加如下代码import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importAutoImportfrom'unplu

三劫散仙·2023-10-13 01:10

vue3+vite+ts中的@的配置

错误场景vue3+vite+ts问题分析在vue3的项目开发中我遇到了这样一个问题[vite]Internalservererror:Failedtoresolveimport“@/views/lazyLoading.vue

鋜斗·2023-10-10 15:43

【Vue3+Vite+TS】5.0 利用app.use实现全局组件注册

修改src\components\baseline\chooseIcon\index.ts/**@Author:bobokaka*@Date:2021-12-2221:58:24*@LastEditTime:2021-12-2223:58:54*@LastEditors:bobokaka*@Description:chooseIcon导出，用于全局注册*@FilePath:\vue3-elemen

bobokaka·2023-10-10 05:42

Vue3+Vite+TS独立开发仿网易云音乐Web应用

项目背景自己之前的项目要么就是比较小的，要么就是跟着视频敲的，感觉做完之后并没有很好地吸收学到的知识。于是想要自己独立地做一个前端项目，刚好看到网易云音乐的网页端没有它的客户端好看，于是就仿照网易云音乐的客户端做了一个Web端的应用。这个项目还有很多页面和功能没有实现，但一些基础功能都已经实现了。整个项目从技术选型，路由设计，再到代码规范，代码开发，自动构建部署的一系列流程都是自己独立完成的，期间

前端corner·2023-10-08 17:42

3d环形图开发（vue3+vite+ts）

开发效果（待完善）：技术支持：Echartsecharts-gl安装：注：echarts与echarts-gl版本需对应，可参考官网[email protected]@1.1.2组件封装：import{getCurrentInstance}from"vue"const{proxy}=getCurrentInstance()asany;import'echarts-gl';

六便士的理想·2023-10-08 06:16

vue3+vite+ts项目中简单的二次封装axios

在项目的utils目录下新建一个request.ts文件，代码如下：importaxios,{InternalAxiosRequestConfig,AxiosInstance,AxiosResponse}from'axios';importrouterfrom"/@/router";import{showToast}from"vant";import{getToken,removeToken}fr

少年的范儿·2023-10-08 05:30

vue3+vite+ts svg图片作为组件引入

安装npminstallvite-svg-loader--save-dev配置//vite.config.tsimportsvgLoaderfrom'vite-svg-loader'import{resolve}from'path'constpathResolve=(dir:string):string=>{returnresolve(__dirname,dir)}constalias:Recor

七大恶狼之首·2023-10-03 19:56

vue3+vite安装element-plus报错解决-使用组件不起作用

前言在刚开始使用vue3+vite+ts项目中安装element-plus，使用组件不起作用，报错如下：UnCaugh SyntaxError:The requested module '/node_modules

itclanCoder·2023-09-22 03:07

如何在vue3+vite+ts中使用require

vue3+vite+ts中不能使用require之前使用vue2，去动态设置图片src属性时，采用require，但是vue3+vite+ts中使用require，项目能够运行，但浏览器中报错require

一个韩了个韩·2023-09-17 16:30

vue3实现卡片翻牌

vue3实现塔罗牌翻牌前言一、操作步骤1.布局2.操作3.样式总结前言最近重刷诡秘之主，感觉里面的塔罗牌挺有意思，于是做了一个简单的塔罗牌翻牌动画（vue3+vite+ts）一、操作步骤1.布局首先我们定义一个整体的塔罗牌盒子

bug别找我·2023-09-13 18:25

vue3+vite+ts项目适配各种分辨率解决方案

现在的电脑屏幕和尺寸越来越多样化，对于前端开发来说，适配各种屏幕成了大难题，开发中一个实际例子：开发一个导航栏，ui给的是1920*60的尺寸，前端开发的时候，在自己电脑缩放比例中开发的，但是到了其他人屏幕，比如2k屏幕或者缩放200%的笔记本上，高度就不一样了，为了解决这个问题，今天就来研究下怎么在各种分辨率下高都都保持不变，完全按照ui尺寸写试过了根元素设置zoom和scale，但是效果都不理

让代码飞1926·2023-09-06 19:02

推荐频道