开发 supermall 的一些

0、新建项目

1、关联仓库：新建的远程仓库 怎么和已有代码联系起来
a、拉仓库 复制代码进去
b、在已有代码里面配置git：
git remote add origin ‘地址’
然后 git push -u origin master

2、划分目录结构
a、先清除初始化默认的hello组件
c、创建目录
assets components router store views

3、css文件的引入 normolize.css base.css
a、初始化 重置 去掉默认padding之类

b、 :root 根元素 伪类 获取根元素html

c、css3：样式变量
定义： --xx： ‘’
使用： var(--xx)

4、webpack.vue.config
a、配置文件别名
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'common': resolve('src/common'),
'components': resolve('src/components'),
'network': resolve('src/network'),

}
},

脚手架2：
'@': resolve('src'),
'assets': resolve('src/assets'),
脚手架3：
'@': resolve('src'),
'assets': resolve('@/assets'),

b、.editorconfig 编码规范 缩进之类

五、开发：app项目 手机商城
1、底部 tabbar引入 和项目模块划分【我的 商城 购物车等】
dom图片加载不了？
~assets

2、 项目图标问题
a、vue3
.ico 文件：固定名称 favicon.ico
固定使用： <link rel="iocn" href="<%= BASE_URL %>favicon.ico">

b、vue2
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"></link>

config里面：favion: path.resolve(''),

3、首页开发&导航封装

4、首页请求数据
4.1、
import {getHome} from 'network/home'

export function getHome() {}

4.2、 import xx
export default xx

http://123.207.32.32 http://123.207.32.32:8000/home/multidata

4.3、服务问题 ：代理
axios 拦截器

4.4、面向对象思想 层级清晰

4.5、函数执行完之后 里面的变量等东西会被销毁 垃圾机制回收

5、首页轮播图
a、自己写 封装组件 完全独立组件 不与业务相关的话common
b、引入ui框架 使用框架 也可以在基础上再抽取成组件

6、首页 推荐信息 图片

7、回顾
promise、vuex

六、
8、首页 本周流行
featureView封装

9、tabcontro的封装
9.1、吸顶效果： 滚动到设置的多少高度时 变成固定定位
9.2、滚动问题： 默认自然 滚动 在手机端会卡顿
使用框架组件

10、商品数据结构设计
11、商品数据请求 新接口了 服务器
12、商品数据展示样式
父： display: flex;
flex-wrap: wrap; 换行
justify-content: space-around;

子： width: 48%;

13、tabcontro点击切换商品
有时热更新 没更新 手动刷新

14、better-scroll 滚动插件 --save
移动 电脑 都行
弹簧效果：滚到底 有个弹起的效果
注意使用元素时 元素 是否存在 created mounted

官网 说明 起步

15、better-scroll基本使用
a、使用：
<div class="el">
ul>li
<div>
const bscroll = new BScroll('.el',{
probeType: 0/1/2/3 是否实时监测 01 不侦测 2 只侦测手指滚动
离开后惯性的不监测 3 都监测
})
el: 只能有一个字元素 设置固定高

b、监听：bscroll.on('scroll', (position) =>{})

16、better-scroll在vue中的使用
17、better-scroll的封装与使用

11、backtop的封装与使用
12、backtop的显示与隐藏
13、首页商品 上拉加载更多

七、
1、回顾
2、首页开发-滚动区域的Bug分析和解决.
Vue.prototype.$bus = new Vue(); // 事件总线
this.$bus.$emit('itemImg-load') 发送

监听： mounted 里面监听
this.$bus.$on('itemImg-load', () => {
this.$refs.scroll.refresh();

})
3、refresh函数找不到的bug处理
this.scroll && this.scroll.refresh();
使用 this.$refs.xx时 在mounted() {}周期里面

4、刷新频繁的防抖
debounce(fn, 1000); 第一个参数为函数名称 不要加小括号
const re = debounce(this.$refs.scroll.refresh, 200)
re();

5、上拉加载完成
6、tab control的吸顶效果
临界条件：通过offsetTop获取
获取组件元素：this.$refs.xx.$el
7、吸顶完成
监听图片完成 <img @load="load"
better-scroll组件引起的吸顶效果失效或者有问题
解决： 使用两套 用isTabFixed控制

8、home离开时记录状态和位置
状态：组件离开后 被销毁 keep-alive
使用 keep-alive就有俩方法

位置： 滚动到的位置 离开时记录位置 回来时拿到记录的位置 进行刷新

9、跳转详情页 带id
10、详情导航栏

--25节

11、详情页数据请求及轮播图
keep-alive exclude
之前在Vue内使用<keep-alive>出现过exclude无效的问题：
此时我们需要确认的是，当前exclued内对应的名字，是和我们需要保留的组件的name属性直接对应上的，包括大小写，确认好这点就可以保证不出错

12、商品基本信息
13、店铺信息

14、详情滚动scroll
15、商品详情
16、商品参数

17、回顾

--26 节
12、商品评论
时间错与时间的转换

vue 管道过滤器

13、商品推荐
14、首页 详情 监听全局 mixins混入
取消$bus事件：this.$bus.$off（‘监听事件’，监听事件要执行的函数）

mixins 混入：混合、
顺序：
钩子mixin钩子在自己钩子之前执行， 里面东西合并
如果methods里面方法同名： 自己的会覆盖mixin的

混入了 监听图片加载 刷新滚动区域
15、回顾

---27、
1、首页tabcontrol
2、详情页不能滚动的bug
3、点击标题到对应内容
组件渲染周期 update
this.$nextTick
只敲到此 后面的只是看了视频

 

--28
--29
123

4、tosat
tosat： 模态框 弹框

5、toast 封装 安装插件
在index.js：
1、创建vue构造器
import 组件名称 from 组件 ：组件内部写逻辑
const xx = Vue.extend(组件名称)
2、创建组件对象
const toast = new XX();
3、将组件对象挂载到元素上
toast.$mount（document.creElement('div')）
4、添加到body
document.body.appendChild(toast.$el)

5、挂到vue原型上
Vue.prototype.$mesg = toast;

6、main.js 引入使用
import toast from 'toast/index.js '
使用： Vue.use(toast ): 调用toast的install方法

7、实际使用
this.$mesg('msg')

总：一个组件添加到vue原型的一方法上 组件需要挂载到vue上
组件内有方法
然后调用方法

6、fastclick 解决移动端延迟方案
移动端默认有延迟
··1、npm包安装 fastclick
..2、使用
import fastcl from 'fastclick'
fastcl.attach(document.body)

7、图片懒加载 使用插件库 vue-lazyload
1、npm
2、导入
3、vue.use(''，{
loading: '占位图地址' //requer('地址')
})
4、<img :src=“url” > ==> <img v-lazy="url"
5、懒加载 默认占位空白 可以设置占位图

8、移动端 不同设备字体 px单位转换
px2vw-css、、
1、安装插件 npm
2、配置 postcss.config.js文件
3、一般设计稿比例 以iphone6 375 * 667
9、nginx 在window的部署
安装nginx 打包 修改配置和部署

10、项目在远程linux的部署
虚拟机centos上nginx安装 配置和部署

---30--- 最后
11、响应式原理
原理： 数据劫持 + 发布订阅模式
代理：_proxy

关键字：Dep Watcher Observer

代码解析
流程图片解析

12、正则
* 0或多个
+ 1或多个
特殊字符作为正则内容 需要使用转义符\

13、整个课程回顾
a、 mvvm
b、mustache语法 双大括号 {{}}