单页应用优势：页面切换快，页面跳转由js渲染。缺点：首屏时间稍慢，SEO差。是比较好的前端解决方案。
准备工作：
引入border.css（解决一像素边框问题）
改变 border.css中border颜色，就在css中为border名的伪类添加样式进行覆盖即可
引入fastclick库，解决移动端点击事件延迟300毫秒事件
npm install fastclick --save-dev
使用：
fastClick.attach(document.body);
图标管理--我的项目--创建项目--填写列表
将需要使用的图表添加至项目，下载之本地，保留字体文件以及css文件，将css文件路径设置正确，使用时，先引入css文件，全局在html的dom中创建一个类名为iconfont,将16进制代码在iconfont中复制到dom中即可
删除无用代码
初始化完成之后，将修改的项目上传到git仓库中去。
git add . //将本地修改提交到本地缓存区
git commit -m '注释内容' //将本地缓存区的代码提交到本地仓库，同时留下一条message为注释内容
git push //将本地代码上传到线上仓库去
使用stylus:
npm install stylus --save
npm install stylus-loader --save
使用时在页面style标签声明lang="stylus"
计算网页中rem值：
.在reset.css 中如果设置了关于body的字号（如body为50px），表示1rem=50px.，网页设计稿中的实际像素除以2为css应该设置的像素，再根据rem进行换算即可。
想要在网页中使用rem,就要为html设置一个字号字体图标样式无法显示
将公共样式抽离到公共文件中
注意：
如果想在css文件中引入其他的css，要在路径前面加上~.如：
import '~@/assets/index.css';
每个阶段进行修改之后，记得上传代码
开发过程中每创建一个新的功能都要创建一个分支，在分支上进行项目开发。开发完成之后，将分支上面的代码合并到master主分支上面
码云创建分支：
1个分支 ----- 新建分支 ----- 线上分支创建完成之后，拉取分支到本地：git pull ---- git checkout 分支名称(检查分支) ----- git status（查看分支的状态）
vue轮播插件：
vue-awesome-swiper
将轮播图分支合并到master分支上面：
企业工作流程是开发具有具体功能的分支，测试没有问题之后，再进行分支的合并，将分支合并到主分支上面即可。
先新建分支，新建好之后进行分支功能开发，开发好之后进行上传，最后合并分支
git add .
git commit -m'注释'
git push 会自动上传到分支上面
git checkout master 先切换到master分支上
git merge origin/swipper 将线上新增的分支合并到本地master分支上面
git push 将合并后的master分支内容也提交到线上
注：master分支上存放的是整个项目最新的代码，而新建的swipper分支上面存放的是开发的具体功能的最新代码
创建index-icons分支，来新增首页列表icon内容功能
创建分支index-icon之后
运行 git pull,将分支拉取到本地
运行git checkout index-icon 切换到该分支
之后开发index-icon的功能，最后重复以上步骤进行分支的合并。
图标多于九个时，启动轮播效果，可以左右侧滑
将swiper组件运用到图标之中
注意将.swiper-container的样式覆盖一下，使它与滑动区域同高
将数据提取出来之后会发现如果图标多于八个，会直接显示在下面被隐藏掉，不是预期的侧滑出现在另一侧，这需要借助computed计算属性实现功能
控制台打印结果如下:
一共有九条数据，一页展示8条数据，所以分成两页，下标为0-7的存放在第一页，下标为8的数据存放在第二页。
dom循环返回的pages数组，数据展示也从数组中获取。
ajax获取首页数据
创建index-ajax分支
获取页面数据很多方式可以使用：
浏览器自带fetch
ajax
vue-resource
axios :vue官方推荐可以实现跨平台数据请求（这里使用）
整个首页发一个ajax请求，再将数据传递给子组件。利用生命周期函数mounted函数。
步骤：1.下载并在在home组件引入axios
2.在生命周期函数mounted中执行函数
3.函数定义在methods中
4.函数中使用axios.get 请求一个地址，它返回的结果是一个promise对象，所以使用then。
5.在git ignore中忽略本地数据json文件，防止被提交到线上仓库
6.在config/index,js文件中修改proxy代理机制的配置，在proxyTable中
意思是说，/api这个路径的指向地址是localhost8080,pathRewrite代表路径重写，正则匹配所有以api开头的路径都要替换为static/mock(只是在开发环境中)
注意：1.本地模拟json文件时，要将文件放在static 文件下面才能够获取到。
2.模拟数据并不需要被提交到线上，所以在.gitignore中将文件忽略。就不会被提交到线上和本地git仓库中了
3.本地项目地址和实际接口地址不同，需要一个转发机制将项目地址转化为接口地址，就是proxy代理机制
网友评论