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

  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. python 自动化之路 logging日志模块

    logging 日志模块 http://python.usyiyi.cn/python_278/library/logging.html 中文官方http://blog.csdn.net/zyz511 ...

  2. Database Design Guidelines

    Database Design Guidelines Principles Support popular databases Name Style Table Name Style: Pascal ...

  3. C语言文件 "w+"与"wb+"区别

    这是我今天碰到的问题,现在已经解决, 希望我的整理能够帮助到你们! w+以纯文本方式读写,而wb+是以二进制方式进行读写. mode说明: w 打开只写文件,若文件存在则文件长度清为0,即该文件内容会 ...

  4. Django表单介绍

    HTML 表单 在HTML中,表单是<form>...</form> 之间元素的集合,它们允许访问者输入文本.选择选项.操作对象和控制等等,然后将信息发送回服务器. 某些表单的 ...

  5. Leading and Trailing(数论/n^k的前三位)题解

    Leading and Trailing You are given two integers: n and k, your task is to find the most significant ...

  6. java.lang.NoClassDefFoundError Could not initialize class 异常的处理

    class,forname的配置文件出问题核对url数据库中的名字和bean中名字不同没有把jar包变成build path

  7. asp.net(C#)常用时间日期处理类

    using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...

  8. .NET基础 (17)反射

    反射1 请解释反射的基本原理和其实现的基石2 .NET提供了哪些类型来实现反射3 如何实现动态地发射程序集4 如何利用反射来实现工厂模式 反射1 请解释反射的基本原理和其实现的基石 反射是一种动态分析 ...

  9. Vue组件-使用插槽分发内容

    在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-fo ...

  10. 计算多项式Poj(1996)

    题目链接:http://poj.org/problem?id=1996 思路: 刚开始打了个二维表,调了一个小时,爆内存了. #include <stdio.h> #include < ...