Vue3+Vite

Vue3+vite打包配置及部分打包优化~

这里介绍的是vite项目的打包配置，若想了解webpack打包配置可看我的其他博客。（下面来介绍下vite打包配置的步骤）1、步骤一：配置base。(为什么需要配置base？这里配置base主要是修改根路径，一般我们在开发环境中引用静态资源可能使用的是绝对路径，但是一旦打包部署到服务器上后可能会报404,无法正确的获取的资源。)//在vite.config.ts中import{defineConf
炒毛豆·2024-09-09 02:39

Vue3+Vite 导航与内容div都填了背景，打包的时候，发现直接报错(Rollup failed to resolve import “resource/img/xx.jpg“)的解决

1、先上个打包时报错的图：2、上个一开始的代码：-->上面的代码，在测试的时候，一切都正常的，但是在打包的时候，直接通不过。3、我们来通过定义import解决这个问题：constwordImg=ref('resource/img/word.jpg');说明：也就是我们用ref来包裹一下就可以了，当然这个里的src记住前面加一个：冒号。4、然后我们发现style中的图片打包时，没有报错，但是上传完成
花花鱼·2024-08-30 21:36

vue3+vite 实现动态引入某个文件夹下的组件 - glob-import的使用

importUserFormfrom'./components/UserForm.vue';importTableListfrom'./components/TableList.vue';importBarChartfrom'./components/BarChart.vue';constcurrentActive=ref('UserForm')constmyComponents=reactive
陌上烟雨寒·2024-08-30 14:51

vue3 使用element-plus动态渲染Icon图标

今天使用vue3+vite重构项目的时候，构建侧边栏的时候需要动态渲染图标之前的写法是这样就可以写一个数组，动态的绑定class但是在vue3中不能这样使用官方给出的实例是这样的但是这样动态渲染就不行了
山野见·2024-08-24 20:56

Vue3+vite搭建基础架构（8）--- 使用pinia-plugin-persist

Vue3+vite搭建基础架构（8）---使用pinia-plugin-persist说明官方文档安装pinia-plugin-persist使用pinia-plugin-persist测试pinia-plugin-persist
谁不想飞舞青春·2024-02-20 19:26

Vue3+vite搭建基础架构（9）--- 使用vite-plugin-svg-icons

Vue3+vite搭建基础架构（9）---使用vite-plugin-svg-icons说明安装vite-plugin-svg-icons使用vite-plugin-svg-icons添加svg-icon
谁不想飞舞青春·2024-02-20 19:26

Vue3+vite搭建基础架构（10）--- 使用less和vite-plugin-vue-setup-extend

Vue3+vite搭建基础架构（10）---使用less和vite-plugin-vue-setup-extend说明官方文档安装less测试less表达式安装vite-plugin-vue-setup-extend
谁不想飞舞青春·2024-02-20 19:26

Vue3+vite搭建基础架构（11）--- 菜单栏功能和Tab页功能实现

Vue3+vite搭建基础架构（11）---菜单栏功能和Tab页功能实现说明删除项目中不需要的文件userStore全局属性代码菜单栏代码Tab页代码解决浏览器输入地址时不会打开tab页问题和切换tab
谁不想飞舞青春·2024-02-20 19:23

vue3+vite插件配置系列1-vite-plugin-pages搭配vue-router

介绍vite插件，可以读取文件夹下的vue文件，自动生成vue-router的路由信息，这样以后每次有新的vue页面增加，都不用去更改vue-router的路由信息代码了，减少了工作量使用1.下载[email protected]配置importPagesfrom"vite-plugin-pages"export
永远不会太晚·2024-02-20 17:51

vue3+vite在vite中配置跨域

在vite.config.js中配置import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path';//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()],base:"./",//打包路径resolve:{al
bsefef·2024-02-10 00:43

在vue3+vite中 使用require

