Vue实际项目中遇到的问题总结：

1. 报错：Computed property "couponSendData" was assigned to but it has no setter.

原因：computed里面的计算属性不能被赋值操作

溯源：https://cn.vuejs.org/v2/guide/computed.html

2. 文字超出显示省略号：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

   多行文字超出显示省略号：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;// 3行
-webkit-box-orient: vertical;

3. 给数组默认填充数据：https://segmentfault.com/a/1190000007651029

Array(30).fill(4);
// 或者
Array.apply(null,Array(30)).map( ()=> 4 );

数组/对象函数的熟练应用

4. 数据更新了，视图没更新：https://github.com/xiaofuzi/deep-in-vue/issues/11

    Vue只检测对象的第一层，后面的就不检测了。

    data.obj = {} // 清空是为了触发视图更新

    data.obj = newObj

每一个和自己心中预期不一致的情况，背后都有一个确确实实的知识盲点。

5. 引入组件，为什么挂载到Vue.prototype上：Vue.prototype.$dialog = Dialog.$dialog;

    因为这是添加实例方法到全局上，https://cn.vuejs.org/v2/guide/plugins.html#ad

6. 为什么#后面才是路由路径呢？https://www.zybang.com/static/hy/cj-live/index.html#/login

    hash和history 2种路由模板的差别：https://www.jb51.net/article/144341.htm

    hash：只有#前面才会访问请求后端，#后面的不会访问后端，后端不需要匹配前端访问的静态资源

    history：访问链接就是Network访问后端的请求链接

    前端一个静态资源包放在服务器某个目录下，浏览器去访问这个目录，打开路由，路由页面里面进行接口请求：/webroot/static/hy/${MOD_NAME} 静态文件存储位置

    延伸：Vue-router中的#模式具体是怎么实现的？

7. /static/hy/cj-live/index.html#/order-detail?skuIds=10093690 与 vue.config.js里面pages的关系：

    vue-cli：多页面 https://cli.vuejs.org/zh/config/#pages

8. build.sh文件的执行顺序：

    Bash 参考文档：http://www.ruanyifeng.com/blog/2017/11/bash-set.html?utm_source=tool.lu

                               https://www.gnu.org/software/bash/manual/html_node/The-Set-Builtin.html

                               https://www.runoob.com/linux/linux-comm-rm.html 菜鸟教材

                               https://blog.csdn.net/chuxuan0215/article/details/78652467

set -o errexit //遇到错误就终止执行脚本

rm -rf ./output ./dist ./default_dist ./ios_dist  // rm -rf 删除指定目录下的所有文件和子文件 一定指定文件夹使用，不然就全部删除了

mkdir -p xxxxxx // 新建文件夹

cp -r xxxx yyyy // 把xxxx拷贝到yyyy 文件和子目录都会被拷贝复制

tar zcvf $TAR ./webroot ./conf // 打包压缩 把当前目录下的webroot和conf文件夹打包成$TAR（这是个变量）

　 此知识树待点亮~~

9. encodeURIComponent 与 encodeURI

    encodeURIComponent处理编码范围更广，在浏览器中进行编码也最为普遍。

10. docker路由的转换，浏览器访问ltwx-docker环境，接口实际请求的是adult-erha-env后端接口环境

参考链接：http://wiki.xxxx.cc/pages/viewpage.action?pageId=125473317 (文件已下载保存)

rewrite和location功能有点像，都能实现跳转主要区别在于：
rewrite是在同一域名内更改获取资源的路径，而location是对一类路径做控制访问或反向代理, 可以proxy_pass到其他机器

　　

webserver/conf/vhost/php.conf 是入口配置，在这里配置域名、端口等信息，改为 configmap 挂载。

webserver/conf/vhost/proxy_conf 是转发配置，在这里配置 location，改为 configmap 挂载。

webserver/conf/vhost/rewrite 是 rewrite 规则。

　　

// 设置域名转发的样例
location ~*"^/+(aduwx)/.*"{
    set $upstream_endpoint http://adult-erha-env.xxxx.com:80;
    proxy_pass $upstream_endpoint;
    proxy_set_header Host adlt-erha-env.xxxx.com;
    pro_intercept_errors on;
    include allow-origin.conf;
    break;    
}　　

 延伸：NGINX的日志分析 clog

11. CSS阴影效果：参考链接 https://www.html.cn/archives/9360/

      box-shadow: x轴 y轴 模糊距离 阴影距离 inset(内阴影)    基本可以实现想要的所有阴影效果

总结：一个API的支持和全面理解它会有非常大的作用和影响

12. TODO：Object.assign() 和 delete 操作超出预期，没有解析清楚

      Object.assign() 参考链接：https://www.kunjuke.com/jiaocheng/282274/

  test(){
      let { ruleId } = this.selectedPayStyle;

      let data = {
        payRuleId: ruleId, // 转化
      }

      let args = Object.assign(this.selectedPayStyle, data);
      // console.log('吊起支付前args:', args);
      delete args.ruleId;
      debugger;
      console.log('ddd',args);
      // Object.assign的预期作用是合并对象,assign第一个参数是selectedPayStyle时，在上面就被改变了，解决方式：Object.assign({},this.selectedPayStyle,data);
      // delete 删除了属性，不过比预期提前了，解决方式：不使用delete操作
      // 和this.selectedPayStyle也有关系 不用this，其他相同的代码，就OK了
      // 理论是要可以解释实践现象和指导实践执行的
    }

　　

 

 

总结：成长路径：

1. 问题导向，紧紧跟进问题不动摇，分析总结

2. 系统化知识学习，步步稳扎稳打，总结记忆