这一周的工作总结

需要先安装 node-sass及sass-loader

npm i node-sass --save-dev

npm i sass-loader --save-dev

解决在scss中引用图片路径报错:
方法1:在mian.js中引入，这种引入方式时，scss中图片使用相对路径
require(’./assets/style/index.scss’)

或 import ‘./assets/style/index.scss’

方法2:在app.vue中引入，借助webpack的~前缀

• css loader 会把非根路径的url解析为相对路径，加~前缀才解析为模块路径。

方法3:在*.vue中的scss中直接使用图片

方法4:在*.vue中直接通过require引用图片，然后在html中通过 :style="{backgroundImage: ‘url(’+ 变量 +’)’}" 绑定使用

sass less scss区别

https://www.cnblogs.com/ToBeBest/p/8418994.html

axios vue.config.js配置文件

axios.defaults.baseURL = ‘https://api.example.com’;
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
https://github.com/axios/axios

项目部署配置

https://cli.vuejs.org/zh/guide/deployment.html#通用指南
// 设置全局的baseURL配置
// axios.defaults.baseURL = process.env.NODE_ENV?’/api/’:“http://modelplus.wx-plus.cn/index.php/modelapi/Model_Api/”;

webpack 教程

https://webpack.docschina.org/
https://webpack.css88.com/

HTML5 History 模式

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

https://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource

项目名称

每次打包都会重新生成那个title

如何修改vue-router单页面title?

https://segmentfault.com/q/1010000009831844
vue-meta https://github.com/declandewet/vue-meta
https://blog.csdn.net/nickroprak/article/details/79084856

// 动态改变title的名称
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

vue.js简单添加和删除 - 宋咯咯 - 博客园

https://www.cnblogs.com/songgirl/p/7975758.html

vue单页面标题设置 title

https://blog.csdn.net/gqzydh/article/details/81539253

碰到一个问题就是通过本地缓存角色
改变角色
computed()

vue组件的加载顺序

https://segmentfault.com/q/1010000012551802?sort=created

复用的组件的生命周期只会执行一次

created mounted

本地缓存

https://www.cnblogs.com/st-leslie/p/5617130.html

移动端实现居中的方法

https://www.cnblogs.com/lixiangyong/p/4784139.html

css响应式

https://www.cnblogs.com/lixiangyong/p/4784034.html
https://www.cnblogs.com/shenxiaolin/p/5388464.html

H5知识图库

http://lib.csdn.net/article/html5/42097
https://www.cnblogs.com/frontdeend/p/6102131.html
https://www.yaxi.net/2018-01-10/1655.html

https://www.bbsmax.com/A/ZOJPXqG2Jv/

动态加载样式 noscroll 解决弹出遮罩层，底层body不能滚动

https://blog.csdn.net/Chelle1110/article/details/82219208

如何检测蒙版弹出隐藏

http://www.cnblogs.com/hemei1212/p/9571283.html

js滑动触屏事件监听

https://www.cnblogs.com/mingforyou/archive/2013/02/18/2915151.html

解决移动端手势问题

https://blog.csdn.net/wang8088498/article/details/53539482h

前端touch事件方向的判断

https://www.cnblogs.com/yiyi17/p/7687273.html

移动Web开发实践——解决position:fixed自适应BUG

https://www.cnblogs.com/Megasu/p/4104096.html
https://github.com/maxzhang/maxzhang.github.com/issues/8
https://github.com/maxzhang/maxzhang.github.com/issues/2

移动端常见问题

https://blog.csdn.net/k513492640/article/details/73997607

HTML5滑动（swipe）事件

https://blog.csdn.net/accountwcx/article/details/49334091
https://www.cnblogs.com/winyh/p/6714923.html

出现这个错误

Getter is missing for computed property “watch”.
是因为我把这个watch放在了computed属性里面了，应该是跟watch同级存放

如果是父容器的内容如果点击，若果容器里面的某些东西不想被点击做某种处理的时候，我们可以使用@click.stop

数组排序合并问题

https://segmentfault.com/q/1010000009123809/a-1020000009125562

js缓存原理

http://www.cnblogs.com/wuqiuxue/p/8342575.html

模特账号密码

1. 地址:https://dwz.cn/JjBQtWNJ , 账号:244354 , 密码:IAB979
2. 地址:https://dwz.cn/JjBQtWNJ , 账号:363870 , 密码:TXB413
3. 地址:https://dwz.cn/JjBQtWNJ , 账号:111651 , 密码:GIP652
4. 地址:https://dwz.cn/JjBQtWNJ , 账号:823969 , 密码:LVM055
5. 地址:https://dwz.cn/JjBQtWNJ , 账号:525204 , 密码:NTP123
6. 地址:https://dwz.cn/JjBQtWNJ , 账号:433822 , 密码:CSF777

游客账号密码

1. 地址:https://dwz.cn/JjBQtWNJ , 账号:111659 , 密码:BFQ354
2. 地址:https://dwz.cn/JjBQtWNJ , 账号:875339 , 密码:ISL830

二维码生成

教你使用Vue.js的DevTools来调试你的vue项目

https://baijiahao.baidu.com/s?id=1590124234722174869&wfr=spider&for=pc
https://blog.csdn.net/ReusLi/article/details/78762510
https://www.vue-js.com/topic/5b9698053599bf624c93fda2
https://blog.csdn.net/echo_ae/article/details/78373293

ref属性是用在vue组件里面访问原生DOM操作的

原生DOM没有ref属性

vue组件获取不到$data的数据解决方法

https://segmentfault.com/q/1010000008023002/a-1020000008023027

数据加载的异步问题获取this.$data时候获取不到数据

这种方式是不会获取的到$data属性的
created() {
    this._getModelVisitorTime();
    this.getDateList();
    this.getModelInfo();
    this.getTimeList();
},

解决方案

created() {
    this._getModelVisitorTime();
    this.getDateList();
    this.getModelInfo();
},


_getModelVisitorTime() {
    api.getModelOrder({
        model_id: this.$route.params.id,
    }).then(res => {
        console.log('getModelOrder',res)
        var obj = {};
        var data = res.data;
        
        for (let i of data) {
            let key = i.days.split(' ')[0];
            let val = i.times.split('#');
            obj[key] = val;
        }
        this.schedule = obj;
        ## 下面的this.getTimeList()需要用到上面的this.schedule这个数据
        ## 所以我们要等数据赋值完成之后才执行下面这一句代码
        this.getTimeList();
    });
},

解决方案2

https://blog.csdn.net/dongguan_123/article/details/80317871
https://www.jianshu.com/p/4450b63a27fe
api接口发送的是异步操作，但是获取数据要等到异步操作完成才能获取得到
如果说有一些同步操作需要用到异步操作返回的数据，所以要

//有时候我们这种
mounted(){
    setTimeout(()=>{
        this.getTimeList();
    }, 2000)
},

vue nextTick()

https://segmentfault.com/a/1190000012861862

如果是父组件传值给子组件，要等数据加载完，再加载组件