vue项目中的常见问题
总结了几个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项目中的常见问题的更多相关文章
- vue项目中的常见问题(vue-cli版本3.0.0)
一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时 在style标签中加入 lang="les ...
- vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 在vue项目中, mock数据
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- 去除vue项目中的#及其ie9兼容性
一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
随机推荐
- Angular2 - 概述
*Hi DAI, 我想学习 Angular2, 我应该怎么开始? 关于学习 Angular2, 我认为你应该按照下面的列表 概述: 在您为 Angular2 应用程序编写第一个代码之前, 这将为您提供 ...
- 安装paramiko
前记: 各种奇葩事情都让我遇上了... 1.准备: 1>需要安装python 2>需要安装PyCrypto 2.安装python---省略 3.安装PyCrypto 1>检查pyth ...
- 属性动画 ValueAnimator 运行原理全解析
最近下班时间都用来健身还有看书了,博客被晾了一段时间了,原谅我~~~~ 提问环节 好,废话不多说,之前我们已经分析过 View 动画 Animation 运行原理解析,那么这次就来学习下属性动画的运行 ...
- NYOJ 题目12喷水装置(二)
#include<iostream> #include<algorithm> #include<cmath> using namespace std; struct ...
- 14.C++-二阶构造模式、友元(详解)
首先回顾以前所学的构造函数 类的构造函数用于对象的初始化 构造函数与类同名并且没有返回值 构造函数在定义时被自动调用 由于构造函数没有返回值不能判断执行结果,所以不能保证初始化对象能否成功 比如: c ...
- The Problems of Mysql Installation
1.mysql启动报错 解决:查看相关路径的配置文件的basedir.datadir等路径是否正确. 解决:查看报错路径下是否有文件,若没有可找相应文件做软链接,或者/etc/my.cnf部分路径配置 ...
- java反射机制(先马再看)
http://blog.csdn.net/sinat_38259539/article/details/71799078
- 剑指Offer-构建乘积数组
package Array; import sun.security.util.Length; /** * 构建乘积数组 * 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,... ...
- [JLOI2014] 松鼠的新家
Description 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他居然真的住在"树&q ...
- 笔记:MyBatis Mapper XML文件详解 - Cache
缓存(Cache) 从数据库中加载的数据缓存到内存中,是很多应用程序为了提高性能而采取的一贯做法.MyBatis对通过映射的SELECT语句加载的查询结果提供了内建的缓存支持.默认情况下,启用一级缓存 ...