Vue,JavaScript框架,前端开发框架,Vue问题集合

Macbook安装vue开发环境，mac配置vue环境、脚手架

2023-06-08

2015 0

Mac端安装vue环境和window端差不多，但也是有点区别，这里博主一开始安装也遇到很多问题，这里写一篇文章记录下第一次在Mac下安装的经历教程，同事也分享给各位果粉开发者。注意苹果电脑中需要在终端使用sudo命令来安装，不然会出现权限问题，另外安装包在官网要选择MacOS版。1、下载Mac版nodejs，官网直通车：https://nodejs.org/en/download2、安装vue，终端执行sudo npm install -g vue 3、安装vue脚手架，终端执行sudo npm install -g;@vue/cli 4、终端运行vue ui，执行命令vue ui 看到上面结果，说明vue环境安装成功了，vue ui 面板

Vue如何使用过滤器

2023-03-28

465 0

很多时候，后端给接口的数据不是我们要的，我们就需要Vue使用过滤器，转换成我们想到的结果数据。模板代码：<template> ;;<div> <p>{{data.actors|actorfilter}}</p> ;;</div> </template> js代码<script> import Vue from 'vue' Vue.filter("actorfilter",function(data){ var newlist = data.map(item=>item.name) return newlist.join(' ') }) </script>

elementUI el-table 表格实现手动选择展示列

2022-09-29

2460 0

一、使用场景：在使用elementui开发表格功能的时候，我们会遇到表格字段列数过多的情况，这时我们就需要对其进行设置，选择是否展示列，默认展示多少列，还有就是到处表格数据的时候，我们可以指定选择列到处，这样体验方面是很好的。二、效果展示：点击操作按，展开筛选类选项三、实现思路：（1）表格默认展示所有字段，每个字段通过 v-if 属性来进行判断是否显示；（2）点击表格最后一列表头（操作栏），弹出选择框；【el-popover】（3）选择框中包括：全选复选框、所有字段复选框组、取消按钮、确定按钮；【el-checkbox-group】（4）选

vue中element-ui固定el-dialog模态窗高度

2022-01-10

3961 0

vue中element-ui固定el-dialog模态窗高度，超出显示纵向滚动条，可以使用下面方法<style lang="css"> .el-dialog { ;margin: 5vh auto !important; } .el-dialog__body { ;height: 75vh; ;overflow: hidden; ;overflow-y: auto; } </style>

vue+file-saver+xlsx导出table表格为excel

2021-10-14

1917 0

