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

vue安装babel-plugin-transform-remove-console插件，去除项目中所有console.log（）打印

前端在使用vue做项目，在做的过程中会使用console.log()来打印数据，vue在开发环境是允许出现console.log()打印的，在生成环境中，打包项目是不允许有console.log()打印了，做项目过程中忘记那些地方有使用打印了，项目一大，也就不好找了，这时我们可以使用babel-plugin-transform-remove-console插件来全部去掉打印本插件可以去除以下两种格式打印console.log("foo"); console.error("bar");安装npminstallbabel-plugin-transform-remove-console--save-dev配置打开项目根目录下的babel.config.js文件，添加如下代码"transform-remove-console"完整代码//项目发布阶段需要用到label插件'transform-remove-console' constprodPlugins=[] if(process.env.NODE_ENV==='production'){ prodPlugins.push('transform-remove-console'); } module.exports={ presets:[ '@vue/cli-plugin-babel/preset' ], plugins:[ [ 'component', { libraryName:'element-ui', styleLibraryName:'theme-chalk' } ], //发布产品时候的插件数组 ...prodPlugins ] }最后执行打包命令即可npmrunbuild

vue+elementUI添加进度条效果，添加loading效果

2天前

83 0

安装nprogrees使用vue ui面板中搜索开发依赖，并安装或者使用命令安装npminstall--savenprogress显示隐藏进度条NProgress.start(); NProgress.done();实例在main.js文件中引入和使用importaxiosfrom'axios' importNProgressfrom'nprogress' import'nprogress/nprogress.css' //配置请求的更路径 global.domain='http://www.laravel8.com/api/' axios.defaults.baseURL=domain //在request拦截器中，展示进度条NProgress.start(); axios.interceptors.request.use(config=>{ //console.log(config) NProgress.start();//展示进度条 config.headers.token=window.sessionStorage.getItem('token') returnconfig }) //在response拦截器中，隐藏进度条NProgress.done(); axios.interceptors.response.use(config=>{ NProgress.done();//展示进度条 returnconfig }) Vue.prototype.$http=axios newVue({ router, render:function(h){returnh(App)} }).$mount('#app')

Vue+element安装echart，实现统计图

3天前

47 0

后台管理系统离不开数据统计，数据统计离不开统计图，本文介绍如何在vue中使用echarts1、安装echarts或通过 npm 获取 echarts，npminstallecharts–save附echarts文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EChartsDemo实例首页数据统计数据报表 //导入echarts importechartsfrom'echarts' exportdefault{ data(){ return{} }, created(){ }, //此时页面上的元素已被渲染完毕 mounted(){ //基于准备好的dom，初始化echarts实例 varmyChart=echarts.init(document.getElementById('main')); //指定图表的配置项和数据 varoption={ title:{ text:'数据报表' }, tooltip:{ trigger:'axis', axisPointer:{ type:'cross', label:{ backgroundColor:'#6a7985' } } }, legend:{ data:['前端','后端','其他'] }, color:['#fb5e8e','#a7e174','#69b5fa'], toolbox:{ feature:{ saveAsImage:{} } }, grid:{ left:'3%', right:'4%', bottom:'3%', containLabel:true }, xAxis:[ { type:'category', boundaryGap:false, data:['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis:[ { type:'value' } ], series:[ { name:'前端', type:'line', stack:'总量', areaStyle:{}, data:[120,132,101,134,90,230,210] }, { name:'后端', type:'line', stack:'总量', areaStyle:{}, data:[220,182,191,234,290,330,310] }, { name:'其他', type:'line', stack:'总量', areaStyle:{}, data:[150,232,201,154,190,330,410] } ] }; //使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }, methods:{ } }

vue-element安装富文本编辑器vue-quill-editor教程

4天前

73 0

在vue ui面板中安装vue-quill-editor依赖命令安装npminstallvue-quill-editor--save# oryarnaddvue-quill-editor使用方法在main.js导入富文本编辑器importVueQuillEditorfrom'vue-quill-editor' import'quill/dist/quill.core.css'//importstyles import'quill/dist/quill.snow.css'//forsnowtheme import'quill/dist/quill.bubble.css'//forbubbletheme将富文本编辑器注册为全局可用Vue.use(VueQuillEditor)页面中使用最终效果

vue-element实现图片上传例子，图片上传预览

6天前

101 0

