Vue3+Vite 第4页

解决Failed to resolve import “@element-plus/icons-vue“ from “src\views\Home.vue“. Does the file exist?

解决在Vue3+Vite中使用Element-plus报错一、安装镜像（可选）使用阿里定制的cnpm命令行工具代替默认的npm，输入以下代码npminstall-gcnpm--registry=http

小白不白`·2023-09-16 10:01

vue3+vite相对路径处理

import{resolve}from'path';functionpathResolve(dir:string){returnresolve(process.cwd(),'.',dir);}//constroot=process.cwd();//以下为vite-config输出的配置resolve:{alias:[//别名///@/xxxx=>src/xxxx{find:/\/@\//,repl

kidrue·2023-09-16 02:14

[mars3d 打包]vue3+vite，打包后mars3d找不到

前提：vue3+vite开发框架；使用官网方式3获取sdk,引入mars3d;问题：开发时一切正常，打包之后，页面白屏，没有渲染；相关的mars3d的相关方法会报错；但是mars3d的打印日志是有的；解决方案

小小的杰茜·2023-09-15 01:03

vue3+vite history模式部署到服务器二级目录

1、先配置nginx:location/exam{alias/usr/local/pkg/exam/web/release/dist;indexindex.htmlindex.htm;try_files$uri$uri//exam/index.html@rewrites;}2、在路由中添加constrouter=createRouter({history:createWebHistory('/ex

qiulibi·2023-09-14 02:49

vue3+express实现的简单增删改查demo

、mysql准备关于mysql环境这里建议使用phpstudy集成环境，因为mysql8.0以上安装配置可能比较麻烦，比较费时间，附上截图数据库管理工具推荐navicat二、vue3准备此demo采用vue3

冰消叶散·2023-09-11 13:26

vue3+vite运行报错记录：error when starting dev server

场景：拉完代码执行npmi后运行报错，打包运行代码没问题，说明是本地开发环境的问题。完整报错信息：原因：vite-plugin-optimize-persist和vite-plugin-package-config版本相互依赖解决：改为：

王哈哈的学习笔记·2023-09-10 05:50

vue2+webpack升级vue3+vite，修改插件兼容性bug

同学们可以私信我加入学习群！前言在前面使用electron+vue3的过程中，已经验证了历史vue2代码+vue3混合开发的模式。本次旧项目vue框架整体升级中，同事已经完成了vue3、pinia、store等基础框架工具的升级。所以我此次记录的主要是vite打包工具升级以及升级后，修改项目中使用到的插件工具兼容性bug。一、修改记录增加vite支持，根据vite官网内容，修改index.html

中二少年学编程·2023-09-09 08:50

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

https：xxx/二级目录/来放访问项目目录思路1、nginx配置（vue2和vue3配置的nginx相同）2、vue2+webpack的配置（1）vue.config.js配置（2）router配置3、vue3

_揽·2023-09-09 06:05

vue3+vite项目运行报错[plugin vite:dep-pre-bundle]

报错截图原因：vue-i18n插件于9.5更新，打包和引入方式有改变，所以新启动和新部署的项目都会有这个问题。解决方式：1.项目全局搜索：vue-i18n/dist/vue-i18n.cjs.js然后将搜索到的代码替换为：vue-i18n/dist/vue-i18n.esm-bundler.js重新rundev即可。2.在package.json里找到：vue-i18n将^去掉即可

since �·2023-09-09 01:24

深度解读项目质量及性能常用手法

以下文章来源于稀土掘金技术社区，作者快手数平前端团队简介这是一个vue3+vite搭建的PC端web应用，基本上使用的是vite的默认配置，没有专门做过性能优化。

嘴巴嘟嘟·2023-09-07 01:17

升级vue3原先vue2的项目出现：Error error0308010Cdigital envelope routinesunsupported的解决

问题复现：升级到vue3+vite的项目，nodejs升级到18.17.0，原先vue2的项目再次启动发现这个问题：npmERR!codeELIFECYCLEnpmERR!errno1npmERR!

我叫yeeking啊·2023-09-02 13:10

Vue2.0/Vue3.0使用xlsx+xlsx-style实现导出Excel文件

/cptable':'varcptable'}}2、Vue3+Vite构建的npmixlsxnpm

m0_38004177·2023-09-02 09:11

vue项目静态文件资源下载

对于Vue3+Vite项目，使用require方法来导入模块是不被支持的。require是CommonJS规范中用于模块导入的方法，在Webpack等构建工具中常用。

zluz_·2023-08-31 09:37

vite打包部署问题总结

使用vscode搭建vue3+vite项目，部署到服务器jscss文件路径访问不到的问题Vue3vite：isaJavaScriptfile.Didyoumeantoenablethe'allowJs'option

前端贾公子·2023-08-29 21:39

vue3+vite项目使用xlsx+xlsx-style+file-saver导出带有样式的excel表格方法

基于vue3+vite的项目实现导出带有样式的excel表格，框架用的是vben，所以表格用的是ant的table组件数据源，如果用原生表格需要用到备注的另外方法。

lee_amazing·2023-08-28 14:38

vue3+vite使用vite-plugin-svg-icons

使用vite-plugin-svg-icons插件显示本地svg图标在开发项目的时候，经常会用到svg矢量图标，而且我们使用svg以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且我们svg文件比img要小很多，放在项目中几乎不占用资源。安装SVG依赖插件npminstallvite-plugin-svg-icons-D在vite.config.ts中配置插件（vite:vue

Liberty_yes·2023-08-28 09:32

vue3+vite+ant-design-vue项目搭建

vite官方传送门：Vite|下一代的前端工具链使用如下命令安装vue3+vite项目。

Chen-Hui·2023-08-24 15:57

Vue3+Vite 初始化OpenLayer

Vue3+Vite初始化OpenLayer安装依赖yarnaddol初始化OpenLayerimport{onMounted}from'vue'import'ol/ol.css'import{Map,View

原谅我很悲·2023-08-24 14:32

Vue3+Vite 初始化Cesium

Vue3+Vite初始化Cesium安装依赖yarnaddcesiumyarnaddvite-plugin-cesium-D加载vite-plugin-cesium插件import{defineConfig

原谅我很悲·2023-08-24 14:29

SpringBoot 2 +Vue3+Vite + WebSocket + Nginx 二级目录部署发布

最近研究了新技术Vue3+Vite，需要引用WebSocket长连接及Nginx发布，有一些心得体会，在此记录一下方便以后查阅，同时跟小伙伴分析一些新技术。

风随心飞飞·2023-08-23 16:15

【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量

vue3+vite项目引入SCSS及使用SCSS全局变量我是Sam9029，一个前端Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主**‍‍

Sam9029·2023-08-21 03:05

Vue3+Vite前端知识汇总1篇

目录1、设置package.json，让编译完成后自动打开浏览器。2、设置vite.config.ts,设置src别名，后面就不用../../../了。3、安装@types/node解决vscode显示红波浪线问题。4、安装sass和reset.css5、创建并引入全局组件，HospitalTop6、安装路由，并添加切换路由后滚动到顶部功能7、引入element-plus和国际化8、引入pinia

东宇科技·2023-08-19 10:59

微信小程序（Vue3+vite）坑点

1.页面中使用绝对路径引用会报错（undefined）vue3+ts+vite搭建uniapp项目（微信小程序）_vite小程序_佛系的发发的博客-CSDN博客

booleann·2023-08-17 16:56

vue3+vite配置vantUI主题

❓在项目中统一配置UI主题色，各个组件配色统一修改vantUI按需安装参考vantUI文档创建vantVar.less文件夹进行样式编写vantVar.less:root:root{//导航--van-nav-bar-height:44px;//按钮--van-button-primary-color:#ffffff;--van-button-primary-background:rgba(86,

啥时候能干全栈·2023-08-15 21:10

vue3+vite中使用postcss-px-to-viewport适配问题

适配方案postcss-px-to-viewport使用过程中出现以下问题:postcss-px-to-viewport不适配最新版本的postcss8⚠️报错：postcss-px-to-viewport:postcss.pluginwasdeprecated.Migrationguide:https://evilmartians.com/chronicles/postcss-8-plugin-

啥时候能干全栈·2023-08-15 21:08

vue3+vite搭建项目（一）

安装环境，打开命令行（win+r）node-v14.15.1npm-v6.14.8安装v3脚手架npminstall-g@vue/cli//卸载Vue3脚手架npmuninstall@vue/cli-g查看vue版本vue-V@vue/cli5.0.8安装vitenpminstallvite–g查看vite版本vite-vvite/2.9.14win32-x64node-v14.15.1vue3+

小棋子js·2023-08-15 07:07

在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

推荐频道

Vue3+Vite