Vue3+Vite

Vue3 + Vite 打包优化及配置

Vue3+Vite搭建企业级开发脚手架【目录篇】Vue3Element-PlusJson配置一站式生成动态表单CSS工程化配置我们刚接触前端时候，提到前端样式，首先会想到的就是原生CSS；随着技术的迭代更新
qq_30379395·2024-01-19 10:46

vue2+webpack升级vue3+vite，报错Cannot read properties of null (reading ‘isCE‘)

正文开始前言问题分析解决总结前言系列文章：vue2+webpack升级vue3+vite，修改插件兼容性bug前面的文章主要是介绍，在升级初始阶段遇到的一些显而易见的兼容性问题和bug。
中二少年学编程·2024-01-18 20:03

vue2+webpack升级vue3+vite，在vue3组合式编程中使用vuex

正文开始场景一、从vue2到vue3组合式编程二、vue3中调用vuex总结场景我的项目是从vue2+webpack升级为vue3+vite，这种升级工作，其实最重要的不是如何快速准确地把原有vue2项目全部重构为
中二少年学编程·2024-01-18 11:49

vue3+vite项目构建时报错npm ERR! code EPERMnpm ERR! syscall mkdir...

vscode终端中输入npmcreatevite@latestvueviteproject1----vue命令后报错具体报错如下：PSD:\project>npmcreatevite@latestvueviteproject1----vue>>npmERR!codeEPERMnpmERR!syscallmkdirnpmERR!pathD:\node\node_cache\_cacachenpmER
平平无奇 > _ <·2024-01-16 09:06

在vue3+vite项目中使用vw和vh适配

简介：在Vue3+Vite项目中，使用Sass预处理器可以极大地提升样式编写的效率和可维护性。
梦想家加一·2024-01-15 17:24

Vue3+Vite连接高德地图JS API——地图显示、输入搜索

1开通高德地图Web端JSAPI服务1、进入高德地图API官网（https://lbs.amap.com/）：2、注册登录。3、进入控制台。4、点击“应用管理”，点击“我的应用”，创建新应用。5、添加Key，服务平台选择“Web端（JSAPI）”，白名单不要填写，勾选阅读并同意。点击提交后，就能看到Key已经生成，记住这里的Key和安全密钥。2配置Vue项目文件2.1简易方法因此直接下载官方提供的
阳排·2024-01-14 06:10

Vue3+Vite项目搭建

为什么选择vite而不是vue-cli：vite下一代前端开发与构建工具vite创建的项目默认vue3优势：开发环境中，无需打包，可快速的冷启动轻量快速的热重载（HMR）真正的按需编译，不在等待整个应用编译完成1.1初始化npmcreatevite@latest//vite最新版本1.2项目信息输入项目名称最好英文选择要创建的项目框架我们这里是Vue（如果上下键不能选择，就手动输入选项，再回车）选
前端小趴菜05·2024-01-13 19:30

vue3打包后页面空白解决方法

vue3打包后页面空白解决方法问题解决方法问题最近写一个小项目没有打包的时候一切正常技术栈用的vue3+vite我用的是npm创建的项目npminitvue@latest问题一：打包后页面空白，什么都没有问题二
yijianace·2024-01-13 08:51

vue3+vite 安装和配置less

1、安装//安装lessnpmiless-loaderless--save-dev2、vite.config.js配置css:{preprocessorOptions:{less:{modifyVars:{hack:`true;@import(reference)"${path.resolve("src/assets/css/base.less")}";`,},javascriptEnabled:
余温无痕·2024-01-12 18:58

Vue3+Vite打包跨平台(七牛、阿里OSS)上传部署前端项目

