![](https://img-blog.csdnimg.cn/20200327123352184.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 60
分享Vue学习笔记
Incimo
这个作者很懒,什么都没留下…
展开
-
vue/quasar 实现动态路由
项目地址:vue-quasar-manage动态路由动态路由在之前的项目中,权限的操作是预先在前端的路由元信息中设置好的,像这样{ path: '/', name: 'Home', meta: { roles: ['admin', 'user'], title: '主页', }, component: () => import('@/views/home/Home')}但是最近有不少同学想看看我是如何实现后端返回路由,并在前端显示的。于是就写了个dem原创 2021-03-20 00:01:57 · 1461 阅读 · 0 评论 -
vue 将 路由转换为 json 字符串
需要注意的是,forEach和map中使用 async/await ,是无效了,弄了一个晚上,结果还是用普通的 for 来实现同步 /** * 将 asyncRouters 的 roles 初始化为空,同时处理 Component 的懒加载 * component: () => import('../views/home/Home') 转换为 component: '../views/home/Home' * @param asyncRouters *原创 2021-03-18 21:16:28 · 841 阅读 · 0 评论 -
VUE 渲染性能优化
initMaterialIcon () { // 获取图标 materialIcons 下划线格式命名集合 for (const i in materialIconsSet) { this.materialIcons_key.push(this.toLowerLine(i)) } let i = 0 this.timer2 = setInterval(() => { this.group_md = this.group_md.concat(this.material原创 2020-12-25 01:19:46 · 3974 阅读 · 2 评论 -
vue 项目首屏加载性能调优
体积性能优化分析项目体积可以使用webpack的webpack-bundle-analyzer或是 VUE GUI 里自带的webpack Analyzer本项目使用webpack-bundle-analyzer分析如下:主要针对比较通用的一些常规优化:常规的性能优化一般有四种:按需引入CDN 资源1、按需引入最常见的就是 UI 框架和路由页面的按需引入对于quasar按需引入的格式一般如下:import { Quasar, LoadingBar, Dialog, .原创 2020-12-09 00:44:38 · 1554 阅读 · 12 评论 -
vue cli 4快速访问 public 文件夹,同时确保打包并部署到 github 上不会 404
在 main.js 中注入 public 文件夹路径原型// 前往 public 文件夹的路径Vue.prototype.$PUBLIC_PATH = process.env.BASE_URL之后正常使用即可: getMsg () { const query = { url: this.$PUBLIC_PATH + 'data/lottieData.md', method: 'get', responseType: 'text'原创 2020-12-03 01:37:08 · 1223 阅读 · 0 评论 -
在 vue cli 4 项目中引入外部 html 项目,解决 外部 html 跳转到 vue 路由页面 404 问题
最近有个项目,本来使用 jq + bootsrap 开发,因此首页用了 jq + bootsrap 开发为 html 页面,并用 jq 做了很多动画。后来因为种种原因需要使用 vue 开发接下来的页面,但是重新做一个带多组动画的首页很麻烦,于是想到将首页home.html以及它的静态资源assest文件夹作为独立项目引入到 vue cli 中。遇到了不少问题,第一天搞到凌晨2点,没搞明白,第二天不到1个小时搞定…所以说,太累的话,工作效率不高,还浪费时间,还不如睡觉。!!!∑(゚Д゚ノ)ノ怎么做?原创 2020-11-30 14:14:17 · 2324 阅读 · 0 评论 -
vue quasar manage 基于 vue 和 quasar 的中后台前端解决方案
vue-quasar-manage vue-quasar-manage 是一款中后台前端解决方案:基于 vue 和 quasar-ui 实现,quasar-ui 的设计规范来自 Material Design包含动态路由,动态缓存,权限验证等常用功能响应式设计,支持手机 / 平板 / 小分辨率屏幕显示包含 tagView 快捷导航、面包屑导航等 SPA 应用常用功能内置 Material Design 图标集简单的代码逻辑,多种自定义组件,高度可定制...原创 2020-11-21 00:26:38 · 1398 阅读 · 0 评论 -
2020-11-12
Menu 菜单components|-Menu |-BaseMenu.vue # 菜单入口 |-BaseMenuItem.vue # 菜单元素菜单的生成依据是路由中的元信息,因此不需要在另外写菜单,定义好路由元信息即可:import layout from '../components/layout/layout'...{ path: '/about_router', // 路由路径原创 2020-11-17 00:30:48 · 98 阅读 · 0 评论 -
vue 封装 lottie-web
<template> <div id="lottie_box"></div></template><script>import lottie from 'lottie-web'export default { name: 'lottie-web-cimo', data () { return { lottie: {} } }, props: ['animationData', 'path'原创 2020-11-10 15:46:43 · 854 阅读 · 0 评论 -
2020-11-09-01
tagView在SPA中因为没用了浏览器跳转,所以tagView的存在很有必要tagview位置components|-TagView |-tagView.vue # tagView 源文件 |-tagViewUtils.js # tagView 工具类: 增/删本项目中tagView的作用不只是作为快捷导航使用。同时还作为页面缓存<keep-alive>中的标识使用,即,有 tagView存在的话则对应页面的缓存也存在原创 2020-11-09 19:43:10 · 134 阅读 · 0 评论 -
Vue 使用 <keep-alive include> 实现多级 <router-view> 缓存,无限层次缓存
使用 <keep-alive> 实现缓存目前主流的有两种方法方法一:在路由元信息中添加缓存标识:{ path: 'json', name: 'json', meta: { ... keepAlive: true ... }, component: () => import('../views/components/json')},使用 v-if 判断是否缓存<keep-alive> <router-v原创 2020-11-09 15:34:06 · 13603 阅读 · 20 评论 -
VUE 路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘) 说明
最近因为next()遇到了不少问题,在这里记录一下首先是路由守卫,是不是感觉简简单单beforeEach((to, from, next) => { to //是要去的路由 from // 是当前路由 next() // 是放行的意思}但是在看别的项目时常常能看到next('/logon') 、 next(to) 或者 next({ ...to, replace: true }) 这又是啥意思呢其实在路由守卫中,只有next()是放行,其他的诸如:next('/logon') 、 n原创 2020-10-22 22:51:03 · 58716 阅读 · 59 评论 -
vue js验证需要提交的表单数据对象中的属性是否为空
/** * 验证表单要提交的对象的某些属性是否为空 * @param obj 需要提交的对象 * @param args 不需要判断的属性 * @returns boolean */ function isForm (obj, ...args) { let empty = false for (const i in args) { delete obj[args[i]] } for (const key in obj) { // eslint-disable-.原创 2020-09-29 10:57:50 · 991 阅读 · 0 评论 -
vue + quasar 使用递归实现动态多级菜单
菜单初始化入口 menu.vue,初始化侧边栏菜单组建,<my-q-menu/>才是递归开始<template> <q-drawer v-model="is_hide_" show-if-above bordered content-class="bg-grey-2" :width="240" > <q-scroll-area class="fit"> <!-- 递归实现 循环菜单 -->原创 2020-09-15 16:15:27 · 3062 阅读 · 1 评论 -
Vue 项目中的ESLint规则模板
在.eslintrc.js中module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { //在那些环境启用ESLint browser: true, node: true, es6: true, }, extends: ['plugin:vue/recommended', 'eslint:r原创 2020-06-08 13:08:42 · 8273 阅读 · 0 评论 -
Vue cli 使用QRcode在dailog中生成二维码
在package.json中添加模块"qrcode": "^1.4.4"在组件中引入import QRCode from 'qrcode'生成二维码方法: creatlocationQRcode() { const a = 'http://www.baidu.com' // 获取页面的canvas var msg = document.getElementById('msg_qrcode') // 将获取到的数据(val)画到msg(can原创 2020-06-06 20:37:49 · 7830 阅读 · 0 评论 -
分享超赞的Vue教程,看了之后只能感叹:该死的博主为何Vue基础如此扎实
学习这个教程之前,建议先把官方的Vue视频教程过一遍,然后你一定会发现新大陆的。官方的Vue视频教程这个教程除了教你怎么使用Vue之外,还把大量的基础前端技术用通俗易懂的语言传授给你,包括前后端路由,JS 异步编程等等平常经常用到,但是又不知所云的骚操作…作者: TigerChain地址: https://www.jianshu.com/nb/23783223出自 TigerChain ...转载 2020-04-11 02:47:40 · 7608 阅读 · 0 评论 -
2019 使用idea自动创建基于Vue CLI的Vue程序
之前一直是用命令来创建vue,今天发现idea可以用vue.js插件自动创建基于vue-cli的应用PS:我觉得刚刚开始的话还是先用命令行来创建项目比较好1.请确定你已经安装好了环境和插件环境:插件:2.新建staticWeb项目,类型选择vue.js可以看到下面有提示说是基于vue CLI的输入项目名,idea会自动选择你的node:3.点击FINISH等待项目构建完成...原创 2020-04-08 12:03:42 · 8614 阅读 · 0 评论 -
VUE 快速复习笔记适合已经大概学习过的同学快速复习
虽然之前在vue官网学习过,但是发现才半年不用,就有点生疏了,所以现在打算记录一下已备不时之需。1.el挂载点<body> <div id="app1" class="app1"> {{ message + '!'}} {{name}} {{age}}岁 <h2 v-text="message+'!'"></h2> /...原创 2020-03-26 22:22:24 · 643 阅读 · 0 评论 -
来个大白话Vue的axios讲解
axios是Vue用来实现异步通信的,从Vue.js 2.0 版本开始推荐使用 axios 来完成 ajax 请求。axios 其实是一个网络请求库(内部封装ajax)Github开源地址: https://github.com/axios/axios常用于结合网络数据开发应用,如接受外部api开发应用等。先看一下格式:学过jquery的话会发现axios的实现和jqurey的ajax...原创 2020-03-26 22:38:56 · 881 阅读 · 0 评论