美文网首页
VueCli3遇到的问题

VueCli3遇到的问题

作者: 依然淳熙 | 来源:发表于2019-10-10 11:14 被阅读0次

    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 更新循环结束之后执行延迟回调,在修改数据之后使用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遇到的问题

          本文链接:https://www.haomeiwen.com/subject/payopctx.html