总结了几个vue项目开发过程中遇到的常见问题,希望大家注意。

注:文末有福利!

一、样式问题

1.vue中使用less

安装less依赖 npm install less less-loader --save-dev
修改 webpack.base.config.js 配置文件

{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader'
}

在使用时 在style标签中加入 lang="less" 也可以加上scoped代表样式只在此作用域中有效。

2.使用element插件时修改其样式,在vue中不起作用,这里有几种方法可以尝试

  • 如果 style 中加了 scoped 去掉它。
  • 在要改变的样式前加 /deep/
 /deep/.el-submenu__title .el-icon-arrow-down{
margin-top:-5px;
}

二、vue-router 问题

1.去掉vue项目路径中的 #

主要用到router 的 history模式。官网说的很详细,以及注意点:vue-router官网 HTML5 History模式

三、页面预渲染(seo优化问题)

官网也指出,如果你只是为了改善营销页面的SEO优化,你可能需要预渲染了。而无需使用web服务器实时动态变异html,而是使用预渲染方式,在构建时简单地生成针对特定路由的静态 HTML 文件

1.预渲染

如果你想要预渲染需要使用 prerender-spa-plugin 插件来处理你的文件。这里建议你直接看官网的api, 2.x版本的和3.x版本的api不同。所以建议直接看官网了解最新的api。 prerender-spa-plugin GitHub

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin') module.exports = {
plugins: [
...
new PrerenderSPAPlugin({
// 生成文件的路径
staticDir: path.join(__dirname, 'dist'),
// 对应路由生成的目录
routes: [ '/', '/about', '/some/deep/nested/route' ],
})
]
}

四、数据响应失效

首先在Vue.js 中对象的响应时依赖Object.defineProperty 方法的,而对于数组是没有这个方法的。所以数组存储的数据在更改时是没有响应变化的。所以Vue提供了$set() 方法: 官网

vue.array.$set(0,'change')

五、数据双向绑定问题

1.在使用vuex时,我们两个模块可能使用同一个数据,比如两模块中的表单使用的是同一个数据,当其中一个模块中的表单填写好时,我们进入另一个模块表单时,也会显示该数据,如果该数据少还可以,如果有很多字段,我们一个一个清空会和麻烦,我这里解决的办法就是:使用JSON.stringify 和 JSON.parse()

let evaluateReq = { // 初始数据
type:'0',
pageSize:10,
pageNum:1,
} const state = {
evaluateListReq:JSON.parse(JSON.stringify(evaluateReq)),
}

这样做,当我们初始化 evaluateListReq 数据时,可以讲 evaluateReq 数据 通过 mutations 赋值给evaluateListReq ,如果我们这里不使用JSON.stringify 和 JSON.parse() 而直接赋值, evaluateReq 中的数据与 evaluateListReq 会被vue认为是同一个数据,都绑定上,一个值变化,都会随着变化。

六、使用Element(饿了么)插件问题

1.<le-input>表单使用回车触发事件。

<el-input @keyup.enter.native="onSubmit" ></el-input>

这里需要在@keyup.enter 后面加上native才会触发回车事件。这个东西在一些实际上处理 DOM 原生事件的场合才需要添加额外的标识符。



推荐一个良心公众号【IT资源社】:

本公众号致力于免费分享全网最优秀的视频资源,学习资料,面试经验等,前端,PHP,JAVA,算法,Python,大数据等等,你想要的这都有

IT资源社-QQ交流群:625494093

也可添加微信拉你进微信群交流: super1319164238

微信搜索公众号:ITziyuanshe 或者扫描下方二维码直接关注,

vue项目中的常见问题的更多相关文章

  1. vue项目中的常见问题(vue-cli版本3.0.0)

    一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时 在style标签中加入 lang="les ...

  2. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  3. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  4. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  5. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  6. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  7. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  8. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  9. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

随机推荐

  1. token的时限多长才合适?

    在使用JWT时,一个让人纠结的问题就是"Token的时限多长才合适?".对此,Stormpath的这篇文章给出了一个可供参考的建议: 面对极度敏感的信息,如钱或银行数据,那就根本不 ...

  2. Spring @AfterReturning 总是返回null

    在学习Spring Aop时,遇到一个问题,当 @Around(环绕通知)与 @AfterReturning(后置通知)共存 时,@AfterReturning 通过属性 returning = &q ...

  3. 删除项目中的.pyc文件

    在编写python项目的时候,往往会生成很多的.pyc文件,但是在我们提交代码的时候这些.pyc文件又是不必要的,所以需要对项目里面的.pyc文件进行清理.再此,经过我的查阅资料和尝试,分享出以下方法 ...

  4. CSS个别属性

    *{ scrollbar-3dlight-color:#fff; // 3d亮色阴影边框(threedlightshadow)的外观颜色 scrollbar-highlight-color:#fff; ...

  5. codeforces 286E Ladies' Shop

    题目大意:n个小于等于m的数,现在你需要在[1,m]中选择若干个数,使得选出的数能组成的所有数正好与n个数相同,给出最少要选多少个数. 题目分析: 结论一:选择的若干个数一定在n个数中. 证明:否则的 ...

  6. python 全栈开发,Day3(正式)

    一.基础数据类型 基础数据类型,有7种类型,存在即合理. 1.int 整数 主要是做运算的 .比如加减乘除,幂,取余  + - * / ** %...2.bool 布尔值 判断真假以及作为条件变量3. ...

  7. jmeter--简单的接口测试(GET/POST)

    最近在学习接口测试,本文就简单的谈一谈对接口相关知识的理解. 一.什么是接口? 程序接口:由一套陈述.功能.选项.其它表达程序结构的形式.以及程序师使用的程序或者程序语言提供的数据组成(百度百科定义) ...

  8. java web 项目中获取当前路径的几种方法

    1.jsp中取得路径:   以工程名为TEST为例: (1)得到包含工程名的当前页面全路径:request.getRequestURI() 结果:/TEST/test.jsp (2)得到工程名:req ...

  9. 需求分析---NABCD

    N(Need,需求) 我们的产品未来天气,是为了解决不爱看天气预报的群众开发一款类似备忘录式的天气预报软件.很多人认为今天天气很好,明天肯定不会差,但是风云忽变,可能明天就降大雨,所以就忽略了带伞, ...

  10. 《Linux命令行与shell脚本编程大全》- 读书笔记1 - 基本的bash shell 命令

    这本书买了好久了,除了刚到手的那几天翻看了一下以外,竟然到今天都没有看过.突然想要写一个shell脚本,发现什么也不会,是时候开始学习了,今天先把最简单的一章再看一遍顺便做一些笔记,明天继续后面的! ...