E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
Vue3+Vite
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
vue.js
前端
javascript
Vue3+vite
使用scss全局变量
Vue3+vite
使用scss全局变量踩坑首先需要下载依赖(vue3直接使用sass,不需要再用node-sass)npminstallsasssass-loader-D然后使用scss全局变量需要在vite.config.js
七月 安生
·
2023-11-22 15:12
scss
vue.js
前端
【vite】启动项目时报错:Cannot find module ‘worker_threads‘
启动新clone的
vue3+vite
项目时报如下错误:Cannotfindmodule‘worker_threads’Error:Cannotfindmodule'worker_threads'atFunction.Module
zhaojingj_
·
2023-11-22 04:33
vue
vue3
前端
node.js
vue
【BUG】第一次创建
vue3+vite
项目启动报错Error: Cannot find module ‘worker_threads‘
问题描述第一次创建
vue3+vite
项目启动报错如下:Error:Cannotfindmodule'worker_threads'atFunction.Module.
零度念者
·
2023-11-22 03:23
Vue3
bug
vite
vue3
Vue3+Vite
实现工程化,插值表达式和v-text以及v-html
1、插值表达式插值表达式最基本的数据绑定形式是文本插值,它使用的是"Mustache"语法,即双大括号{{}}插值表达式是将数据渲染到元素的指定位置的手段之一插值表达式不绝对依赖标签,其位置相对自由插值表达式中支持javascript的运算表达式插值表达式中也支持函数的调用letmsg="hellovue!";lethello=function(){return"helloworld!"};let
丁总学Java
·
2023-11-20 09:17
#
Vue3
前端
Vue3
Vite
v-text
v-html
setup
template
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
setup
ref
value
艾特符号click
button
span
插值表达式
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
v-bind
冒号属性名
前端
Vue3
Vite
Vue3+Vite
实现工程化,响应式基础
letcounter=0;functionshow(){alert(counter)}-{{counter}}+显示counter值
丁总学Java
·
2023-11-20 09:47
#
Vue3
前端
javascript
开发语言
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
vue.js
javascript
前端
Vue3
Vite
preventDefault
stopPropagation
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.0
vue.js
前端
vue3
vue3+vite+ts 发布自定义组件到npm
vue3+vite
发布自定义组件到npm初始化项目编写组件配置打包组件上传到npm测试组件库初始化项目//创建项目pnpmcreatevitevue-test-app--templatevue-ts//
FenceRain
·
2023-11-18 17:09
VUE
npm
前端
node.js
vue.js
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
vue.js
javascript
typescript
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
vue
脚手架
前端
javascript
vue.js
这是一份保姆级
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
macos
docker+jenkins 容器化,自动化部署
vue3+vite
前端项目
docker+jenkins容器化,自动化部署
vue3+vite
前端项目1.docker文档Overview|DockerDocumentation2.基本命令1.dockerimages//查看docker
第七个夏天没有名字
·
2023-11-15 09:49
前端
vue.js
jenkins
docker
vue3+vite
批量引入图片文件
vue3支持批量引入某个文件夹下的所有资源,不用通过importXXXfrom'/路径'的这种方式去一张张引入//eager:true表示静态资源//'/public/imgs'路径下letimageList=import.meta.glob('/public/imgs/*.*',{eager:true})console.log(Object.values(imageList).map(v=>v.
派小鑫
·
2023-11-14 15:07
vue.js
typescript
elementui
vue3+vite+windicss+element-plus+axios+router+cookies 搭建
一、vue3+vite+windicss+element-plus+axios+router安装及使用方法参考下面的视频:课时1.课程介绍_哔哩哔哩_bilibili课时1.课程介绍是
Vue3+Vite
找到快乐的根源
·
2023-11-12 22:35
vue+element
UI
javascript
开发语言
ecmascript
vue3+vite
搭建后台项目-1 引入element-plus 中文包,打包时报错问题
vue3+vite
搭建后台项目-1引入element-plus中文包,打包时报错问题终端报错Ifthe'element-plus'packageactuallyexposesthismodule,tryaddinganewdeclaration
Gik99
·
2023-11-11 21:44
vue3
vue
typescript
vue3+vite
搭建后台项目-2项目 src 别名的配置
src别名的配置在开发项目的时候文件与文件关系可能很复杂,因此我们需要给src文件夹配置一个别名1.找到//vite.config.ts文件mport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'exportdefaultdefineConfig({plugins:[vue()],//添加以
Gik99
·
2023-11-11 21:44
vue3
vue.js
typescript
vue3+vite
搭建后台项目-3 使用自定义插件批量注册全局组件
使用自定义插件批量注册全局组件1.在components文件夹目录下创建一个index.ts文件:用于注册components文件夹内部全部全局组件//引入组件importSvgIconfrom'./SvgIcon/index.vue'importtype{App,Component}from'vue'constcomponents:{[name:string]:Component}={SvgIc
Gik99
·
2023-11-11 21:38
vue3
前端
javascript
开发语言
vue3+vite
打包自动生成dist.zip压缩包(输出后的包名可改变)
先写个生成zip的功能。新建一个zip.js文件,放在和vite.config.js同一级,需先安装插件jszip:npmijszip-D://zip.js打包自动生成zip包,需npmijszip-Dconstplugin=function(fileName='equipMonitorDist',output){constpath=require('path');if(!output)outpu
web老张头
·
2023-11-10 15:48
前端
vue.js
vite
前端项目打包
安装配置
vue3+vite
一、安装1.确保你已经安装了Node.js。访问https://nodejs.org/以获取最新版本的Node.js,推荐安装LTS版本。2.打开命令行或终端,运行以下命令来全局安装Vite:cnpminstall-gcreate-vite3.创建一个新项目。在命令行中运行以下命令,将"my-vue3-vite-project"替换为你想要的项目名称:create-vitemy-vue3-vite
懒员员
·
2023-11-08 18:23
vue
vue.js
前端
typescript
vue 动态路由 axios 访问路径变化
在编写
vue3+vite
项目时,使用动态路由访问axios请求路径发生错误,会额外加一个我们的动态路由路径进来,这不是我们想要的结果,问题如下:vite.config.jsserver:{proxy:{
Chaoerlie
·
2023-11-06 18:25
前端
vue.js
前端
javascript
代理替换字段
官网我这里主要是解决代理替换字段的问题,首先我们需要知道,代理默认会追加字段
vue3+vite
使用rewrite//配置前端服务地址和端口server:{hmr:true,//设置反向代理,跨域proxy
xiaaaa.z
·
2023-11-06 14:54
vue
【Vue3+Vite+bwip-js库】 生成DataMatrix码
前提条件已存在的
vue3+vite
架构前端项目对二维码分类有一定的了解生成的码的样式如下(DataMatrix)该二维码容量如下详情见:DataMatrix介绍
Vue3+Vite
导入bwip-js生成DataMatrix1
Lemoona
·
2023-11-05 11:00
javascript
vue.js
vite
vue3+vite
如何引入本地静态图片
在vite+vue3的项目中,使用img显示本地静态图片,如果直接引入的话不会显示出来,vite找不到对应的图片路径,需要使用下面的方式进行处理。import.meta.url是一个ESM的原生功能,会暴露当前模块的URL。将它与原生的URL构造器组合使用,在一个JavaScript模块中,通过相对路径我们就能得到一个被完整解析的静态资源URL。exportdefault(image)=>{//i
wyy爱学习
·
2023-11-05 07:15
vue3
前端
vue.js
javascript
vue3+vite
<script setup > 配置name属性
//首先安装插件npmivite-plugin-vue-setup-extend-D//vite.config.ts引入importvueSetupExtendfrom'vite-plugin-vue-setup-extend'exportdefault{plugins:[vue(),vueSetupExtend()],}//vue组件直接使用
saturday-yh
·
2023-11-04 01:27
vue3
vue.js
前端
vue3+vite
实现一个后台管理框架,毒蘑菇后台管理。
写后台管理的项目写了很多个了,虽说用的别人的模板,自己专注于自己的业务,保证自己的业务不出错就行了,但是自定义配置又不好去配置,大家用的模板都差不多,用模板自带的业务功能呢后台又得是模板自带的,或者要兼容模板的数据格式,我就想要一个架子模板,其他业务都是我自己来,那么就是这个毒蘑菇-管理啦毒蘑菇后台管理,最基础的后台模板开源地址https://github.com/wurencaideli/dum
23朵毒蘑菇
·
2023-11-01 12:26
vue
前端
前端
javascript
vue.js
后台管理
项目模板
手动搭建 Vue 3 + Vite 项目
除了这样,还可以通过自己手动搭建一个
Vue3+Vite
的项目。
顺芯技术猿
·
2023-10-31 20:36
JS
技术
VUE
技术
vue.js
javascript
前端
vue
vue3+vite
按需引入vxe-table
一、需要安装的模块及版本://
[email protected]
@d.e.f..."vxe-table":"^4.5.12","xe-utils":"^3.5.13""consola":"^2.15.3","vite-plugin-style-import":"^2.0.0",二、配置vite.config.tsimport{createStyleImportPlugin,VxeTableResol
小鱼干儿er
·
2023-10-30 15:05
vue3
平平无奇的解决问题小能手
项目问题
开发语言
typescript
vue3
vite
vxe-table
vue3+vite
rem适配
1、安装lib-flexible和postcss-pxtoremnpmilib-flexiblepostcss-pxtorem-D2、在vite.config.tsconstpostCssPxToRem=require("postcss-pxtorem")css:{postcss:{plugins:[postCssPxToRem({rootValue:32,//1rem的大小propList:['
兜兜里冒糖糖
·
2023-10-29 17:05
vue3+vite
引入图片不能再用require,要使用new Url(完整方法步骤)
由于vite里面没有require(),所以需要封装个工具exportconstgetAssetURL=(image)=>{//参数一:相对路径//参数二:当前路径的URLreturnnewURL(`../assets/img/${image}`,import.meta.url).href}
豆逗逗
·
2023-10-28 01:33
vue3
javascript
vue3
动态图片
图片
vue3+vite
安装element-plus报错解决
vue3+vite
安装element-plus报错解决1,运行项目时控制台报错解决方法1删除node_modules文件夹和package-lock.json2修改package.json3修改vue版本号必须为
Colesyn L.
·
2023-10-27 02:46
vue.js
javascript
前端
vue3+vite
在线预览pdf
效果图代码上一页下一页{{state.pageNum}}/{{state.numPages}}放大缩小关闭importVuePdfEmbedfrom"vue-pdf-embed";//import{createLoadingTask}from"vue3-pdfjs/esm/vue-pdf.js";import*aspdfjsLibfrom"pdfjs-dist";import{reactive,o
朱@
·
2023-10-24 10:57
vue
1024程序员节
vue3+vite
中使用Lottie动画
Lottie通过读取json文件信息实现动画效果官方文档Lottie官网lottie库有众多动画选择下载LottieJSON到项目中安装Lottie包pnpmaddlottie-web模板创建引入lottie-web以及动画json文件importlottiefrom'lottie-web';importtransformJsonfrom"@/assets/json/playLottie.json
六便士的理想
·
2023-10-21 15:13
前端
请问:怎么实现大文件快速上传?
本文只介绍资源分块上传的方式,并且会通过前端(
vue3+vite
)和服务端(nodejs+koa2)交互的方式,实现大文件分块上传的简单功能.梳理思路问题1:谁负责资源分块?谁负责资源整合?
前端开发博客
·
2023-10-20 06:40
java
vue
python
hadoop
js
vue3+vite
配置eslint&prettier
一、创建一个vite+vue3+ts项目npminitvite@latest二、安装eslint依赖
[email protected]
@typescript-eslint/parser@typescript-eslint/eslint-plugin-Deslint:ESLint的核心代码。eslint-plugin-vue:包含常用的vue规范。@typescri
·某某·
·
2023-10-20 05:39
前端
前端
vue
【打包vue前端项目】
文章目录前言一、打包命令二、重新打包三、打包不成功可能存在问题:解决方案:四、其他问题前言实例项目是使用
vue3+vite
一、打包命令默认的打包命令一般为npmrunbuild但是还有其他命令如npmrunbuild
Didicode
·
2023-10-19 08:17
vue
前端
vue.js
npm
nginx
vue3 vite 创建运行项目 端口5000 没有ip访问地址
vue3+vite
运行项目出现问题第一个问题端口号5000的问题上面图片是package.json文件的运行配置默认运行npmrundev使用npmrunserve会出现端口号5000访问不到项目第二个问题使用
奥子
·
2023-10-18 22:37
vue3
javascript
前端
vue3+vite
创建项目
vue3+vite
创建项目1.npminitvite-app项目名称2.cd项目名称3.npminstall《安装项目依赖包》4.npmrundev《启动项目》
不染-9732
·
2023-10-18 14:33
vue
vue.js
前端
npm
Vue3+vite
创建项目
1.使用命令重新创建项目yarncreatevite--templatevue2.进入项目目录cd3.添加Vue-Routeryarnaddvue-router@4--save4.安装依赖并运行yarn&&yarndev
欢乐多~
·
2023-10-18 14:58
Vue学习笔记
vue.js
elementui
javascript
七,
vue3+vite
项目配置--引入element-plus
7.1集成element-plus硅谷甄选运营平台,UI组件库采用的element-plus,因此需要集成element-plus插件!!!官网地址:https://element-plus.gitee.io/zh-CN/pnpminstallelement-plus@element-plus/icons-vue入口文件main.ts全局安装element-plus,element-plus默认支
blue_121
·
2023-10-16 16:34
从零到一搭建管理系统
vue.js
前端
javascript
vue3+vite
使用svg图片
一、下载插件yarnaddvite-plugin-svg-icons-D//ornpmivite-plugin-svg-icons-D二、配置1、vite.config.tsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'import{createSvgIconsPlugin}fr
zh814l
·
2023-10-16 10:15
vue.js
前端
javascript
vue3+vite
中使用国际化,vue-i18n插件实现
一、安装npminstallvue-i18n二、在src文件夹下新建locales文件夹,里面新建三个文件,分别是英文词条文件en.ts,中文词条zh.ts,主文件index.ts,分别如下en.tszh.tsindex.tsimportzhfrom"./zh";importenfrom"./en";exportdefault{zh,en,};三、在src同级新建i18n.tsimport{cre
yang_song97
·
2023-10-16 10:45
vue.js
javascript
前端
vue3+vite
项目中使用svg图标
vue3+vite
项目中使用svg图标引言1.vite-plugin-svg-icons插件安装配置2.下载svg图标3.使用svg图标封装svg-icon组件全局注册组件中使用引言项目中有很多地方需要用到
南木元元
·
2023-10-16 10:11
vue
Vite
vue.js
Vue3+Vite
实现引入svg图标
页面展示效果图如下:1.安装依赖插件vite-plugin-svg-iconsnpmivite-plugin-svg-icons2.安装fast-globnpmifast-glob3.配置vite.config.js(或vite.config.ts)importpathfrom"path";import{createSvgIconsPlugin}from'vite-plugin-svg-icons
吃葡萄不吐葡萄皮嘻嘻
·
2023-10-16 10:09
vue3
vue3
vue3+vite
svg图标的使用
这个基本纯属靠大佬,毕竟不会写插件这边就写写过程。首先安装svg相应的开发插件npminstallsvg-sprite-loader-D然后我们使用svg按照vue的开发文档上说都是先封装一个svg组件import{computed}from'@vue/reactivity';constprops=defineProps({name:{type:String,required:true},colo
杨小c丶
·
2023-10-16 10:36
vue3日常
vue.js
前端
es6
Vue3 + Vite 项目使用 svg 加载 iconfont 的最佳实践
目录
Vue3+Vite
项目使用svg加载iconfont的最佳实践1为什么需要使用iconfont?2如何在
Vue3+Vite
项目中使用iconfont?
Vesuvius688
·
2023-10-16 10:04
小技巧
vue.js
javascript
前端
vue3+vite
项目中使用svgIcon
如何在vue2+webpack项目中使用svgIcon?参考:手摸手,带你优雅的使用icon-掘金这篇文章主要介绍如何在vue3项目中优雅的使用图标1、安装插件nodeversion:>=12.0.0viteversion:>=2.0.0npmivite-plugin-svg-icons-D插件地址:GitHub-vbenjs/vite-plugin-svg-icons:VitePluginfor
hdchangchang
·
2023-10-16 10:02
前端
上一页
1
2
3
4
5
6
7
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他