vue-3.0问题自己收藏

绝地灬酷狼 2021-09-20 10:16 224阅读 0赞

### 一、样式问题 ###

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模式][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地址][GitHub]

[vue-meta-info的相关文章][vue-meta-info]

### 四、数据响应失效 ###

首先在`Vue.js` 中对象的响应时依赖`Object.defineProperty` 方法的，而对于数组是没有这个方法的。

> 这里需要注意，如果数组中是对象，当对象里数据变化时是可以渲染的，如果类似 `[0,1,2,3]`这样的数组，数据变化时，是不会渲染的。

所以数组存储的数据在更改时是没有响应变化的。所以`Vue`提供了`$set()` 方法： [官网][Link 1]

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

### 八、其它注意事项 ###

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-router_ HTML5 History]: https://router.vuejs.org/zh-cn/essentials/history-mode.html
[prerender-spa-plugin GitHub]: https://github.com/chrisvfritz/prerender-spa-plugin
[GitHub]: https://github.com/monkeyWangs/vue-meta-info
[vue-meta-info]: https://zhuanlan.zhihu.com/p/29148760
[Link 1]: https://cn.vuejs.org/v2/api/#Vue-set