1、下载两个依赖npm install file-saver --save; npm install xlsx@0.17.5 --save ;2、封装成一个独立的组件outTable.vue<template> ;;;<el-button size="mini" round type="primary" @click="exportExcel">导出Excel</el-button> </template> ; <script> import FileSaver from 'file-saver' import XLSX from 'xlsx' export default { ;props: { ;;;id: { ;;;;;type: String, ;;;;;default: 'Table' ;;;}, ;;;name: { ;;;;;type: String, ;;;;;default: 'Table' ;;;} ; ;}, ;data () { ;;;return {} ;},

Vue实现点击按钮执行订单数据打印功能

2021-10-13

2406 0

点击按钮实现打印页面的功能，在很多系统中非常常见，以下是vue的一个打印功能插件，供大家参考：1、安装;;npm install vue-print-nb –save 2，引入;安装好以后在main.js文件中引入;;import Print from 'vue-print-nb' ;Vue.use(Print);;//注册 3、使用<el-table border stripe ;id="printTest"> ;;;;;;;;;;;;;;;<el-table-column align="center" type="selection" width="55"></el-table-column> ;;;;;;;;;;;;;;;<el-table-column label="ID" prop="id" min-width="20"></el-table-column> ;;;;;;;;;;;;;;

vue中element-ui设置el-dialog点击空白背景不关闭

2021-10-11

3097 0

vue中使用elementUI框架的el-dialog模态窗口，有时我们会不消息点击到空白蒙版就自动关闭了，我可以关闭这个，这样就不会导致我们辛辛苦苦输入的东西都没了，我们可以给el-dialog加个属性即可;:close-on-click-modal="false" 详细demo: <el-dialog title="添加商品分类" :visible.sync="addDialogVisible"; width="30%" @close="addDialogClosed" :close-on-click-modal="false">  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width=

vue-quill-editor富文本编辑器工具栏汉化教程

2021-08-25

3711 0

效果：vue-quill-editor默认是英文的工具栏，为了方便用户使用个体验，我们可以对它进行汉化。我们通过css样式来对富文本编辑器进行汉化，具体代码如下：<style> .ql-snow .ql-tooltip[data-mode=link]::before { ;;;content: "请输入链接地址:" !important; ;} ;.ql-snow .ql-tooltip.ql-editing a.ql-action::after { ;;;;;border-right: 0px !important; ;;;;;content: '保存' !important; ;;;;;padding-right: 0px !important; ;} ; ;.ql-snow .ql-tooltip[data-mode=video]::before { ;;;;;content: "请输入视频地址:" !import

解决Vue ui安装less和less-loader版本过高不可以用问题

2021-08-13

2870 0

Vue ui可视化界面中直接安装less和less-loader依赖会发现可以安装成功，但是后续使用的时候会提示less-loader版本过高问题解决方法1. 对于less可以直接在可视化界面中安装即可2、less-loader已安装可以卸载，再次安装指定版本cnpm install less-loader@7.1.0 --save-dev 安装好之后就不再报错了，在vue ui面板也可以看到依赖。

解决vue ui 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件

2021-08-12

2971 0

vue ui 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件。1、进入node.js的安装目录中查看一级目录下是否存在vue.cmd指令2、安装vue uinpm install -g vue npm install -g @vue/cli 3、安装完成后，通过如下任意指令查看vue的版本：vue --version / vue -V 4、在此运行vue ui，成功运行

Vue+ElementUI表格实现点击图片预览功能

2021-08-06

4679 0

功能描述：用户点击表格列表其中一张图片，显示弹窗，并显示图片。实现思路：给图片添加点击事件，点击图片获取图片url，展示图片效果展示：实现代码：1、给表格列图片添加点击事件，传递参数<template> <el-table :data="VipList" border stripe @selection-change="handleSelectionChange" v-loading="loading"> <el-table-column align="center" type="selection" width="55"></el-table-column> <el-table-column label="ID" prop="id" min-width="50"></el-table-column> <el-table-

Vue+ElementUI实现点击按钮刷新页面

2021-08-06

3815 0

vue中ElementUI刷新页面代码html按钮代码<template> <div> <a href="javascript:;" title="刷新" class="refresh" @click="refresh()"><i class="el-icon-refresh-left"></i></a> </div> <template> js部分代码：刷新页面主要用到this.$router.go(0)或window.location.reload()<script> export default { methods: { ; // 刷新 ; refresh(){ ; ;this.$router.go(0) ; ;//或 ; ;window.location.reload() ; } } } </script>

Vue+ElementUI实现点击按钮全屏功能

2021-08-05

3531 0

用vue做网站后台的时候，我们有时需要做个点击按钮进入全屏的功能，以下是个案例，共大家参考。按钮模块代码<template> <div> <a href="javascript:;" title="全屏" @click="screen()"><i class="iconfont icon-quanping"></i></a> </div> </template> js部分代码：<script> ;;export default { ;;;;data(){ ;;;;;;return{ ;;;;;;;;//全屏 ;;;;;;;;fullscreen: false, ;;;;;;} ;;;;}, } ;;;;;;screen(){ ;;;;;;;;let element = document.documentElement; ;;;;;;;;;;if (this.fu

vue部署项目实现子目录访问方法

2021-08-04

1662 0

前后端分离，使用同个域名，比如首页使用www.example.com，后台使用www.example.com/admin访问。1、修改路由文件下的index.js，加入base:'/admin/',代码const router = new VueRouter({ ;base:'/admin/', ;routes }) 2、vue.config.js增加如下配置：publicPath: '/admin/' 3、配置好之后，打包项目npm run build 4、服务端新增目录admin，将前端文件上传至该目录即可。

vue 富文本编辑器vue-quill-editor自定义图片上传（非base64图片）

2021-08-03

1612 0

vue-quill-editor有图片上传功能，因为vue-quill-editor是将图片转为base64编码，所以当图片比较大时，提交后台时参数过长，导致提交失败。所以我们需要自定义图片上传，把图片上传到服务器的形式。1、;安装富文本编辑器npm install vue-quill-editor –save 2、;main.js引入编辑器import VueQuillEditor from 'vue-quill-editor' Vue.use(VueQuillEditor); import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' 3、;html代码模块<template> ;;;<div> ;;;;;;;;;;;;;<el-upload ;;;;;;;;;;;;;;clas

Vue ElementUI如何使用组件，组件的使用方法实例

2021-07-25

1794 0

开发项目过程中，涉及重复的代码，比如模态窗，我们可以封装起来，然后采用组件的形式，引入即可，这样也方便维护。以下我们来封装Dialog 对话框组件1、创建Dialog组件我们在项目目录下创建\src\components\Dialog.vue<template> <el-dialog;title="提示";:visible.sync="DialogVisible";width="30%";@close="DialogClosed";> ;;<span>这是一段信息</span> ;;<span;slot="footer";class="dialog-footer"> ;;;;<el-button;@click=&quo

Vue组件如何赋值给父组件

2021-07-24

1803 0

在vue项目开发中，我们遇到重复的代码，就可以封装成组件，这就设计到组件之间的获取值和赋值问题，我们可以通过以下方式传递值给父组件页面。1、子组件赋值：使用this.$emit()this.$emit('tran','Hello;Word')2、父组件页面绑定方法获取值<UploadPhotos;ref="showUpload";@tran="getUser"></UploadPhotos>3、父组件获取到值之后赋值<script> export;default;{ ;;data;();{ ;;;;return;{ ;;;;;;addForm:;{ ;;;;;;;;ad_img:;'', ;;;;;;}, ;; ;;;;} ;;}, ;;compon

vue-quill-editor安装多图上传插件

2021-07-24

1667 0

vue-quill-editor的是使用、安装这里不多说，需要的话可以使用参考这篇文章vue-quill-editor默认只能使用单图上传，很不方便，这里教大家如何安装多图上传插件quill-image-drop-module，就可多张拖拽上传1、;安装npm;install;quill-image-drop-module2、页面引入import;{;ImageDrop;};from;'quill-image-drop-module'; Quill.register('modules/imageDrop',;ImageDrop);在editorOption的modules里配置：imageDrop:true,

关于vue echarts二次渲染不渲染问题的解决方法

2021-07-20

2803 0

vue中用了echarts数据统计图，发现动态赋值不显示，对于不渲染问题，我们只需在methods方法下重新渲染即可解决该问题前端代码：<template> ;;;;<div> <div;id="main";style="width:;100%;height:545px;"></div> <div> <template>js代码：<script> import;*;as;echarts;from;'echarts'; ;;methods:;{ ;;;;async;getSys;();{ ;;;;;;const;{;data:;res;};=;await;this.$http.get('system') ;;;;;;if;(res.code;!=;200);{ ;;;;;;;;;;;this.$me

vue ElementUI使用时间日期、时间选择器的使用方法

2021-07-20

2059 0

效果展示：vue ElementUI提供了三种时间日期1、TimePicker 时间选择器：用于选择或输入日期2、DatePicker 日期选择器：用于选择或输入日期3、DateTimePicker：日期时间选择器，在同一个选择器里选择日期和时间本文主要用到DateTimePicker 日期时间选择器<template> ;;;;<div> <el-form-item;label="时间";prop="addtime"> <el-date-picker;v-model="addForm.addtime";type="datetime";placeholder="选择日期时间";format="yyyy-MM-dd;HH:mm:ss&quo

解决vue-animate-number后端返回数据不渲染问题

2021-07-19

2054 0

最近开发中用到了vue-animate-number组件，发现数据不能通过接口返回的值自动渲染。代码如下<animate-number;from="0";:to="countArt";duration="1000"></animate-number>看似没什么问题，后面才发现没加上:key="countArt"的原因，加上之后就能正确渲染了<animate-number;from="0";:to="countArt";:key="countArt";duration="1000"></animate-number>

Macbook安装vue开发环境，mac配置vue环境、脚手架

Vue如何使用过滤器

elementUI el-table 表格实现手动选择展示列

vue中element-ui固定el-dialog模态窗高度

vue+file-saver+xlsx导出table表格为excel

Vue实现点击按钮执行订单数据打印功能

vue中element-ui设置el-dialog点击空白背景不关闭

vue-quill-editor富文本编辑器工具栏汉化教程

解决Vue ui安装less和less-loader版本过高不可以用问题

解决vue ui 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件

Vue+ElementUI表格实现点击图片预览功能

Vue+ElementUI实现点击按钮刷新页面

Vue+ElementUI实现点击按钮全屏功能

vue部署项目实现子目录访问方法

vue 富文本编辑器vue-quill-editor自定义图片上传（非base64图片）

Vue ElementUI如何使用组件，组件的使用方法实例

Vue组件如何赋值给父组件

vue-quill-editor安装多图上传插件

关于vue echarts二次渲染不渲染问题的解决方法

vue ElementUI使用时间日期、时间选择器的使用方法

解决vue-animate-number后端返回数据不渲染问题

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

Macbook安装vue开发环境，mac配置vue环境、脚手架

Vue如何使用过滤器

elementUI el-table 表格实现手动选择展示列

vue中element-ui固定el-dialog模态窗高度

vue+file-saver+xlsx导出table表格为excel

Vue实现点击按钮执行订单数据打印功能

vue中element-ui设置el-dialog点击空白背景不关闭

vue-quill-editor富文本编辑器工具栏汉化教程

解决Vue ui安装less和less-loader版本过高不可以用问题

解决vue ui 'vue' 不是内部或外部命令，也不是可运行的程序 或批处理文件

Vue+ElementUI表格实现点击图片预览功能

Vue+ElementUI实现点击按钮刷新页面

Vue+ElementUI实现点击按钮全屏功能

vue部署项目实现子目录访问方法

vue 富文本编辑器vue-quill-editor自定义图片上传（非base64图片）

Vue ElementUI如何使用组件，组件的使用方法实例

Vue组件如何赋值给父组件

vue-quill-editor安装多图上传插件

关于vue echarts二次渲染不渲染问题的解决方法

vue ElementUI使用时间日期、时间选择器的使用方法

解决vue-animate-number后端返回数据不渲染问题

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录

解决vue ui 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件