前端代码：点击上传 Js代码： exportdefault{ data(){ return{ uploadURL:domain+'article/upload', //图片上传请求头 headerObj:{token:window.sessionStorage.getItem('token')}, //预览窗口 previewDialogVisible:false, //图片预览地址 PreviewPath:'' } }, created(){ }, methods:{ //处理图片预览效果 handlePreview(file){ this.previewDialogVisible=true this.PreviewPath=file.url console.log(file.url); }, //处理移除图片的操作 handleRemove(file){ this.addForm.img='' console.log(this.addForm) }, //监听处理图片上传成功 handleSuccess(response){ this.addForm.img=response.data.path //console.log(this.addForm) } } } 参数说明参数说明类型可选值默认值action必选参数，上传的地址string——headers设置上传的请求头部object——multiple是否支持多选文件boolean——data上传时附带的额外参数object——name上传的文件字段名string—filewith-credentials支持发送 cookie 凭证信息boolean—falseshow-file-list是否显示已上传文件列表boolean—truedrag是否启用拖拽上传boolean—falseaccept接受上传的文件类型（thumbnail-mode 模式下此参数无效）string——on-preview点击文件列表中已上传的文件时的钩子function(file)——on-remove文件列表移除文件时的钩子function(file, fileList)——on-success文件上传成功时的钩子function(response, file, fileList)——on-error文件上传失败时的钩子function(err, file, fileList)——on-progress文件上传时的钩子function(event, file, fileList)——on-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用function(file, fileList)——before-upload上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。function(file)——before-remove删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)——list-type文件列表的类型stringtext/picture/picture-cardtextauto-upload是否在选取文件后立即进行上传boolean—truefile-list上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]array—[]http-request覆盖默认的上传行为，可以自定义上传的实现function——disabled是否禁用boolean—falselimit最大允许上传个数number——on-exceed文件超出个数限制时的钩子function(files, fileList)

Vue-ElementUI Steps 步骤条+ Tabs 标签页选项卡的使用

7天前

91 0

Steps 步骤条：引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。Tabs 标签页：分隔内容上有关联但属于不同类别的数据集合。1、在element.js注册标签组件importVuefrom'vue' import{ Button,Form,FormItem,Input,Steps,Step }from'element-ui' Vue.use(Steps) Vue.use(Step)2、使用缩略图角色管理 exportdefault{ data(){ return{ activeIndex:'1' } }, }

vue自定义格式化时间全局过滤器，实现格式化时间戳

8天前

90 0

我们在做vue前端项目的时候，如果后端给到的数据是时间戳的形式，我们要把它改成正常时间格式，可以通过以下方法效果：在main.js下加入以下全局函数//自定义时间函数 Vue.filter('dateFormat',function(originVal){ constdt=newDate(originVal) consty=dt.getFullYear() constm=(dt.getMonth()+'').padStart(2,'0') constd=(dt.getDate()+'').padStart(2,'0') consthh=(dt.getHours()+'').padStart(2,'0') constmm=(dt.getMinutes()+'').padStart(2,'0') constss=(dt.getSeconds()+'').padStart(2,'0') return`${y}-${m}-${d}${hh}:${mm}:${ss}` })调用方法： {{scope.row.created_at|dateFormat}}

vue-element如何使用vue-table-with-tree-grid树形表格

9天前

104 0

有时我们需要使用折叠树形表格，比如以下形式这个功能主要用到这个插件vue-table-with-tree-grid1、插件下载地址：https://github.com/MisterTaki/vue-table-with-tree-grid安装：npm方式:npmivue-table-with-tree-grid-S或者yarn方式 :yarnaddvue-table-with-tree-grid2、引入方式：安装好之后，在main.js下引入importTreesTablefrom'vue-table-with-tree-grid' Vue.component('tree-table',TreesTable)3、使用方法一级二级三级 4、接口请求，模板赋值 exportdefault{ data(){ return{ //权限列表 authList:[], columns:[ { label:'权限名称', prop:'name', }, { label:'路径', prop:'path', }, { label:'权限等级', type:'template', template:'levelss', } ] } }, created(){ //获取所有权限 this.getAuth() }, methods:{ //获取权限列表 asyncgetAuth(){ const{data:res}=awaitthis.$http.get('permission/auth') if(res.code!=0){this.$message.error(res.msg)} this.authList=res.data console.log(res.data) } } } 接口返回数据格式{ "code":0, "msg":"成功", "data":[ { "id":2, "name":"系统管理", "path":"", "pid":0, "route_name":null, "icon":null, "is_menu":0, "level":0, "children":[ { "id":6, "name":"管理员管理", "path":"/user", "pid":2, "route_name":"admin.user.index", "icon":"", "is_menu":0, "level":1, "children":[ { "id":15, "name":"管理员编辑", "path":null, "pid":6, "route_name":"admin.user.userEdit", "icon":null, "is_menu":1, "level":2 }, { "id":14, "name":"管理员状态编辑", "path":null, "pid":6, "route_name":"admin.user.edit", "icon":"", "is_menu":1, "level":2 } ] } ] }

vue-elementUI获取树形控件的值方法

10天前

177 0

在vue中使用elementUI的el-tree树形结构控件，如何获取值呢？以下是vue-elementUI获取树形控件的值获取值constkey=[ ...this.$refs.tressRef.getCheckedKeys(), ...this.$refs.tressRef.getHalfCheckedKeys() ] console.log(key)关于树形控件使用方法参考：vue elementUI Tree树形控件的使用方法

vue elementUI Tree 树形控件的使用方法

14天前

91 0

用清晰的层级结构展示信息，可展开或折叠。效果演示trees.vue代码 Js代码 exportdefault{ data(){ return{ //树形数据源 treesList:[], //树形控件的属性绑定对象 treesProps:{ label:'name', children:'children' }, //默认选择的节点id值数组 defKeys:[1,2] } }, methods:{ //分配权限对话框 asyncshowSetTreesDialog(){ //获取所有权限的数据 const{data:res}=awaitthis.$http.get('permission/trees') console.log(res.data) this.treesList=res.data } } } 数据源格式{ "code":0, "msg":"成功", "data":[ { "id":1, "name":"用户管理", "path":"", "pid":0, "children":[ { "id":6, "name":"用户列表", "path":"/user", "pid":1 } ] } ] }按照上面的数据源格式即可生成树形折叠格式列表

vue判断token是否过期，过期后刷新token

16天前

196 0

前后端分离，vue中以token来判断是否登录，但是token过期如何判断呢？我们可以通过挂载路由导航守卫和响应拦截器来判断在main.js加入如下代码/*响应拦截器*/ axios.interceptors.response.use(function(response){//①10010token过期（30天）②10011token无效 if(response.data.code===1003){ window.sessionStorage.removeItem('token'); router.replace({ path:'/login'//到登录页重新获取token }) }elseif(response.data.token){//判断token是否存在，如果存在说明需要更新token window.sessionStorage.setItem("token",response.data.token);//覆盖原来的token(默认一天刷新一次) } returnresponse },function(error){ returnthis.$message.error(error) })然后在路由文件挂载路由守卫Vue.use(VueRouter) constroutes=[ { path:'/', redirect:'Login' }, { path:'/login', component:Login }, { path:'/home', component:Home, } ] constrouter=newVueRouter({ routes })

vue-elementUI表格通过作用域插槽自定义输出格式

19天前

145 0

效果：我们在使用elementUI表格的时候，我们有时候要使用其他格式，比如按钮等，我们可以通过作用域插槽自定义输出格式代码实现一级二级三级

Laravel+vue-elementUI表格分页使用例子

21天前

128 0

本文结合laravel和vue-element实现前端后端分页，包含增删改查搜索的实现，实现表单数据验证，非空判断。效果展示1、编写后端laravel8接口代码，获取搜索条件，获取显示条数，获取当前页数

vue elementUI如何使用Dialog 对话框

23天前

145 0

什么是Dialog 对话框？在保留当前页面状态的情况下，告知用户并承载相关操作。Dialog 弹出一个对话框，适合需要定制性更大的场景。使用：需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。例子：添加用户取消确定 Js代码 exportdefault{ data(){ return{ //控制添加用户对话框的显示和隐藏 addDialogVisible:false, } }, methods:{ //监听添加用户对话框关闭时间 addDialogClosed(){ this.$refs.addFormRef.resetFields() }, //点击按钮添加新用户 addUser(){ //发起添加用户网络请求 //隐藏添加用户对话框 this.addDialogVisible=false } } }

vue elementUI如何自定义表单验证规则

25天前

152 0

一、elementUI自带了一部分表单验证规则，本文讲解如何使用自定义验证规则来完成密码的二次验证。1.1、首先添加验证邮箱和电话规则和正则表达式//验证邮箱的规则 varcheckEmail=(rule,value,cb)=>{ //邮箱正则表达式 constregEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ if(regEmail.test(value)){ returncb() } cb(newError('请输入合法的邮箱')) } //验证手机号的规则 varcheckTel=(rule,value,cb)=>{ constregTel=/^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/; if(regTel.test(value)){ returncb() } cb(newError('请输入合法的电话')) }1.2、添加表单验证规则对象，validator绑定checkEmail和checkTel验证规则//添加表单验证规则对象 addFormRules:{ email:[ {required:true,message:'请输入邮箱',trigger:'blur'}, {validator:checkEmail,trigger:'blur'} ], tel:[ {required:true,message:'请输入电话',trigger:'blur'}, {validator:checkTel,trigger:'blur'} ] }完整代码演示：验证错误验证通过二、表单代码：三、data方法代码data(){ //验证邮箱的规则 varcheckEmail=(rule,value,cb)=>{ //邮箱正则表达式 constregEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ if(regEmail.test(value)){ returncb() } cb(newError('请输入合法的邮箱')) } //验证手机号的规则 varcheckTel=(rule,value,cb)=>{ constregTel=/^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/; if(regTel.test(value)){ returncb() } cb(newError('请输入合法的电话')) } return{ //获取用户列表的参数对象 queryInfo:{ query:'', //当前的页数 pagenum:1, //当前每页显示多少条数据 pagesize:10 }, UserList:[], total:0, //控制添加用户对话框的显示和隐藏 addDialogVisible:false, //添加用户的表单数据 addForm:{ email:'', tel:'' }, //添加表单验证规则对象 addFormRules:{ email:[ {required:true,message:'请输入邮箱',trigger:'blur'}, {validator:checkEmail,trigger:'blur'} ], tel:[ {required:true,message:'请输入电话',trigger:'blur'}, {validator:checkTel,trigger:'blur'} ] } } },

Vue+elementUI如何实现左侧菜单高亮

26天前

162 0

效果展示1、首先给el-menu组件加上:default-active="activePath"属性，再给子集菜单加上@click="saveNavState(subItem.path)"点击事件。 ||| {{item.name}} {{subItem.name}} 2、Javascript代码：在点击左侧菜单是把对呀的path路径保存到sessionStorage中，把值取出来再赋值给左侧菜单，点击每个二级菜单是给每个activePath重新赋值。exportdefault{ data(){ return{ //被激活的链接地址 activePath:'' } }, created(){ this.activePath=window.sessionStorage.getItem('activePath'); }, methods:{ //保存链接的激活状态 saveNavState(activePath){ window.sessionStorage.setItem('activePath',activePath) this.activePath=activePath } }

Vue使用elementUI通过路由导航守卫控制页面权限

2020-11-05

140 0

路由导航守卫控制访问权限如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面//挂载路由导航守卫 router.beforeEach((to,from,next)=>{ //to将要放行的路径 //from代表从哪个路径跳转而来 //next是一个函数，表示放行 //next()放行next('/login')强制跳转 if(to.path==='/login'){returnnext()} //获取token consttokenStr=window.sessionStorage.getItem('token'); if(!tokenStr){ returnnext('/login') }else{ next() } })

vue中如何使用element弹窗

2020-11-04

165 0

1、在element.js中导入弹窗//导入弹窗 import{Message}from'element-ui' Vue.prototype.$message=Message2、使用方法returnthis.$message.error(‘失败’) returnthis.$message.sucess(‘成功’) returnthis.$message.warning(‘警告’)

Vue配置axios发起登录请求，接口数据方法例子

2020-11-03

157 0

Vue中如何发起请求接口数据方法例子在main.js添加如下代码importaxiosfrom'axios' //配置请求的更路径 axios.defaults.baseURL="http://www.laravel8.com/api/" Vue.prototype.$http=axios 使用方法 exportdefault{ data(){ return{ //登录表单数据绑定对象 loginForm:{ username:'', password:'' }, } }, methods:{ login(){ this.$refs.loginFormRef.validate(asyncvalid=>{ if(!valid){ return; } const{data:res}=awaitthis.$http.post('login',this.loginForm) if(res.code!==0)returnconsole.log(res.msg) console.log(res.msg) }) } } }

Vue elementUI使用阿里iconfont图标库，vue如何引用iconfont图标

2020-10-31

156 0

有时我们在开发项目的时候，前端自带框架图标库不够用怎么办？我们可以引入第三方图标库，以下是引入图标库的方法。1、将下载的font图标库放置\src\assets\目录下2、在main.js中引入//导入字体图标 import'./assets/font/iconfont.css'3、使用字体图标

Vue使用elementUI如何实现点击按钮重置表单，vue如何重置表单

2020-10-30

213 0

resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果1、如何拿到表单实例对象了？我们可以给el-form表单添加ref=””名称可以随意取2、点击按钮重置表当，为重置按钮绑定单击事件@click="resetLoginForm"3、this.$refs.loginFormRef.resetFields();对表单数据重置4、具体代码实例，仅供参考重置 exportdefault{ methods:{ //点击重置按钮重置登录表单 resetLoginForm(){ this.$refs.loginFormRef.resetFields(); } } }

Vue使用elementUI如何实现表单数据验证

2020-10-29

106 0

什么是表单验证？在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。步骤说明：共三个步骤。第一步，为el-form通过属性绑定:rules=””，绑定一个校验规则对象，第二步，在校验规则对象之中定义几个校验规则的属性，第三步，在我们的表单对象中通过prop指定不同校验对象详细代码登录 exportdefault{ data(){ return{ //表单验证规则对象 loginFormRules:{ //验证用户名是否合法 username:[ {required:true,message:'请输入账号',trigger:'blur'} ], //验证密码是否合法 password:[ {required:true,message:'请输入密码',trigger:'blur'} ] } } }, }