第一步先安装插件npmivite-plugin-require-transform--save-dev第二步导入importrequireTransformfrom'vite-plugin-require-transform';第三步在vite配置文件exportdefaultdefineConfig({plugins:[requireTransform({fileRegex:/.js$|.vue
_斯洛伐克·2024-02-08 23:11

【JavaWeb】头条新闻纯JavaWeb项目实现 项目搭建 数据库工具类导入 跨域问题 Postman 第一期 (前端Vue3+Vite)

文章目录一、项目简介1.1微头条业务简介1.2技术栈介绍二、项目部署三、准备工具类3.1异步响应规范格式类3.2MD5加密工具类3.3JDBCUtil连接池工具类3.4JwtHelper工具类3.4JSON转换的WEBUtil工具类四、准备各层的接口和实现类4.1准备实体类和VO对象4.2DAO层接口和实现类4.3Service层接口和实现类4.4Controller层接口和实现类4.4.1Por
道格维克·2024-02-08 19:51

Vue3.4+element-plus2.5 + Vite 搭建教程整理

一、Vue3+Vite项目搭建说明：Vue3最新版本已经基于Vite构建，关于Vite简介：Vite下一代的前端工具链，前端开发与构建工具-CSDN博客1.安装并创建Vue3应用npmcreatevue
天马3798·2024-02-07 08:51

ele-h5项目使用vue3+vite开发：第三节、自定义hooks-useToggle实现搜索页展示切换

需求分析点击首页搜索框，出现搜索页点击搜索页,隐藏搜索页,展示首页新建搜索页组件实现效果hooks介绍理解hooks就是将去改变一个参数值时，页面也会更新对应的值的想法、抽象，用代码实现的地方如何实现一个hooks在src（source）目录下创建一个use文件夹用来存放hooks文件在hooks文件中创建一个hooks写一个函数并用export来导出给对应的组件使用。该函数是用来接收和返回相关h
_沐晨·2024-02-04 09:28

ele-h5项目使用vue3+vite开发：第四节、业务组件-SearchView组件开发

需求分析展示切换动画搜索框输入文字，自动发送请求搜索结果展示搜索状态维护历史搜索展示，点击历史搜索后发送请求历史搜索更多切换动画效果importOpSearchfrom'@/components/OpSearch.vue'import{ref}from'vue'import{fetchSearchData}from'@/api/search'importtype{ISearchResult}fro
_沐晨·2024-02-04 09:25

vue3 vuedraggable draggable element must have an item slot

vue3+vite看官网使用这种{{element.name}}实战可看这篇
Roottt_·2024-02-03 09:54

【Vue3+Vite】Vue3视图渲染技术 快速学习 第二期

文章目录一、模版语法1.1插值表达式和文本渲染1.1.1插值表达式语法1.1.2文本渲染语法1.2Attribute属性渲染1.3事件的绑定二、响应式基础2.1响应式需求案例2.2响应式实现关键字ref2.3响应式实现关键字reactive2.4扩展响应式关键字toRefs和toRef三、条件和列表渲染3.1条件渲染3.2列表渲染四、双向绑定五、数据监听器一、模版语法Vue使用一种基于HTML的模
道格维克·2024-02-03 06:16

【Vue3+Vite】路由机制router 快速学习 第四期

文章目录路由简介路由是什么路由的作用一、路由入门案例1.创建项目导入路由依赖2.准备页面和组件3.准备路由配置4.main.js引入router配置二、路由重定向三、编程式路由(useRouter)四、路由传参(useRoute)五、路由守卫总结路由简介路由是什么路由就是根据不同的URL地址展示不同的内容或页面。页面切换路由的作用单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升
道格维克·2024-02-03 06:43

基于VUE3+Nodejs+MySQL实现的新闻搜索引擎系统源码+数据库

毕业设计基于VUE3+Nodejs+MySQL实现的新闻搜索引擎系统源码+数据库前端：VUE3+Vite
梦の落花·2024-02-02 23:36

Vue3+vite搭建基础架构（3）--- 使用dayjs

Vue3+vite搭建基础架构（3）---使用dayjs说明官方文档vite.config.js别名配置安装dayjs安装命令使用dayjs将dayjs封装为自己的日期工具类使用dataUtil.js日期工具类示例说明这里记录下自己在
谁不想飞舞青春·2024-02-02 19:17

Vue3+vite搭建基础架构（4）--- 使用axios

Vue3+vite搭建基础架构（4）---使用axios说明官方文档安装axios安装命令使用axios测试参数以对象形式传参测试参数在url地址后面拼接传参说明这里记录下自己在Vue3+vite的项目使用
谁不想飞舞青春·2024-02-02 19:17

Vue3+vite搭建基础架构（5）--- 使用vue-i18n

Vue3+vite搭建基础架构（5）---使用vue-i18n说明官方文档安装vue-i18n使用vue-i18n测试vue-i18n的国际化配置说明这里记录下自己在Vue3+vite的项目使用vue-i18n
谁不想飞舞青春·2024-02-02 19:14

【Vue3+Vite】Vue生命周期与组件 快速学习 第三期

文章目录一、Vue生命周期1.1生命周期简介1.2生命周期案例二、Vue组件2.1组件基础2.2组件化入门案例2.3组件之间传递数据2.3.1父传子2.3.2子传父2.3.3兄弟传参总结一、Vue生命周期1.1生命周期简介每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数
道格维克·2024-02-02 07:15

ele-h5项目使用vue3+vite开发：第二节、search 搜索框组件开发

如何设计一个组件需求分析布局contentleft-iconbodyinput-controlright-iconaction功能使用defineEmits定义组件的事件在组件的scriptsetup里如何定义事件使用defineEmits（）定义先声明事件接口interfaceIProps{showAction?:booleanbackground?:stringplaceholder?:str
_沐晨·2024-02-02 02:16

Vue3+vite引入Tailwind CSS

TailwindCSS是一个为快速创建定制化UI组件而设计的实用型框架。与其他CSS框架或库不同，TailwindCSS组件没有预先设置好样式。可以使用Tailwind的低级实用类来为CSS元素设置样式，如margin、flex、color等。自从2017年发布以来，TailwindCSS越来越受欢迎，因为它允许开发者创建独特的UI，而不被UIkit规则所束缚。引入tailwindcss中文文档t
QGS-CD·2024-02-02 00:31

Vue3+vite搭建基础架构（1）---新建项目

Vue3+vite搭建基础架构（1）---新建项目说明官方文档创建vite项目启动项目说明这里记录下自己用Vue3+vite的搭建过程，不使用ts语法，方便以后直接使用。
谁不想飞舞青春·2024-02-01 14:08

Vue3+vite搭建基础架构（2）--- 使用Element Plus

Vue3+vite搭建基础架构（2）---使用ElementPlus说明官方文档vite-demo目录结构说明安装ElementPlus安装命令使用ElementPlus组件组件显示语言为英文问题说明这里记录下自己在
谁不想飞舞青春·2024-02-01 14:02

vite生产环境报错 TypeError: Failed to fetch dynamically imported module: xxx

问题描述vue3+vite项目：有时跳转页面会卡住，控制台信息如下：TypeError:Failedtofetchdynamicallyimportedmodule:xxx信息收集用户端复现了问题，从现场获取到控制台日志
Thetimezipsby·2024-01-31 17:09

vue 3.0 +vite rem 适配

vue3+vite安装postcss-pxtorem1、安装依赖npminstallpostcss-pxtorem-Dnpminstallamfe-flexible-D2、配置vite.config.tsimportpostCssPxToRemfrom"postcss-pxtorem"exportdefaultdefineConfig
Joan_King_·2024-01-30 09:11

vue3+vite使用scss

1、安装依赖npminstallsass-d2、配置vite.config.jscss:{preprocessorOptions:{scss:{additionalData:'@import"@/assets/styles/main.scss";'}}},3、在对应目录下创建main.scss$blue:#3385ff4、在对应文件引用变量，成功！
xfq_z·2024-01-28 16:48

vue3+vite中如何打包添加随机号解决页面缓存更新不及时问题

问题：公众号h5页面调整后存在缓存问题，只有点击右上角三个点点里刷新才会更新修改后的内容。解决：给打包的文件添加时间戳使客户端强制拉取最新的文件（推荐）vite配置官方文档import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from'path'const**Timestamp**=newDate
爱吃爱喝·2024-01-27 12:01

vue3+vite 配置反向代理和跨域 设置端口号

server跨域代理在vite.config.ts文件中直接配置exportdefaultdefineConfig({//其他配置...//设置反向代理，跨域server:{//host:'0.0.0.0',//设置地址：http://localhostport:4500,//设置服务启动端口号//open:true,//设置服务启动时是否自动打开浏览器
一室易安·2024-01-27 01:59

vue3+vite中使用环境变量 .env 的一些配置情况说明

在项目文件中新建文件.env.env.pro两个文件其中.env是默认设置.env.pro为正式环境设置1、设置.env中的内容信息注意vue3+vite必须使用VITE开头的配置信息否则无法获取NODE_ENV
一室易安·2024-01-27 01:29

开发 Chrome 浏览器插件时进行 Vue3+Vite 多页面多入口配置

使用Vite开发Chrome插件时，构建多页面以及多js文件因为发现Vite多页面构建有很多分歧以及问题点，所以我把我在Chrome插件开发上面使用到的Vite多页面以及多入口文件构建配置单独拿出来开发Chrome插件是，一般会需要一个popuphtml页面，有时候还会需要一个contenthtml页面，但是还需要service-worker.js文件以及content.js文件一、Chrome插
gqkmiss·2024-01-26 19:37

Vue3+Vite使用Puppeteer进行SEO优化（SSR+Meta）

1.背景【笑小枫】https://www.xiaoxiaofeng.com上线啦资源持续整合中，程序员必备网站，快点前往围观吧~我的个人博客【笑小枫】又一次版本大升级，虽然知道没有多少访问量，但我还是整天没事瞎折腾。因为一些功能在Halo上不太好实现，所以又切回了Vue3项目，本文就是对于Vue单页面项目SEO优化的一个简单的完整方案。此次优化的最大好处，就是SSR时对已有的vue项目0侵入，不需
笑小枫·2024-01-26 07:12

使用Sass在Vue 3 + Vite项目中实现样式编写与全局抽取

简介：在Vue3+Vite项目中，使用Sass预处理器可以极大地提升样式编写的效率和可维护性。本篇博客将介绍如何在Vue3+Vite项目中使用Sass语法编写样式，以及如何将Sass样式抽取到全局中。
A丶尘土·2024-01-25 08:28

Vue3+Vite 利用postcss-pxtorem移动端适配

1.介绍postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。介绍amfe-flexibleamfe-flexible是配置可伸缩布局方案，主要是将
哒哒哒Q·2024-01-23 21:56

vue3+vite 封装axios请求

vue3+vite封装axios请求安装axios创建axios实例封装请求方式封装请求接口vue中调用安装axiosnpminstallaxios创建axios实例//http/index.jsimportaxiosfrom'axios'import
小李不小·2024-01-23 21:28

vue3+vite：封装Svg组件

前言在项目开发过程中，以svg图片引入时，会遇到当hover态时图片颜色修改的场景，我们可能需要去引入另一张不同颜色的svg图片，或者用css方式修改，为了方便这种情况，需要封装svg组件来自定义宽高和颜色，优化使用。1.什么是SVGSVG(ScalableVectorGraphics)是一种基于XML的矢量图形格式，用于描述二维图形和图像。与传统的栅格图像（如JPEG、PNG）不同，SVG使用数
儒雅的曹曹曹·2024-01-21 07:58

vue3+vite创建项目--（傻瓜式教程）

1、运行创建项目命令#使用npmnpmcreatevite@latest#使用yarnyarncreatevite#使用pnpmpnpmcreatevite剩下的就是启动以及一些配置信息2、vite+vue3路由配置信息npminstallvue-router@4在src目录下新建目录叫“router”，新建一个js文件叫“index.js”，文件内容如下：//导入router所需的方法impor
Bubluu·2024-01-20 11:43

vue3+vite 搭建项目

第一步npminitvite@latest当然，我在建项目的时候输入这个命令行的时候，报错了，提示安装依赖，执行如下命令：npminstall-gcreate-vite全局安装create-vitecdxxxnpminstallnpmrundev之后就按照步骤选择vuets或者js语言就可以了搭建好项目之后，我们就开始新建路由文件以及views文件夹了安装依赖npminstallvue-route
前端~·2024-01-19 18:26

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
上一页 1 2 3 4 5 6 7 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他