1、业务场景阅读之前，想了解一下各位观众老爷们，你们公司的项目是怎么部署的：1.本地打包手动上传服务器；2.本地打包自动上传服务器；3.代码仓库流水线自动构建；4.其他…；我们用的第3种部署方式，仓库代码合并到release之后自动打包部署，不过这个过程很耗费时间，且流水线是要收钱的。有一天，流水线到期了，部门主管打算节约成本，于是就开始让我们自己写一个脚本，用来部署公司项目；前端静态资源(项目图
领秀5858·2024-01-11 22:17

细节！！！整理Vue项目中的那些环境变量

但是我这里想去给他专个明白，因为基于传统Vue2+Webpack的项目与Vue3+Vite**的项
放荡不羁的小雨鸽·2024-01-11 05:03

vue3+vite +element plus日历date picker中文显示

项目情况element-plus默认是英文模式，需要中文模式的话需要设置一下：项目框架（vue3）：vite+JS+element-plus版本：（注意版本兼容，elementplus较低版本：1.xx.xx，不一定适合此法"element-plus":"^2.4.4","vue":"^3.0.4"elementPlus是按需导入，需要使用el-config-provider.nullAVue3b
Lan.W·2024-01-08 03:58

vue3+vite配置静态路由

1.安装路由npminstallvue-router--save2.新建router/index.js文件文件内容import{createRouter,createWebHistory}from'vue-router'importHomefrom'../view/home.vue'constroutes=[{path:"/",name:"index",redirect:"/home",//这个得
在线小白www·2024-01-07 21:44

SVG 文件的引入方式之一：以 URL 的方式引入 SVG 文件，vue2、vue3+Vite vite-svg-loader

SVG文件的引入方式之一：以URL的方式引入SVG文件，vue2、vue3+Vitevite-svg-loader〇、前言：本篇将介绍：vue2使用require()引入svg使用vue3+ts+vite使用vite-svg-loader插件引入svg使用并最终实现代码提示一样使用图标文件一、问题描述我有一个长期维护的开源项目：《标题日记》。近期想从原来的vue2改成现在的vue3+ts+vite
十月ooOO·2024-01-03 14:01

vue3+vite 项目常用库

特别注意：需要使用管理员权限来打开命令提示符，不然会出现各种报错yarnnpminstall-gyarnvite1.使用vite创建项目yarncreatevite2.安装包和运行yarnyarndev3.在vscode安装volar插件和AntDesignVueHelper插件需要注意的是volar与vetur插件相冲突，所以得禁用vetur4.静态文件打包public目录下的静态文件要使用相对
班长胡一可·2024-01-02 22:21

vue3+vite中使用vuex

1.第一种方式在main.ts中创建一个新的store实例import{createStore}from'vuex'//创建一个新的store实例conststore=createStore({state(){return{username:'张三'}},mutations:{changeName(state:any,us:string){state.username=us;}}})constap
程序员正茂·2023-12-30 05:46

vue3+vite组件中使用Cesium粒子系统

一、注意事项1.图片的引用路径必须从根目录（即index.html所在的目录）开始，如果使用相对路径，也要返回到根目录再转到对应的目录。//第一种，直接从根目录开始image:'src/assets/particles/BlowingSnow.png'//第二种，相对路径先返回到根目录，再转到对应目录image:'../../src/assets/particles/BlowingSnow.png
程序员正茂·2023-12-30 05:10

Vue3 +Vite项目部署遇见的问题

项目场景：Vue3+Vite部署单页。参考链接：Vue3ViteJavaScript问题描述在部署Vue3项目时，敲入命令npmrundev，显示Vite不是内部或外部命令。
buzzaz·2023-12-25 07:34

在 Vue3 +Vite环境中使用.env 环境配置文件

在Vue3+Vite环境中使用.env环境配置文件1、安装dotenv2、项目根目录创建.env相关环境配置文件3、在页面或者组件使用当前运行环境配置1、安装dotenvnpminstalldotenv
头上一片天空·2023-12-23 01:40

vue3+vite静态页面部署到gitee pages

vue3+vite静态页面部署到giteepagesgitee创建开源仓库修改项目部署到gitee中随着vue3的成熟，vue2将在2023.12.31停止维护，所以有必要搞一下vue3项目静态页面怎么部署到
demo11111111·2023-12-21 07:04

【VUE】vue3+vite中process.env的配置方法

问题详情在request.js中，使用process.env.BASE_API，需要对请求路径进行全局配置//创建axios实例constservice=axios.create({baseURL:process.env.BASE_API,//api的base_urltimeout:5000//请求超时时间})解决方法在vite.config.js中，添加define:{'process.env'
RogerQianpeng·2023-12-16 03:36

vue3+vite动态路由的实现方式

动态路由的实现方式在vue项目要想实现路由的动态控制，有两种主流的实现方向。基于用户角色判断路由，并且在后端接口进行权限管理基于用户信息单独返回配置的路由信息对于第一种方法，其优点在于不用后端单独配置路由信息，当用户登陆时可直接根据用户的角色进行前端的路由控制。缺点在于每个用户都可以看到页面的所有路由信息，此时则需要后端单独对接口设置不同的角色权限。对于第二种方法，其优点在于每个用户都可以配置自己
✎﹏ℳ๓₯㎕·2023-12-15 02:46

vue3项目安装vite-plugin-mock 项目报错

vue3+vite项目安装了vite-plugin-mock之后，根据官网配置使用，vscode会出现波浪线，启动项目，发现运行不了解决办法：安装vite-plugin-mock2.9.6的版本即可pnpminstallmockjsvite-plugin-mock
张小帆的博客·2023-12-06 03:26

vue3+vite搭建cesium项目

1.创建项目cnpmcreatevite2.安装依赖npmicesiumvite-plugin-cesiumvite-D3.在vite.config.js里进行配置import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importcesiumfrom'vite-plugin-cesium';exportdefaultdefin
m0_63701303·2023-12-03 19:30

vue3+vite 按需自动引入element plus报错(按照官方方法配置失败:Failed to resolve import “element-plus“)

参考文章：https://www.cnblogs.com/cokolxvd/p/15661086.html按需自动引入elementUI首先需要插件unplugin-vue-components和unplugin-auto-importnpmiunplugin-vue-componentsunplugin-auto-import根据elementUIplus官网说明快速开始.需要在vite.con
苏米素·2023-12-02 17:21

excel表格在线编辑（开源版）

vue3+vite例子vue3+vite引入样式及脚本安装所需依赖（excelj
失眠时间·2023-12-02 12:33

vue3+vite在若依项目中使用scss全局变量、公共颜色

做项目一般都需要设置公共的颜色、字体、文字大小等css变量，如果不设置这些css变量的话，项目中颜色来回复制，等需要改变的时候，每个页面都需要进行替换，使用scss的css变量之后，在每个页面使用变量就能达到统一的目的。第一步创建scss文件在src/assets/styles目录下创建self.scss第二步创建变量在self.scss中创建需要的变量，如图，变量需要前面带$符，变量后面最好自己
咸虾米_·2023-12-02 09:24

vue3+vite如何兼容低版本的白屏问题(安卓7/ios11)

1.安装legacynpminstall@vitejs/plugin-legacy--save-dev2.在vite.config.jsimportlegacyfrom'@vitejs/plugin-legacy'//引入exportdefault{plugins:[//加入这个legacy({targets:['Chrome64'],modernPolyfills:true}),],}
lipenghao111·2023-12-02 03:46

vue3+vite 批量引入局部组件及使用

目录结构批量引入组件例如：src/views/oss/components/customComponents.tsimport{ref,defineAsyncComponent,markRaw}from'vue';constmodules=import.meta.glob('./*.vue');//这告诉TypeScript，components.value是一个键为字符串、值为defineAsy
我总是词不达意·2023-12-01 02:44

第二章：VUE3学习（二）----vue3+vite创建项目

在上一篇文章我们已经配置好了环境变量，接下来这一章将在此环境上创建项目。1.使用cmd命令窗口创建项目1.1win键+R键在弹出的运行窗口中输入cmd如下图在弹出的对话框中，使用命令行进入到你要创建项目的文件夹，我的就放在了E：development\vue\vue3中。1.2创建项目然后使用以下命令创建项目：[email protected]接着进行以下操作然后根据提示启动项目安装完成如下提示
fly1157932256·2023-11-30 10:50

【vue3】vue3-json-viewer使用

在使用vue3+vite开发时，发现需要用到显示json数据组件，发现vue-json-viewer只能兼容vue2，于是花了一个小时，重写的vue3的适配。
不停喝水·2023-11-30 05:32

Vue 3 + vite技术架引入静态文件的问题（require和import方式）

Vue3+vite技术架无法使用require()的方式引入静态文件使用Vue3+vite技术架开发过程中，引入静态资源时，习惯性使用require()引入，突然发现报错了。
start_sea·2023-11-29 11:23

【Vue3+Vite】解决build后空白页的问题

目录Hash模式HTML5模式（历史模式）配置Nginx配置SpringBootHash模式build后空白页的问题可能是使用的是历史模式，因为Vue是一个单页的客户端应用，如果没有适当的服务器配置，访问会得到一个404错误。使用Hash模式接口解决这个问题，因为使用Hash模式后由于这部分URL从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。缺点就是对SEO不友好。配置：impo
寂夜江潮·2023-11-27 15:08

uniapp vue3+vite 小程序转H5

记录一下小程序转H5遇到的问题目录1.图片src无效时显示白框2.请求显示跨域3.小程序中样式写100vh正好满屏，在H5中100vh会因为标题栏的问题超出一部分4.H5端不支持保存图片的API5.H5打包文件引用路径不对6.打包后有些样式丢失7.打包后uni的方法丢失，报错xxxisnotafunction1.图片src无效时显示白框解决方法：css设置状态img[src=""],img:not
哈大饼·2023-11-26 10:14

Vue3+vite 处理静态资源，解决服务器不显示动态循环img问题

但在vue3+vite中，不支持require语法，因此使用require会报undefined，所以官方推荐使用import来动态渲染静态资源。
爱吃鱼的酱酱仔·2023-11-25 12:46

vue3+vite使用import.meta.glob实现自动引入文件全局注册

背景以往在vue中注册全局组件，都是需要先手动引入需要注册全局组件的文件，然后挨个注册，//在main.ts中importAComfrom'@/components/A.vue';importBComfrom'@/components/B.vue';Vue.component('a-com',ACom);Vue.component('b-com',BCom);缺点就是需要频繁的手动引入手动注册，重
张大栗子·2023-11-23 19:54

Vue3+vite使用scss全局变量

Vue3+vite使用scss全局变量踩坑首先需要下载依赖(vue3直接使用sass，不需要再用node-sass)npminstallsasssass-loader-D然后使用scss全局变量需要在vite.config.js
七月 安生·2023-11-22 15:12

【vite】启动项目时报错：Cannot find module ‘worker_threads‘

启动新clone的vue3+vite项目时报如下错误：Cannotfindmodule‘worker_threads’Error:Cannotfindmodule'worker_threads'atFunction.Module
zhaojingj_·2023-11-22 04:33

【BUG】第一次创建vue3+vite项目启动报错Error: Cannot find module ‘worker_threads‘

问题描述第一次创建vue3+vite项目启动报错如下：Error:Cannotfindmodule'worker_threads'atFunction.Module.
零度念者·2023-11-22 03:23

Vue3+Vite实现工程化，插值表达式和v-text以及v-html

1、插值表达式插值表达式最基本的数据绑定形式是文本插值，它使用的是"Mustache"语法，即双大括号{{}}插值表达式是将数据渲染到元素的指定位置的手段之一插值表达式不绝对依赖标签，其位置相对自由插值表达式中支持javascript的运算表达式插值表达式中也支持函数的调用letmsg="hellovue!";lethello=function(){return"helloworld!"};let
丁总学Java·2023-11-20 09:17

Vue3+Vite实现工程化，ref初次接触响应式和setup语法糖

1、App.vue/*functionsetup(){letnum=9;}*///vue2中所有的变量都是响应式的，但是vue3中默认所有的变量都不是响应式import{ref}from"vue";/*exportdefault{setup(){letnum=ref(9);letincre=function(){num.value++;};letdecre=function(){num.value
丁总学Java·2023-11-20 09:47

Vue3+Vite实现工程化，attribute属性渲染v-bind指令

想要渲染一个元素的attribute，应该使用v-bind指令由于插值表达式不能直接放在标签的属性中，所有要渲染元素的属性就应该使用v-bindv-bind可以用于渲染任何元素的属性，语法为v-bind:属性名='数据名'，可以简写为:属性名='数据名'import{ref}from"vue";letstr="hello2024";letmyType=ref("checkbox")constdat
丁总学Java·2023-11-20 09:47

Vue3+Vite实现工程化，响应式基础

letcounter=0;functionshow(){alert(counter)}-{{counter}}+显示counter值
丁总学Java·2023-11-20 09:47

Vue3+Vite实现工程化，事件绑定以及修饰符

我们可以使用v-on来监听DOM事件，并在事件触发时执行对应的Vue的Javascript代码。用法：v-on:click="handler"或简写为@click="handler"vue中的事件名=原生事件名去掉on前缀如:onClick-->clickhandler的值可以是方法事件处理器，也可以是内联事件处理器绑定事件时，可以通过一些绑定的修饰符，常见的事件修饰符如下@click.once:
丁总学Java·2023-11-20 08:41

vue3+vite中再也不用单独页面引入vue了，神器：unplugin-vue-components/vite

前言：你是否还在为vue3项目中每个组件都需要单独引入vue而烦恼着，实际vite有一个插件能很好的解决这个问题，那就是unplugin-auto-import/vite使用步骤：1、安装npm/cnpm/pnpm/yarn都可以，装上下面两个插件unplugin-auto-import/vite2、vite.config.js中配置importAutoImportfrom'unplugin-au
浩星·2023-11-19 00:46

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

vue3+vite发布自定义组件到npm初始化项目编写组件配置打包组件上传到npm测试组件库初始化项目//创建项目pnpmcreatevitevue-test-app--templatevue-ts//
FenceRain·2023-11-18 17:09

vue3+vite中配置路径别名@

1、在项目中安装依赖包安装@types/node这个配置地址时会用到npminstall@types/node--save-dev2、修改vite.config.ts配置路径别名@import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom"path";//这个path用到了上面安装的@types/nod
一室易安·2023-11-17 08:16

vue3+vite配置路径别名@

配置路径别名1.安装yarnadd@types/node-D2.修改vite.config.tsimport{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importpathfrom"path";//这个path用到了上面安装的@types/node//https://vitejs.dev/config/exportdefau
码农键盘上的梦·2023-11-17 08:42

这是一份保姆级Vue3+Vite实战教程

写在前面注：本文首发掘金签约专栏，此为文章同步！很长时间没有更新文章了，由于这次签约专栏不能和之前的专栏重复，外加最近又有很多小伙伴问我Vue3在实战中的注意事项和技巧，我想了想，决定写一个Vue3实战专栏，我理解的项目实战，就是大家在看到这篇文章的时候，我刚创建好项目，然后目前码字的我就是在一边写项目一边写文章。在刚刚开始接触前端的时候就一直想写一个工具大全的网站，一直没闲下来写，正好凑着这个机
isboyjc·2023-11-16 22:25

vue3+vite的项目报错 await import(‘source-map-support‘).then((r) =＞ r.default.install()) ^^^^^Synta

awaitimport('source-map-support').then((r)=>r.default.install())^^^^^SyntaxError:Unexpectedreservedword查看一下node版本报错原因是node版本的问题。要使用16之上的版本我的电脑安装了nvm可以查看目前已有的node版本。不会安装nvm的参考这个
夏天想·2023-11-16 10:38
上一页 1 2 3 4 5 6 7 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他