1. 地址栏加#号问题:
    Vue-router 中有hash模式和history模式,vue的路由默认是hash模式,一般开发的单页应用的URL都会带有#号的hash模式
    第一步在router/index.js下增加mode:'hidtory',然后再config/index.js下修改assetsPublicPath: './'为assetsPublicPath: '/';如图:
  2. vue循环嵌套,需要命名不同的变量名,来区分。
  3. 更改ElementUI 内部样式:
    通过scopd穿透的方式修改引入第三方组件库样式的方法;
    在Vue文件中的style标签上有一个特殊的属性,scoped。当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化。

  4. 当打包构建的时候,javascript包变得非常大,影响加载:
    解决方法即:用webpack提供的require进行代码分割 来实现按需加载~
    我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件;
    1.require AMD规范写法
    const userCenter = resolve => require(['@/pages/usercenter'], resolve);
    const userInfo = resolve => require(['@/pages/usercenter/userInfo'], resolve);
    const resetPwd = resolve => require(['@/pages/usercenter/resetPwd'], resolve);

    2.require.ensure commomjs规范

    //预加载 懒执行
    require.ensure(['./mod.js'], function(require){//这里数组里是要预加载的模块,不写不会先下载
    var mod = require('./mod.js');
    mod.show();
    });
    require.ensure模块被下载来后【不立即执行】,接着执行回调函数内容。
    AMD模块被下载来【并且模块被执行完后】,再接着执行回调函数内容。

    3.webpack自带的require.include

  5. 测试端跨域
    原因:浏览器的同源策略不允许跨域访问,所谓同源策略是指协议、域名、端口相同。
    解决:采用proxyTable解决。

    proxyTable可以解决我们在vue项目中开发环境的跨域问题,但是无法解决生产环境上的跨域问题,有的时候生产环境上也需要处理跨域问题,这个时候 proxyTable就不管用咯,我们公司目前用的nginx代理

  6. async await处理异步,不需要回调
    async:声明一个异步函数;只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数
    异步函数内部可以使用await。
    await:暂停异步的功能执行(var result = await someAsyncCall())
    放置在Promise调用之前,await强制其他代码等待,直到Promise完成并返回结果;

  7. 当v-if 与 v-for 一起使用时,Eslint代码检查错误提示
    [eslint-plugin-vue]
    [vue/no-use-v-if-with-v-for]
    This 'v-if' should be moved to the wrapper element
    v-for比 vi-if的优先级高,这就意味这v-if讲重复运行每个v-for循环中,所以不推荐一起使用。可以放在循环外,或者放在计算属性里面进行遍历。
  8. vue-router query和params传参(接收参数),$router、$route的区别
    1.query方式的传参和参数的接收
    注意:传参是this.$router,接收参数是this.$route
    $router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
    $route为当前router跳转对象,里面可以获取name、path、query、params等
    //传参:
    this.$router.push({
    path:'/xxx',
    query:{
    id:id
    }
    }) //接收参数:
    this.$route.query.id

    2.params方式传参和接收参数
    注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

    //传参:
    this.$router.push({
    name:'xxx',
    params:{
    id:id
    }
    }) //接收参数:
    this.$route.params.id
    另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示。

  9. 使用watch监听路由(this.$route.params)变化的方法;当路由发生变化的时候执行
      watch: {
    $route: function() {
    var tech_type = this.$route.params.tech_type;
    //执行一些操作
    }
    },

    当有一些数据需要随着另外一些数据变化时,建议使用computed。
    当有一个通用的响应数据变化的时候,要执行一些业务逻辑或异步操作的时候建议使用watch

  10. 使用组件时需要经常使用原型绑定:@click.native=''; 这样,我们就把click事件直接绑定在了原型上了。

  11. 如果把所有请求放在created里面的话,请求过多会,加载太慢会导致页面出现短暂的白屏情况,一般上我写的话,接口不复杂会放created里面,接口多复杂的话会放在mounted里面.。
  12. keep-alive缓存路由组件不刷新
    (keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能)
    当引入keep-alive 的时候,页面第一次进入,hook的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

    二次进来 hook 只触发 activated,退出时触发 deactivated

    keep-alive 之后,created 和 mounted 里面的方法不触发,因为 keep-alive 把它们屏蔽了,也就是把数据缓存起来,所以不再请求。
    1.如果你的某些页面一定要实时请求,可以直接在 activated 这个 hook 做 一下操作。

    2.router-view里加判断,然后在router定义的文件里面在想要缓存的页面多加上“meta:{keepAlive:true}”,不想要缓存就是“meta:{keepAlive:false}”或者不写,只有为true的时候是会被keep-alive识别然后缓存的。

    <template>
    <div id="app">
    <!--缓存想要缓存的页面,实现后退不刷新-->
    <!--加上v-if的判断,可以自定义想要缓存的组件,自定义在router里面-->
    <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view> <!--这里是其他的代码-->
    </div>
    </template>
    import Vue from 'vue'
    import Router from 'vue-router' Vue.use(Router)
    export default new Router({
    {//home会被缓存
    path:"/home",
    component:home,
    meta:{keepAlive: true}
    }
    {//hello不会被缓存
    path:"/hello",
    component:hello,
    meta:{keepAlive: false}
    }
    })
  13. vue 阻止事件冒泡。
    .stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡
    <!-- HTML -->
    <div id="app">
      <div class="outeer" @click.stop="outer">
        <div class="middle" @click.stop="middle">
          <button @click.stop="inner">点击我(^_^)</button>
        </div>
      </div>
    </div>

    扩展:

    .prevent:取消默认事件,等同于JavaScript中的event.preventDefault()。

    .capture:捕获事件,与事件冒泡的方向相反,事件捕获由外到内。
    .self:只会触发自己范围内的事件,不包含子元素。
    .once:只会触发一次。

