VueCli3遇到的问题

1.记一个配置时候遇到的问题。怎么配置网上有一堆大概向下面这样:


TIM图片20191010110954.png

问题就是如果你的api端口地址是80,而你cli的port默认是8080的话,这样配置还是访问不到的,会报502 网关错误,我试过在target地址后面填上端口80不好使,最后是把port改成与api接口一样的端口号就调通了。

2.移除严格模式
安装

cnpm i babel-plugin-transform-remove-strict-mode -D

在babel.config.js中进行配置(vue-cli3 中 没有.babelrc文件)

plugins: [
    ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
],

3.Vue看代码时遇见的记录
https://cn.vuejs.org/v2/api/#provide-inject

provide / inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

provide 选项应该是:一个对象或返回一个对象的函数
inject 选项应该是:一个字符串数组,或 一个对象,对象的 key 是本地的绑定名

mixins 就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改

4.事件的节流(throttle)与防抖(debounce)

nextTick,则可以在回调中获取更新后的 DOM

vue响应式的改变一个值以后,此时的dom并不会立即更新,如果需要在数据改变以后立即通过dom做一些操作,可以使用$nextTick获得更新后的dom。

4.官方文档才反复强调对于任何复杂逻辑,你都应当使用计算属性

computed依赖于data中的数据,只有在它的相关依赖数据发生改变时才会重新求值

5.审查项目的 webpack 配置 vue inspect > output.js

6.优化打包之后文件提交的工具。webpack-bundle-analyzer
vue add webpack-bundle-analyzer
手动添加一下 然后执行 npm run build --report 就会在dist目录下生产一个report.html

7.chainWebpack 和 configureWebpack 的区别。
chainWebpack 的底层是 webpack-chain,命令式 Webpack 配置的事实标准,提供了一套灵活的上层 API 进行 Webpack 配置而无需过分关注 Webpack Config 的规范细节。configureWebpack 的底层是 webpack-merge,能让你通过编写一个配置子集快速合并到最终的完整配置中。
那么问题来了,如果我只是想修改已经存在于基础配置中的某个 loader 的选项,我用 configureWebpack 要怎么做?直接编写与那个 loader 相关的配置子集的话,很可能会覆盖掉有用的预置选项。
如果对一个loader或plugin修改的配置如果是一项的话推荐
chainWebpack、如果是多项的话用configureWebpack直接覆写

直接用全局的less编译当然是可以的啊。但是webpack中重点是对于引入到js文件的less进行处理,或是像是vue单文件组件那样的页面内的less进行处理。

8.vue-cli 使用 proxyTable 解决每次的session值不一样
https://blog.csdn.net/qq_29297365/article/details/80965651

20180709094835247.png

9.# vue beforeEach 死循环问题解决方法

babel 只会把 es6 的语法转化成 es5的形式。但是也仅仅是书写方式的变化。比如:箭头函数换成匿名函数等。不会转换没有的方法。比如:Array.find 等等新的方法。这个就需要一个垫片。promise 就是这样的
如果需要支持低版本浏览器,就需要加垫片 babel-poyfil

win10 npm intall的坑
https://www.jianshu.com/p/49a4919d302d

safari 日期问题new Date(("2020-10-10 00:00:00").replace(/-/g,'/')).getFullYear()

你可能感兴趣的:(VueCli3遇到的问题)