Vue3+Vite 第5页

在vue3+vite项目中使用jsx语法

正文开始前言一、下载资源二、利用vite工具引入babel插件总结前言最近在为部署人员开发辅助部署的工具，技术栈是vue3+vite+electron，在使用jsx语法时，提示我需要引入插件，所以就找到了vue3

中二少年学编程·2023-08-15 01:48

vue3+vite在main.ts文件中引入./App.vue报错（./App.vue不是模块）

问题如下图：方法一下载TypeScriptVuePlugin(Volar)插件就不报红了，看它的描述应该就是ts文件可以识别vue文件。方法二在src文件夹下添加env.d.ts文件，添加以下代码：declaremodule'*.vue'{importtype{DefineComponent}from'vue'//eslint-disable-next-line@typescript-eslint

前进的北极熊·2023-08-13 09:59

【从0到项目实战 vue3+vite】4. vue3基础-响应式

文章目录开始运行项目input双向绑定简单绑定绑定object对象绑定object对象（能够动态更新显示，方法1）绑定object对象（能够动态更新显示，方法2）开始还原App.vue为如下运行项目yarndev浏览器打开http://localhost:5173/为一片空白,则为下面的教程做准备input双向绑定简单绑定例子完整代码import{ref}from'vue';consta=ref(

半调子全栈·2023-08-11 15:41

vscode vue3+vite 配置eslint

vue2+webpack+eslint配置目前主流项目都在使用vue3+vite，因此针对eslint的配置做了一下总结。

拿回忆下酒·2023-08-11 10:29

Vue3+vite搭建项目全局引入axios，并且接解决axios跨域问题

全局引入axios在main.js里面引入import{createApp}from'vue'importAppfrom'./App.vue'//importrouterfrom'./router'importaxiosfrom'axios'constapp=createApp(App)app.config.globalProperties.$http=axiosapp.mount('#app')

YH丶浩·2023-08-10 15:31

vue3+vite +element-plus+tailwindcss兼容低版本浏览器（uc）

部分问题uc浏览器rgb支持不全如rgb(000/30%)这种写法不支持tailwindcssv3部分样式在低版本下也不支持uc浏览器对于tailwindcssboxShadow不支持主要还是rgb原因兼容直接贴出代码使用[email protected]版本v3低版本不支持tailwindcssv2的jit模式和任意值arbitraryvalue语法已经足够好了浏览器import()支持程度如

HHH 917·2023-08-10 13:56

基于Vue3+Vite实现的移动端天气预报系统

文章目录1.前言2.准备工作3.项目创建与配置3.1适配移动端3.2路由配置4.功能实现4.1Footer组件的实现4.2Mine组件的实现4.3Guide组件的实现4.4GuideInfo组件的实现4.5Home组件的实现4.6封装请求5.效果演示6.总结1.前言Vuejs如今成为了主流的前端框架之一，每个前端开发人员都避免不了要学习这款优秀的框架。本文章使用Vue3并且结合Vite脚手架开发一

never debug·2023-08-10 00:32

vue3+vite配置多入口文件

1.修改vite.config.ts文件：2.在src目录底下建相应的html文件和对应的ts入口文件和vue文件，如下图：npmrundev运行后本地访问：http://127.0.0.1:5173/home_index.htmlnpmrunbuild打包后的结构如图：

元仙僧·2023-08-09 19:25

[记录]Nginx部署打包的vue项目出现的问题

vue3+vite部署访问url为：localhost:7080/spc/login，spc为项目名出现404开发环境运行没有问题，nginx部署出现问题router用的history（history:

chris__XU·2023-08-09 09:58

vue3+vite项目配置ESlint、pritter插件

配置ESlint、pritter插件在Vue3+Vite项目中，你可以通过以下步骤配置ESLint和Prettier插件：安装插件：在项目根目录下，打开终端并执行以下命令安装ESLint和Prettier

一花一world·2023-08-07 11:19

Vue3+Vite快速搭建vue项目

Vue3+Vite快速搭建vue项目webpack的特点Vite较webpack不同与改进之处Vite缺点安装node.js(正文开始，已安装的可以跳过此步骤)npm镜像设置及cnpm安装使用vite快速搭建

【无痕干货营】·2023-08-06 22:18

vue 跨域代理

changOrigin:true,//是否开启跨域pathRewrite:{//重写api，把api变成空字符，因为我们真正请求的路径是没有api的"^/api":""}}},}2.vite.config.js跨域代理vue3

北里新妆·2023-08-04 17:37

记录一次成功在vue3+vite使用swiper

安装依赖npmiswiper我使用的swiper版本：7.3.1使用代码Slide1Slide2Slide3import{Navigation,Pagination,Scrollbar,A11y}from'swiper';import{Swiper,SwiperSlide}from'swiper/vue';import'swiper/css';import'swiper/css/navigatio

左又·2023-08-02 14:07

Vue3+Vite简单使用

1.前言Vue3大势不可阻挡,与之而来的就是Vite,尤雨溪极力推荐的前端开发与构建工具vue3原生支持TS,所以TS语法和vue3TS语法学起来vue中的vuex状态管理也用不顺手,看不顺眼了,换为Pinia2.Vite是什么what下一代前端开发与构建工具3.Vite项目创建创建脚手架项目不需要像之前一样全局安装脚手架哦Node.js版本>=12.0.0。下面一个指令轻松创建npminitvi

云高风轻·2023-07-30 14:35

vue3+vite路由中使用element自动导入图标

1.package.json"dependencies":{"@element-plus/icons-vue":"^2.1.0","element-plus":"^2.3.7",},"devDependencies":{"@iconify-json/ep":"^1.1.11","unplugin-auto-import":"^0.16.4","unplugin-icons":"^0.16.3","

九亿宅男的梦·2023-07-28 06:56

vue3+vite 使用 postcss-pxtorem、autoprefixer 实现自适应和自动添加前缀

自动添加前缀：自适应：1、安装postcss-pxtorem和autoprefixernpminstall postcss-pxtorem --savenpmiautoprefixer2、vite.config.js引入并配置importvuefrom'@vitejs/plugin-vue'import{resolve}from'path'//引入⬇️importpostCssPxToRemfro

想不到耶·2023-07-27 07:20

vue3+vite引入scss全局变量，设置主题颜色

1、安装scssnpminstallsass-D2、新建文件3、设置变量（color.scss文件）:root{--bg-color:#10141d;//默认背景颜色}$bg-color:var(--bg-color);//默认背景颜色4、vite.config.js配置importvuefrom'@vitejs/plugin-vue'import{resolve}from'path'constp

想不到耶·2023-07-27 07:50

vue3+vite项目配置ESlint

以下内容参考文章来源：推演组前端集成系统文档|DeductionFrontendSystemDocsvite项目创建1、创建vite项目npmcreatevite@latest2、创建完成后，要初始化项目（安装依赖）cdvite-project-demonpminstall3、运行项目npmrundevESLint安装使用1、安装ESLintnpmadd-Deslint2、初始化ESLint配置n

Paul_Chan_·2023-07-27 00:24

vue3+vite项目如何作为微应用接入qiankun主应用

pnpminstallvite-plugin-qiankun//vite.config.js importqiankunfrom"vite-plugin-qiankun"exportdefault({mode,command})=>{//mode:"test",//可设置mode，开发模式下启动为development模式，build打包后为production模式plugins:[vue(),c

王——小喵·2023-07-26 20:28

Vue3+vite实现组件上传npm并应用

场景：就是A项目的组件需要在B项目中使用下面举例的是把a项目pagination分页组件上传到npm，在b项目使用采坑日记：封装的组件一定要起name要不调用不成功1.1配置打包1.1首先在公用组件components文件夹下创建index.js文件，1.2index.js1.3vite.config.js1.4package.json执行npmrunbuild打包，出现如图文件夹则代表打包成功2

云雾散尽了·2023-07-26 02:13

vue3+vite自动加载路由

1、使用import.meta.glob加载所有vue文件constmodules=import.meta.glob("../views/**/*.vue");letautoRoutes:Route[]=[];for(letkeyinmodules){console.log(key);autoRoutes.push({filePath:key,path:key.replace("../views/

码码虎呼·2023-07-23 22:52

vue3+vite常用的vite.config.js配置

前言文章vite版本基于:"^2.0.5"，Vite2.0core现在与框架无关。现在通过@vitejs/plugin-vue这个插件来支持Vue。npmi@vitejs/plugin-vueoryarnadd@vitejs/plugin-vue然后在vite.config.js中导入这3个依赖import{defineConfig}from"vite";//帮手函数，这样不用jsdoc注解也可以

硅谷干货·2023-07-23 14:36

vue3+vite插件配置系列3-unplugin-vue-components（官方文档翻译）

作用Vue按需自动导入组件特点：支持Vue2和Vue3，开箱即用。✨支持组件和指令。⚡️基于unplugin技术，支持Vite、Webpack、VueCLI、Rollup、esbuild等构建工具。只导入你使用的组件，实现按需加载。使用文件夹名称作为命名空间。完全支持TypeScript。针对流行UI库提供内置解析器。与unplugin-icons完美协同工作。下载npmi-Dunplugin-v

永远不会太晚·2023-07-20 17:29

vue3+vite配置 unplugin-vue-component 找不到 Vant 组件的问题

使用vue3+vite+Vant搭建移动端项目，为了避免全量引入vant导致打包体积过大，又不想一个一个组件手动导入，所以就选择了vant官方推荐的方法，使用unplugin-vue-components插件自动引入组件，并按需引入组件的样式。但是运行过程中遇到了报错：[vite]Internalservererror:Failedtoresolveimport"vant/es"from"xxx"

天問_·2023-07-20 17:28

vite+vue3+ts简单例子todolist

vue3发布以来备受瞩目，与之起来的vite都是倍感神秘，在这里我们用一个todolist的小例子，来揭秘vue3+vite的面纱。

jason_renyu·2023-07-19 14:44

解决vue3+vite项目中引入mockjs失败的问题--无法找到模块“mockjs”的声明文件

看到上面报错，根据提示修改声明方式declaremodule'mockjs'我们修改一下引入的声明，发现修改之后仍然报错；解决方法：需要在vite-env.d.ts文件中，添加declaremodule'mockjs'，保存即可然后就可以正常使用了

suoh's Blog·2023-07-19 14:09

Vue3+Vite神器：按需引入自定义组件unplugin-vue-components

目录前言简介使用步骤第三方UI库用法前言我们做项目时，会封装大量的公共组件，如果我们每一个都去在maints里面引入，非常麻烦不说，代码也不优雅。所以更好的方法就是自动注册全局组件，在组件中直接使用就好。一种方法是自己在components文件夹下新建index.ts文件来导入并注册，最后在main.ts引入，具体方法见我之前的文章：http://t.csdn.cn/t0xbi今天介绍的另一种非常

小五Five·2023-07-19 11:42

vue3+vite项目，安装依赖运行报错“failed to load config from xxx，TypeError: vite.createFilter is not a function”

问题今天从GitHub上拉下来了一个vue3+vite项目，之前就是安装依赖就可以运行了，但是今天一直报错，显示TypeError:vite.createFilterisnotafunction错误原因

芋圆不想圆·2023-07-17 13:23

vue3+vite项目在html中输出环境变量

有两种办法方法一首先在vite.config.ts中进行配置要插入的变量内容，结合createHtmlPlugin插件import{createHtmlPlugin}from'vite-plugin-html';importtype{PluginOption}from'vite';consthtmlPlugin:PluginOption[]=createHtmlPlugin({minify:isB

草莓不爱吃白菜·2023-07-17 05:24

【Vue】Vue3+Vite 实现 SVG 组件自动加载 icons 目录下所有文件

1.安装依赖插件vite-plugin-svg-iconsvite-plugin-svg-icons用于生成svg雪碧图。特点：1.预加载在项目运行时就生成所有图标,只需操作一次dom2.高性能内置缓存,仅当文件被修改时才会重新生成vite-plugin-svg-icons官方文档pnpmaddvite-plugin-svg-icons2.安装fast-glob该软件包提供了遍历文件系统的方法，并

努力挣钱的小鑫·2023-07-17 01:11

“Vue3+Vite打包后，白屏沉默，重启重试无果，我该如何解决？”

每次最后打包总是会或多或少出现一些问题，昨天打包项目完之后直接点击dist中的index.html去看看有没有什么发题，一打开奇怪的事发生了，居然是空白；但是在vscode中右键OpenwithLiveServer一看项目没啥问题，但是部署到线上没人给右键，于是乎。以下仅记录本人的过程，做参考错误截图npmi@vitejs/plugin-legacy-D在vite.config.js中添加如下，i

木得是·2023-07-15 22:09

vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式

这里我们先假设：静态文件目录：src/assets/images/我们的目标静态文件在：src/assets/images/home/home_bg.png通过require动态引入，发现报错：requireisnotdefind，这是因为require是属于Webpack的方法第一种方式（适用于单个资源文件）importhomeBgfrom'src/assets/images/home/home

我总是词不达意·2023-07-15 01:35

14、配置svg图标使用环境

1、安装依赖在vue3+vite项目中使用svg图标，需要先安装如下插件：//建议一起安装，避免报错yarnadd-Dvite-plugin-svg-icons//如果因为vite-plugin-svg-icons

龙茶清欢·2023-06-22 14:12

vue3+vite插件配置系列2-unplugin-auto-import

作用解放双手，自动导入compositionapi和生成全局typescript说明使用1.下载npmi-Dunplugin-auto-import2.vite.config.ts配置importAutoImportfrom"unplugin-auto-import/vite"exportdefaultdefineConfig({plugins:[...AutoImport({imports:["

永远不会太晚·2023-06-21 02:24

Vue3+Vite+UI组件+springcloud项目搭建过程1

Vue3+Vite引入element-Plus遇到的坑按网上的教程来配置element-plus组件，发现样式没法显示需要在main.js中以一下方式引用varcode="2054fc80-7de6-4572

菠萝屋里的小海绵·2023-06-20 11:06

环信 uni-app Demo升级改造计划——Vue2迁移到Vue3（一）

uni-appDemo为早期通过工具从微信小程序转换为的uni-app项目，经过实际的使用以及复用反馈，目前已经不适用于当前的开发使用，因此开启了整体升级改造计划，目前一期计划将vue2代码进行手动转换为vue3

·2023-06-19 16:58

vite项目中vue-i18n国际化与Element-Plus自动导入结合实现

（注：之前已经搭好了基本的框架，详细可以参考vue3+vite项目配置ESlint、prit

ZERO丶X·2023-06-16 04:55

vue3 后台管理系统实现登录与记住密码功能element-plus

3、页面挂载的时候需要背叛的是否保存密码，保存的话直接获取密码填充4、完整代码longin_page.vue欢迎光临此站点是《vue3+vite实战商城后台开发》视频课程的演示地址欢迎回来账号密码登录记住密码登录

人民的石头·2023-06-13 20:16

前端VUE3+Vite +UniAPP-- 框架搭建

除了HBuilderX可视化界面，也可以使用cli脚手架，可以通过vue-cli创建uni-app项目。全局安装vue-cli官网npminstall-g@vue/clinpxdegitdcloudio/uni-preset-vue#vite-tsvue3-uniapp配置tailwindcss插件官网npminstalltailwindcssnpxtailwindcssinit在tailwind

徐寿春·2023-06-13 18:10

vue3+vite 中使用百度地图【两种方式】

vue3+vite项目中使用百度地图方式一：直接使用百度地图的ak方式二：使用vue-baidu-map-3x插件方式一：直接使用百度地图的ak提前准备：创建一个vite项目申请好的百度地图ak值百度地图使用

米奇妙妙wuu·2023-06-13 07:21

Vue3+Vite项目按需自动导入配置及常见问题修复

文章目录一、VueAPI自动导入1.1配置`unplugin-auto-import`1.2可能遇到ts,eslint不识别而导入报错的问题1.3配置src/component目录下的组件自动引入二、按需引入UI组件库（antd,element-plus）2.1、按需引入element-plus2.2ant-design-vue按需引入2.3自动导入ElementPlusIcon三、关于配置文件一

Sophie_U·2023-06-13 07:49

The server responded with a non-JavaScript MIME type oftext/html

vue3+vite打包以后，项目切换路由触发（偶发触发）报:Afterusingvue-router,thereisanerrorinpackagingandrunning#Failedtoloadmodulescript

·2023-06-12 18:55

Vue3+Vite中不支持require的方式引入本地图片如何解决

/assets/${img}.png`)但是vue3+vite这么写就报错：requireisnotdefine原因是require是webpack的方法，vite找不到对应的图片路径，需要使用下面的方式进行处理

小付学代码·2023-06-12 15:22

vue3中自定义$emit $on

1,vue3+vite中已经废弃了$emit$on,需要自定义来实现此功能2，自定义文件enventBus.js，具体源码如下：exportdefault{map:{},$emit(name,params

ybweb·2023-06-11 08:37

Vue3+Vite初体验

一、为何要使用？1.为何要使用Vue3?你说Vue2用的好好的，为啥要用Vue3呢？就因为它是最新版？不，还不是因为Vue3它是真的香嘛！①组合式API，编码更加自由Vue3在Vue2的选项式API基础上新增了组合式API，组合式API不再像选项式API那样拘泥于固定的对象结构，而是使用函数式编程，更加自由，耦合度更低。例如：import{ref}from"vue";constcount=ref(

前端王睿·2023-06-11 02:15

nginx vue2+webpack 和 vue3+vite 配置二级目录访问

首先我们要配置一个106.13.0.11:8083/qfqzApp的二级路由，针对于vue2项目，我们需要进行一下操作。1、nginx配置（vue2和vue3配置的nginx相同）server{listen8083;#1.你想让你的这个项目跑在哪个端口server_name106.13.0.11;#2.当前服务器ip#这里要写成末尾不带"/"的形式，如果写成"/qfqzApp/"单单访问106.1

天秀我阿阳·2023-06-10 08:18

vue3 + vite + linux + nginx 配置gzip模式

1、vue3+vite配置gzip安装vite-plugin-compressionnpminstallvite-plugin-compression-D配置vite.config.jsexportdefaultdefineConfig

天秀我阿阳·2023-06-10 08:17

在vue3+vite项目中引入assets中图片到页面中的几种方式

引入文件的方法说明：第一种方式第二种方式在vue文件中导入使用方式说明：使用require()方法只有在webpack创建的项目中生效，使用vite创建的项目引入assets的图片要使用第二种方式第一种方式，webpack、vite创建的项目通用第一种方式src/assets/images/img1.pngimportpubImgfrom'../assets/images/img1.png第二种方

weixin_47389477·2023-06-09 13:20

vue3+element plus+vite 引入本地静态资源图片require报错的原因和解决方案，以及如何在表格中展示图片

报错的原因和解决方案二、vue3+elementplus+vite项目中，在el-table中展示本地静态图片总结一、vue3+elementplus+vite引入本地静态资源图片require报错的原因和解决方案在写vue3

ym-13140912·2023-06-08 09:48

vue3+vite 代码混淆插件

安装插件rollup-plugin-javascript-obfuscatoryarnadd--devrollup-plugin-javascript-obfuscator创建obfuscator.ts文件，把下面相应代码放入ts文件中importobfuscatorPluginfrom'rollup-plugin-javascript-obfuscator';exportfunctioncode

Y_余悸·2023-06-08 05:16

推荐频道

Vue3+Vite