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

花一个多月时间学习写的一个laravel8+vue后台

2020-12-17

系统说明本系统基于laravel8+vue+elementUI开发，实现前后端分离。环境说明php7.4+mysql5.6+nginx+redis接口文档登录界面功能模块历时一个月写的一个基于vue+elementUI后台，包含角色权限、系统设置、文章管理、echarts数据报表、登录等功能。编写后端接口，实现前后端分的一个项目，经过一个多月业余时间的学习和编写，算是基本完成了项目的打包和上线，算是入了门吧。

Vue实现路由懒加载，路由优化策略

2020-12-16

223 0

当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同代码块，然后当路由被访问的时候在加载对应组件，这样就更加高效了。如何实现路由懒加载呢？1、安装@babel/plugin-syntax-dynamic-import或命令安装npminstall--save-dev@babel/plugin-syntax-dynamic-import2、在label.config.js配置中声明该插件"@babel/plugin-syntax-dynamic-import"3、将路由改为按需加载形式，示例代码如下constLogin=()=>import(‘/components/Login.vue’) constHome=()=>import(‘/components/Home.vue’)

vue如何打包项目，vue打包项目上线教程

2020-12-13

287 0

当我们做好项目，最后一步就是打包项目，部署到线上了。部署方法都两种，一个是通过vue的UI面板，一种是通过命令。1、Vue UI面板-简单方便我们点击UI面板左边的任务-bulid，然后再点击运行。2、进入项目根目录。通过命令打包npmrunbuild以上两者都会在项目根目录创建dist文件，也就是我们打包好的项目可以看到目录下除了index.Html文件外，还有就是样式文件了，我们将其部署到服务器上即可访问。以上好就是vue打包项目的方法。

vue实现监听回车键，点击回车键出发登录按钮

2020-12-11

261 0

