纸上得来终觉浅,绝知此事要躬行!

  Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发。只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑。

  一、项目的登录拦截及用户权限访问控制问题。

  一个很常见的需求就是对未登录的用户进行路由拦截和用户的权限访问,如果你的项目之前是通过后台控制访问路由的,那么之前的后端现在可能需要在前端也需要控制了,由于我们用vue脚手架搭建的都是纯前端的路由访问,先看看我们的一般的项目路径:

你可能会注意到Vue的项目路径里都有这个#号,这是一个锚点,说明我们的页面靠后端可能控制不了你的路由了,这时候你需要进行Vue的路由拦截。(Vue-router 有个模式可以改为history ,但是改成这个模式后需要后端的服务有对应的兼容,否则会造成某些页面刷新找不到页面,而且不会出现404页面,需要自己写路由去匹配404页面,慎用) 。这时候我们需要在router的里面添加meta字段进行自定义一些信息。像下面这样:

然后再main.js 加入全局的路由拦截。

router.beforeEach((to, from, next) =>{
if(to.meta.requireAuth){ //是否需要登录拦截
if(store.state.tokens.token){ //已登录
next()
}else{
next({
path: '/',
query: {redirect : to.fullPath}
})
}
}else{
next()
}
})

同理,用户权限的认证也可以这么做。另外需要注意的是,这个登录状态需要使用localstorage或者cookie保存,只存在store里面会导致页面一刷新登录状态就没了(当然你可以在页面mounted的时候去后台获取状态,然后改变store)。

  二、组件的异步加载(按需加载组件)

  在平时的demo中,你可能不会遇见这个需求,当页面很多,组件很多的时候,你会发现你的页面在首次加载的时候,异常的慢,这个是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了,这个时候就需要对页面优化了,就需要异步组件了。如何去写异步组件呢,实际上很简单,只需要在你的路由index,js里加上require就可以了,像下面这样,这也是所谓的按需加载组件的实现原理。

 {
path: '/home',
name: 'Home',
component: function(resolve){
require(['@/views/home'], resolve)
}
}

  三、多语种处理

  你的项目可能是面向国际化的,此时你需要对项目进行多语种处理。幸运的是Vue已经有了这个多语种的插件,vue-i18n .你可以像我这样新建几个多语种文件,

en.js

const messagesEn = {
hello: 'Hello world'
}
export default messagesEn

zh.js

const messagesZh = {
hello: '你好、世界'
}
export default messagesZh

i18n.js

import messagesEn from './en'
import messagesZh from './zh'
const messages = {
en: {
message: messagesEn
},
zh: {
message: messagesZh
}
} export default messages

然后再main.js 里引用

import VueI18n from 'vue-i18n'
import messages from './international/i18n'
Vue.use(VueI18n) const i18n = new VueI18n({
locale: 'en', // 语言标识
messages
})

你可以在一个页面里调用this.$i18n进行语种切换

 this.$i18n.locale  = 'zh'

页面里

<p>{{ $t("message.hello") }}</p>
<p v-text="$t("message.hello")"></p>

js里面:

mounted: function(){
  alert(this.$t('message.hello'))
}

加入这样的标签就可以显示国际化文件里的对应此条了。

   四、部署的生产环境上后和开发环境的样式不一样

  这个问题我可是遭遇过,快上线了居然发现npm run build 之后放到服务器端竟然样式和开发环境的不一样,有点坑!

  项目中使用了element-UI的组件,然后自己重写了部分样式,但是build之后却被element-ui本身的样式给覆盖了,但在本地却不会出现这个问题(这个不清楚为啥),解决办法是试试在组件里新建个

  <style>(不加scoped),在这里面改样式,或者在覆盖elementUI 样式的时候在class前面加上body 提高该样式优先级,就不会被覆盖了。另外自己的样式要写的规范,合乎正常的思维。这个也提醒我们,代码要提前放到服务端试一试。

  五、代码格式、编辑器不统一造成代码格式混乱,注意优化代码

  这个无关Vue,但是还是建议一个团队尽量统一代码编辑器,并且使用eslint进行代码格式检查,否则会造成代码在不同编辑器下显示混乱,很不容易队友阅读和修改,并且要时刻注意优化自己的代码,简化复杂的处理逻辑,否则会给日后的维护造成极大的困难

