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语法 双大括号 {{}}

开发 supermall 的一些的更多相关文章

  1. 避免重复造轮子的UI自动化测试框架开发

    一懒起来就好久没更新文章了,其实懒也还是因为忙,今年上半年的加班赶上了去年一年的加班,加班不息啊,好了吐槽完就写写一直打算继续的自动化开发 目前各种UI测试框架层出不穷,但是万变不离其宗,驱动PC浏览 ...

  2. App开发:模拟服务器数据接口 - MockApi

    为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块.本篇文章就尝试为使用gradle的android项目设计实现Moc ...

  3. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  4. Android SwipeRefreshLayout 下拉刷新——Hi_博客 Android App 开发笔记

    以前写下拉刷新 感觉好费劲,要判断ListView是否滚到顶部,还要加载头布局,还要控制 头布局的状态,等等一大堆.感觉麻烦死了.今天学习了SwipeRefreshLayout 的用法,来分享一下,有 ...

  5. Android Studio配置 AndroidAnnotations——Hi_博客 Android App 开发笔记

    以前用Eclicps 用习惯了现在 想学学 用Android Studio 两天的钻研终于 在我电脑上装了一个Android Studio 并完成了AndroidAnnotations 的配置. An ...

  6. Android请求网络共通类——Hi_博客 Android App 开发笔记

    今天 ,来分享一下 ,一个博客App的开发过程,以前也没开发过这种类型App 的经验,求大神们轻点喷. 首先我们要创建一个Andriod 项目 因为要从网络请求数据所以我们先来一个请求网络的共通类. ...

  7. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

  8. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  9. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

随机推荐

  1. 机构:DARPA

    DARPA,美国国防部高级研究计划局. 2021年3月19日,英特尔(Intel)宣布与美国国防部高级研究计划局(DARPA)达成的一项新合作,旨在推动在美制造的专用集成电路(ASIC)芯片的开发. ...

  2. Python的.gitignore模板

    参考:https://github.com/github/gitignore Python的.gitignore模板,记录一下方便查询 # Byte-compiled / optimized / DL ...

  3. PostGIS 扩展创建失败原因调查

    Issue 升级 PostgreSQL 9.1 的一个集群,由于该集群用到了 PostGIS,在升级 PostgreSQL 时也需要升级一下 PostGIS.PostGIS 相关软件安装好后,在 Po ...

  4. 好客租房54-props深入(children属性)

    children属性 表示组件标签的子节点 当组件标签有子节点是 props就会有该属性 props中的组件可以是任意属性 都是可以渲染的 //导入react     import React fro ...

  5. [源码解析] TensorFlow 分布式之 ClusterCoordinator

    [源码解析] TensorFlow 分布式之 ClusterCoordinator 目录 [源码解析] TensorFlow 分布式之 ClusterCoordinator 1. 思路 1.1 使用 ...

  6. 用 notion 管理信用卡与花呗

    用 notion 管理信用卡与花呗 Notion原文,排版更佳 概述 不需要提醒功能和安卓用户可以忽略Scriptable和快捷指令 app的设置 Notion 建立信用卡表格,录入信用卡基本信息,自 ...

  7. [2018-03-04] 利用 Settings Sync 插件同步 VS Code 设置

    VS Code 已原生支持设置同步,本文仅备份记录 [2018-03-04] 早就听说这个插件了,今天用了一下,确实挺方便的.通过把配置文件创建为 Gist 上来实现了 VS Code 设置的同步,下 ...

  8. 微信小程序避坑指南——input框里的图标在部分安卓机里无法点击的问题

    问题场景: 下图中的显隐密码和验证码均为包裹在 input标签 中的 image标签, 但在开发测试中发现点击不了这俩个image标签,因为是被input标签的padding挡住了. 解决方法:将im ...

  9. [THUSCH2017] 杜老师

    description \(T\)次询问,每次问\(L,L+1...R\)有多少种子集满足子集中乘积为完全平方数. solution 50pt 首先双倍经验 通常的思路是:平方数即每个质因子指数为偶 ...

  10. JAVA - error(错误)和exception(异常)有什么区别?

    JAVA - error(错误)和exception(异常)有什么区别? error 表示恢复不是不可能但很困难的情况下的一种严重问题.比如说内存溢出.不可能指望程序能处理这样的情况. excepti ...