用户在输入账号密码以及验证码，结束后，习惯性按下回车触发按钮登录，符合用户习惯，增加用户体验度。created(){ var_this=this; document.onkeydown=function(e){//按下回车提交 letkey=window.event.keyCode; //事件中keycode=13为回车事件 if(key==13){ _this.login() } }; },登录方法methods:{ login(){ console.log('触发登录按钮') } }

Vue+elementUI如何实现表格实现全选删除，批量删除

2020-12-10

349 0

思路：1、表格外部添加批量删除按钮2、表格加入id字段显示和checkbox多选按钮3、data里面定义一个ids数组，用于存储id集合4、点击按钮获取id值，以数组方式传给后端，执行ajax删除5、不管删除成功与否，但页面提示框关闭后，刷新列表模板按钮区域添加点击方法batchDelete(tableChecked) 添加文章批量删除模板表格区域编辑删除逻辑代码区域data(){ return{ tableChecked:[],//被选中的记录数据-----对应“批量删除”传的参数值 ids:[],//批量删除id } }, methods:{ //批量删除 asyncbatchDelete(rows){ constconfirmResult=awaitthis.$confirm('此操作将永久删除所选文章,是否继续?','提示',{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' } ).catch(err=>err) if(confirmResult!='confirm'){ this.ids=[] this.getArticleList() returnthis.$message({type:'info',message:'已取消删除'}) } rows.forEach(element=>{ this.ids.push(element.id) }) const{data:res}=awaitthis.$http.post('article/del',{id:this.ids}) if(res.code!=106){ returnthis.$message.error(res.msg) } this.$message.success(res.msg) this.getArticleList() } }

vue如何通过externals加载外部cdn资源

2020-12-07

206 0

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后单文件体积过大问题。为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部cdn资源。凡是声明在externals中的第三方依赖包，都不会被打包。1、复制一份main.js改名为main-prod.js。2、vue.config.js中红字部分：（当为发布模式时，使用main-prod.js文件，并且设置externals）chainWebpack:config=>{ //发布模式 config.when(process.env.NODE_ENV==='production',config=>{ config .entry('app') .clear() .add('./src/main-prod.js') //通过externals加载外部CDN资源----1 config.set('externals',{ vue:'Vue', 'vue-router':'VueRouter', axios:'axios', lodash:'_', echarts:'echarts', nprogress:'NProgress', 'vue-quill-editor':'VueQuillEditor' }) }) //开发模式 config.when(process.env.NODE_ENV==='development',config=>{ config .entry('app') .clear() .add('./src/main.js') }) },3.public/index.html中引入对应的css文件和js文件： 4、在main-prod.js中可以将element-ui的按需引入和富文本的样式引入注释掉：importVuefrom'vue' importAppfrom'./App.vue' importrouterfrom'@router/index.js' importstorefrom'@store/index.js' //import'@common/components/element.js' import'@mock/index.js' //富文本编辑器 importVueQuillEditorfrom'vue-quill-editor' //import'quill/dist/quill.core.css' //import'quill/dist/quill.snow.css' //import'quill/dist/quill.bubble.css' //将富文本编辑器注册为全局可用的组件 Vue.use(VueQuillEditor,/*{defaultglobaloptions}*/) Vue.config.productionTip=false newVue({ router, store, render:h=>h(App) }).$mount('#app')5、设置：当为发布模式时启用cdn加载，顺便把title值更改一下①vue.config.js中红字部分：（先设置一个isProd值，发布模式下为true，开发模式下为false）chainWebpack:config=>{ //发布模式 config.when(process.env.NODE_ENV==='production',config=>{ config .entry('app') .clear() .add('./src/main-prod.js') //通过externals加载外部CDN资源----1 config.set('externals',{ vue:'Vue', 'vue-router':'VueRouter', axios:'axios', lodash:'_', echarts:'echarts', nprogress:'NProgress', 'vue-quill-editor':'VueQuillEditor' }) //发布模式的isProd为true config.plugin('html').tap(args=>{ args[0].isProd=true returnargs }) }) //开发模式 config.when(process.env.NODE_ENV==='development',config=>{ config .entry('app') .clear() .add('./src/main.js') //开发模式的isProd为false config.plugin('html').tap(args=>{ args[0].isProd=false returnargs }) }) },②public/index.html中红字部分：（当为开发模式时会显示dev-）临床药械试验审查管理系统 6、现在再进行打包，会发现js/chunk-vendors.97b0334e.js已经小了很多，并且element-ui和quill因为体积较小

vue如何实现动态改变title

2020-12-06

173 0

动态改变每个页面标题，通过路由发现变化时改变标题名称1、在main.js下加入如下代码：//动态标题 router.beforeEach((to,from,next)=>{ /*路由发生变化修改页面title*/ if(to.meta.title){ document.title=to.meta.title } next() })2、在路由文件，index.js下加入如下代码：meta:{ title: '名称 '}constroutes=[ { path:'/home', component:Home, redirect:'/wecome', children:[ {path:'/wecome',component:Wecome,meta:{title:'VuePro-主页'}}, {path:'/user',component:User,meta:{title:'VuePro-管理员管理'}}, ] } ]

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

2020-12-04

242 0

前端在使用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效果

2020-12-03

449 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，实现统计图

2020-12-02

178 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教程

2020-12-01

299 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实现图片上传例子，图片上传预览

2020-11-29

324 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 标签页选项卡的使用

2020-11-28

389 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自定义格式化时间全局过滤器，实现格式化时间戳

2020-11-27

243 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树形表格

2020-11-26

445 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获取树形控件的值方法

2020-11-25

579 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 树形控件的使用方法

2020-11-21

365 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

2020-11-19

569 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表格通过作用域插槽自定义输出格式

2020-11-16

256 0

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

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

2020-11-14

279 0

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

vue elementUI如何使用Dialog 对话框

2020-11-12

457 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如何自定义表单验证规则

2020-11-10

383 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'} ] } } },