注:本文出自博客园 https://home.cnblogs.com/u/mdengcc/ ,转载请注明出处。

Vue 实际项目中你可能会遇见的坑的更多相关文章

  1. Vue 实际项目中你可能会遇见问题

    纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...

  2. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  3. Vue+webpack项目中实现跨域的http请求

    目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...

  4. 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)

    通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了 ...

  5. Vue.js项目中使用iconfont冲突问题解决

    在开发前端项目中,字体图标变得越来越常用.一方面因为它比图片使用起来方便,可以像字体一样修改大小和颜色:另一方面是因为它可以减少请求数量,优化前端性能. iconfont的使用方法很简单,主要由三种引 ...

  6. vue+webpack项目中px2rem的例子

    项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem 第一步安装   npm install   postcss-px2r ...

  7. vue+ElementUI项目中,上传控件为必填项,上传图片后清空提示信息

    (ps:以下是我在项目中遇到得问题及解决方法,希望对你们有帮助.如果还有其他方法,可以留言,谢谢) 一个表单页面,使用element-ui中el-upload上传图片,此项为必填项,然后写了校验规则, ...

  8. vue cli3项目中使用qrcodejs2生成二维码

    组件的形式创建 1.下载依赖 npm install qrcodejs2 2.创建一个.vue的组件放置代码(我创建的是qrcodejs2.vue) //template中的代码 <templa ...

  9. Vue+webpack项目中,运行报错Cannot find module &#39;chalk&#39;的处理

    刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'cha ...

随机推荐

  1. JetBrains注册码计算(IntelliJ IDEA 15.0注册码激活)

    安装前修改时间为2099年等很多年后的时间点,安装后选择免费试用30天,然后退出idea,把时间修改回来,这样就可以成功注册了 如果之前使用过授权服务器等激活方式,不弹出试用界面,请到C:\Users ...

  2. 整理分享C#通过user32.dll模拟物理按键操作的代码

    对系统模拟按键方面的知识和按键映射代码做了一下梳理,在这里分享出来,适用于开发自动操作工具和游戏外挂. 主代码: public const int KEYEVENTF_EXTENDEDKEY = 0x ...

  3. 与众不同 windows phone (45) - 8.0 语音: TTS, 语音识别, 语音命令

    [源码下载] 与众不同 windows phone (45) - 8.0 语音: TTS, 语音识别, 语音命令 作者:webabcd 介绍与众不同 windows phone 8.0 之 语音 TT ...

  4. 四种MySQL存储引擎

    前言 数据库存储引擎是数据库底层软件组织,数据库管理系统(DBMS)使用数据引擎进行创建.查询.更新和删除数据.不同的存储引擎提供不同的存储机制.索引技巧.锁定水平等功能,使用不同的存储引擎,还可以 ...

  5. lightoj 1024 (高精度乘单精度)

    题意:给你一些数,求它们的最小公倍数,结果可能会很大. 统计出每个素因子出现的最大次数,把他们相乘即可,需要高精度. #include<cmath> #include<cstdio& ...

  6. Chrome插件:弹出桌面通知

    if (window.Notification) { var popNotice = function() { if (Notification.permission == "granted ...

  7. c++线程池小例子

    ThreadPool.h #ifndef __THREADPOOL_H #define __THREADPOOL_H #define HAVE_STRUCT_TIMESPEC //#include & ...

  8. shell参数扩展

    http://zuyunfei.com/2016/03/23/Shell-Truncate-File-Extension/

  9. jQuery网格插件 ParamQuery

    ParamQuery是一种轻量级的jQuery网格插件,基于用于用户界面控制.具有一致API的优秀设计模式jQueryUI Widget factory创建,能够在网页上展示各种类似于Excel和Go ...

  10. flume+kafka

    这里演示在单机fulume环境下,kafka作为source ,chanel , sink时三种情况 下面的测试都是基于下面的基本的配置文件进行修改的 a1.sources = r1 a1.sinks ...