vue后台管理系统遇到的注意事项以及总结的更多相关文章

  1. vue后台管理系统权限处理

    vue后台管理系统权限 1.权限问题:用户和管理员进入管理系统看到的模块是不一样的,管理员看的的要比用户看到的多.需要用到动态加载路由,router.addRouters()来动态的挂载路由 // 1 ...

  2. VUE 后台管理系统权限控制

    谈一谈VUE 后台管理系统权限控制 前端权限从本质上来讲, 就是控制视图层的展示,比如说是某个页面或者某个按钮,后端权限可以控制某个用户是否能够查询数据, 是否能够修改数据等操作,后端权限大部分是基于 ...

  3. 完整开发vue后台管理系统小结

    最近业余帮朋友做两个vue项目,一个是面向用户纯展示系列的(后统称A项目),一个是后端管理系统类的(后统称B项目).两者在技术上都没难度,这里对开发过程遇到的问题.取舍等做一个小节. 关于项目搭建 目 ...

  4. vue后台管理系统兼容问题

    1.兼容 兼容问题主要是指ie9以下的ie浏览器. 2.兼容问题原因 (1)低版本ie不支持编译后的es5 (2)低版本ie不支持Promise 3.解决方法 (1)引入es6-promise &am ...

  5. vue 后台管理系统菜单权限管理

    来自:https://www.cnblogs.com/fqh123/p/11094296.html 侵删 login登录方法 login() { if (!this.username) { retur ...

  6. vue后台管理系统组件弹窗

    //addFormVisibleIcon可在data中设置true与falsehttps://element.eleme.io/#/zh-CN/component/installation <e ...

  7. VUE3后台管理系统【路由鉴权】

    前言: 在"VUE3后台管理系统[模板构建]"文章中,详细的介绍了我使用vue3.0和vite2.0构建的后台管理系统,虽然只是简单的一个后台管理系统,其中涉及的技术基本都覆盖了, ...

  8. vue3后台管理系统(模板)

    系统简介 此管理系统是基于Vite2和Vue3.0构建生成的后台管理系统.目的在于学习vite和vue3等新技术,以便于后续用于实际开发工作中: 本文章将从管理系统页面布局.vue路由鉴权.vuex状 ...

  9. Vue3教程:Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦

    之前发布过一篇文章<Vue3教程:开发一个 Vue 3 + element-plus 的后台管理系统>,文中提到会开发并开源一个 Vue 3 + Element Plus 的项目供大家练手 ...

随机推荐

  1. 使用Java语言编写一个五子棋UI界面并实现网络对战功能(非局域网)

    使用Java语言编写一个五子棋UI界面并实现网络对战功能(非局域网) 一,前期准备 1,Java IDE(Eclipse)与JDK的安装与配置jdk-15.0.1-免配置路径版提取码:earu免安装版 ...

  2. 利用css和jquery制成弹幕

    1.首先上图看下效果 2.废话不多说,直接上代码 1>html代码 <div class="barrage"> <div class="scree ...

  3. 【.NET 与树莓派】使用 GPIO 库

    上回老周在说准备工作的时候,提到过树莓派用金属盒散热的事情.有朋友会说,加了金属盒子接线不方便,就算用了"T"形板,毕竟是把导线延长了的.其实扩展板就是把原有的引脚引出(类似于延长 ...

  4. [oracle] exp-00091

    产生原因: 在数据库的服务器端和客户端字符集不同的情况下,导出(dump)数据库表时,会产生这个错误.虽然产生这个错误,但好像对导入没有影响. 解决办法: 查看服务器端字符集: 打开SQLPLUS,执 ...

  5. 电子邮箱、邮件地址、网站地址正则表达式!几个有用的RE、regex、regexp!

    几个常用的正则表达式! r"\w[-\w\.]*@\w[-\w]*(\.\w[-\w]*)+" 这个是电子邮件地址的. r"<TAG\b[^>]*<(. ...

  6. 【linux】系统编程-6-POSIX标准下的信号量与互斥锁

    目录 前言 8. POSIX信号量 8.1 概念 8.2 POSIX无名信号量 8.3 POSIX有名信号量 8.4 POPSIX信号量与system V信号量的区别 9. POSIX互斥锁 9.1 ...

  7. 使用 TensorBoard 可视化模型、数据和训练

    使用 TensorBoard 可视化模型.数据和训练 在 60 Minutes Blitz 中,我们展示了如何加载数据,并把数据送到我们继承 nn.Module 类的模型,在训练数据上训练模型,并在测 ...

  8. Java运算符概要与数学函数

    运算符概要 在Java中,使用算术运算符+,-,*,/表示加减乘除运算,当参与/的运算的两个操作数都是整数时,表示整数除法,否则,表示浮点除法.整数的求余操作(有时称为取模),用%表示,例如,15/2 ...

  9. 注入器(injector)

    1.0    注入器/injector 注入器是AngularJS框架实现和应用开发的关键,这是一个DI/IoC容器的实现. AngularJS将功能分成了不同类型的组件分别实现,这些组件有一个统称 ...

  10. 浅谈java中线程和操作系统线程

    在聊线程之前,我们先了解一下操作系统线程的发展历程,在最初的时候,操作系统没有进程线程一说,执行程序都是串行方式执行,就像一个队列一样,先执行完排在前面的,再去执行后面的程序,这样的话很多程序的响应就 ...