摘要：在要改变的样式前加二问题去掉项目路径中的主要用到的模式。这里建议你直接看官网的，版本的和版本的不同。当浏览器窗口变小时，组件宽度不随窗口响应变小。这里我们需要冲突掉中的样式，该值不能设置成可以改成小于即可。
一、样式问题
1.vue中使用less
安装less依赖 npm install less less-loader --save-dev
在使用时 在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模式
2.当我们通过router 中的query从一A页面想给B页面传递一个Object 对象形式的数据时，第一次B页面可以拿到数据，但是刷新B页面后，数据会消失。这里有一下解决方法：
将A页面的数据通过 JSON.stringify() 变成字符串，传递
将A页面数据存储在sessionStorage 中，B页面同该sessionStorage 获取
后台提供多带带的接口，在B页面请求A页面传过来的数据
三、页面预渲染（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" ],
})
]
}
另外为页面做Meta SEO优化 可以使用 vue-meta-info GitHub地址
vue-meta-info的相关文章
四、数据响应失效首先在Vue.js 中对象的响应时依赖Object.defineProperty 方法的，而对于数组是没有这个方法的。
这里需要注意，如果数组中是对象，当对象里数据变化时是可以渲染的，如果类似[0,1,2,3]这样的数组，数据变化时，是不会渲染的。
所以数组存储的数据在更改时是没有响应变化的。所以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.
这里需要在@keyup.enter 后面加上native才会触发回车事件。这个东西在一些实际上处理 DOM 原生事件的场合才需要添加额外的标识符。
2.当浏览器窗口变小时，el-table组件宽度不随窗口响应变小。
这里我们需要冲突掉Element 中el-table 的 max-width:100% 样式，该值不能设置成100%,可以改成99%,小于100%即可。
.el-table{
max-width:99.9%
}
七、axios 交互问题
1.vue中创建excel 的下载，解决excel下载乱码问题
我们可以在axios的请求拦截或响应拦截中去动态创建a标签下载excel
function excelDown(res){ // excel 下载请求
//application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
var blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"});
var downloadElement = document.createElement("a");
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = res.request.responseURL +`&token=${sessionStorage.JRYC_TOKEN}`;
downloadElement.download = "列表.xls"; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
}
axios.interceptors.response.use(res => {
if (res.headers["content-type"] == "application/vnd.ms-excel" || res.headers["content-type"] == "application/vnd.ms-excel;charset=UTF-8") {
excelDown(res)
return {code:0,state:"success"}
}else{
return res
}
})
八、其它注意事项
1.使用v-for 时我们尽量携带key值，以方便vue的渲染。
v-for="(item, index) in list" class="list" :key="index"
2.在使用 import ... from ... 引入同级目录下的组件时，尽量加上 ./ ， 不然有时会报错
import Header from "./Header";
3.使用$emit 不起作用，这里我建议你在子组件绑定父组件事件时 使用 v-on 全写，尽量不使用@ 缩写，因为使用@ 缩写有时会不起作用
九、vue-cli 目录的分析以及我个人常用的项目构建
具体目录分析进入 https://github.com/webxiaoma/vue-demos/tree/master/vue-cli
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/94083.html
摘要：从使用和也是支持的。此处直接首页其中当时，内的配置信息会直接覆盖初始化后项目中的。文件接下来就是，这个文件负责的就是注入或是修改项目中文件。比如我的其中和就是用户在处理中设定的问题的回答值。 vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计，所以当你需要给组里定制一份基于 vue-cl...
摘要：从使用和也是支持的。此处直接首页其中当时，内的配置信息会直接覆盖初始化后项目中的。文件接下来就是，这个文件负责的就是注入或是修改项目中文件。比如我的其中和就是用户在处理中设定的问题的回答值。 vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计，所以当你需要给组里定制一份基于 vue-cl...
摘要：从使用和也是支持的。此处直接首页其中当时，内的配置信息会直接覆盖初始化后项目中的。文件接下来就是，这个文件负责的就是注入或是修改项目中文件。比如我的其中和就是用户在处理中设定的问题的回答值。 vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计，所以当你需要给组里定制一份基于 vue-cl...
摘要：单元测试前端的单元测试目前有两个比较热的框架，一个是的方式，一个是。小伙伴们不用急，关于单元测试这块，我会找时间写博客的。首先前端的测试分为两种，一个是单元测试，另一个就是测试了。 因为公司项目要用vue框架，所以会用vue-cli来新建项目。用过vue的都知道，要全局安装vue以及脚手架vue-cli，然后执行vue init webpack projectname来新建vu...
摘要：记使用方式和之前版本的差异的使用下载和安装项目生成的目录结构以上，目前版本的使用下载和安装项目生成的目录结构新的目录结构，隐藏了配置文件，封装了细节对比个区别区别下载包的包命变化。貌似是之前的版本有点问题 记vue-cli@3.0使用方式和之前版本的差异 @2.9.3的使用 1.下载vue-cli和安装项目 cnpm i -g vue-cli#2.9.3 vue init webpa...
阅读 955·2021-09-28 09:34
阅读 727·2021-09-24 09:48
阅读 3155·2021-09-22 15:01
阅读 407·2019-08-30 11:11
阅读 769·2019-08-29 16:17
阅读 1080·2019-08-29 12:23
阅读 1846·2019-08-26 11:48
阅读 3060·2019-08-26 11:48
