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. 基于SqlSugar的开发框架循序渐进介绍(3)-- 实现代码生成工具Database2Sharp的整合开发

    我喜欢在一个项目开发模式成熟的时候,使用代码生成工具Database2Sharp来配套相关的代码生成,对于我介绍的基于SqlSugar的开发框架,从整体架构确定下来后,我就着手为它们量身定做相关的代码 ...

  2. ElasticSearch基础学习(SpringBoot集成ES)

    一.概述 什么是ElasticSearch? ElasticSearch,简称为ES, ES是一个开源的高扩展的分布式全文搜索引擎. 它可以近乎实时的存储.检索数据:本身扩展性很好,可以扩展到上百台服 ...

  3. 好客租房3-React的基本使用

    2.1React的安装 安装命令:npm i react react-dom react 包是核心,提供创建元素,组件等功能 react-dom包提供DOM相关功能等 2.2React的使用 1引入r ...

  4. 词云图value传递数据不显示(已解决)

    问题描述: 今天在做词云图时,虽然词云图能够展现出来,但是后台传递过来的数据(每个词出现的次数)却不显示. 错误原因: 错误的将tooltip写在了series内部,如图: 解决方案: 将toolti ...

  5. syc-day2

    第1题:mod注意负数. 第2题:dp 第3题:构造(奇偶性) 第4题:线段树

  6. 一次XGBoost性能优化-超线程影响运算速度

    一.问题背景 一个朋友在使用 XGBoost 框架进行机器学习编码,他们的一个demo, 在笔记本的虚拟机(4核)运行的时候,只要8s, 但是在一个64核128G 的物理机上面的虚拟机去跑的时候,发现 ...

  7. 在linux上开启酸酸乳,未完待续

    在服务器调试深度学习环境的时候总需要下载conda的包,一直以来都觉得是因为国内访问慢,于是想在服务器上开 ,或者ssr.由于过去用ssr多一些,于是想了解ssr on linux. 1.首先win1 ...

  8. 拭目以待!JNPF .NET将更新.NET 6技术,同时上线 3.4.1 版本

    2022年5月30日,福建引迈即将上线JNPF开发平台的.NET 6版本,在产品性能上做了深度优化,且极大的提升了工作效率,加强了对云服务的改进升级,全面提升用户的使用体验. JNPF是一个以PaaS ...

  9. 软件性能测试分析与调优实践之路-JMeter对RPC服务的性能压测分析与调优-手稿节选

    一.JMeter 如何通过自定义Sample来压测RPC服务 RPC(Remote Procedure Call)俗称远程过程调用,是常用的一种高效的服务调用方式,也是性能压测时经常遇到的一种服务调用 ...

  10. 『忘了再学』Shell基础 — 29、AWK内置变量

    目录 1.AWK内置变量 2.练习说明 (1)$n变量练习 (2)FS变量练习 (3)NF变量和NR变量练习 3.总结: 1.AWK内置变量 AWK内置变量如下表: awk内置变量 作用 $0 代表目 ...