vue项目中的常见问题（vue-cli版本3.0.0）

2024年4月3日 166次阅读 来源: webxiaoma

一、款式题目

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.<le-input>表单运用回车触发事宜。

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

这里须要在@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 全写，只管不运用@ 缩写，由于运用@ 缩写有时会不起作用

 <edit-add-ver   v-on:childMethodShow="showEdit"></edit-add-ver>

九、vue-cli 目次的剖析以及我个人经常使用的项目构建

详细目次剖析进入 https://github.com/webxiaoma/vue-demos/tree/master/vue-cli

    原文作者：webxiaoma
    原文地址: https://segmentfault.com/a/1190000014256745
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