一、首页Header的开发
1.stylus使用
- 设计图 750 px ，是iphone6 的2倍图设计稿
- 使用 stylus 方便我们快速的编写 CSS 代码，stylus 是一种CSS预处理语言
- npm install stylus --save
- npm install stylus-loader --save （stylus-loader 可以将 stylus 语言转换成原生 css）
- 新建Header.vue 设置
export default {name: 'Home') - 在Home.vue中引入
-
import HomeHeader from './components/Header'
并且声明该局部组件
-
component: {HomeHeader}关于样式：使用stylus语言，只对当前组件有效
-
<style lang="stylus" scpoed>
iconfont 引入图标
- 通过webpack对文件路径进行简化，进入build=>webpack.base.conf.js，缩写路径： reslove.alias 内添加 'styles': resolve('src/assets/styles'),
遇到的问题：
下次运行项目会遇到 stylus报错的问题。
原因，package.json 缺失依赖，不能解析stylus
解决方法：执行 npm install stylus-loader css-loader style-loader --save
二、首页轮播图
1.创建分支，在分支开发完毕会合并到master主分支上
- git pull (把线上分支拉到本地)
- git checkout index-swiper (修改本地的分支为新建的那个分支)
- git status (查看本地的分支)
2.轮播图插件插件 vue-awesome-swiper
-
npm install vue-awesome-swiper --save (默认最新版)
-
npm install vue-awesome-swiper@2.6.7 --save (安装稳定的版本)
- 在main.js中引入
-
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)
三、图标区域页面布局
写样式，此阶段没什么难点
四、图标区域逻辑实现
1. 图标分类轮播效果
- 打开 swiper.vue
- 给要滚动的组件包裹 <swiper :options="swiperOption"> 与 <swiper-slide> 标签，一个<swiper-slide>为一页
- 实现上下区域都能滑动，需要将.swiper-container 的宽高设定为和 .icons一样，使用样式穿透符 "<<<" ，可以修改不属于本页组件的样式
- 关闭自动滚动参数 ：swiperOption: {autoplay: false},
2.合并线上分支
//同步线上仓库分支 git add . git commit -m 'add icons' git push //切换到master分支 git checkout master //合并 git merge origin/index-icons git push
五、推荐区域
写样式，此阶段没什么难点
六、Ajax 获取首页数据
推荐 vue-axios
整个首页发送一个Ajax 请求
- 引入：import axios from 'axios'
-
methods: { getHomeInfo: function() { axios.get('/api/index.json') .then(this.getHomeInfoSucc) }, getHomeInfoSucc: function() { console.log(res) } }, mounted () { this.getHomeInfo() } - 整个项目中 只有static 目录下的内容可以被外部访问到
- 进入 config/index.js 添加 proxyTable 进行api替换，可以做到线上本地api 自动切换
proxyTable: { '/api': { target: 'http://localhost:8080', pathRewrite: { '^/api':'/static/mock' } }
七、城市选择页面路由配置
better-scroll 使用
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
<!-- you can put some other DOMs here, it won't affect the scrolling -->
</div>
//初始化 mounted () { this.scroll = new Bscroll(this.$refs.warpper) }
遇到的问题，加载后无法滚动 ，刷新后可滚动
情况一：
原因：当数据是动态渲染时，在没有渲染出来的情况会视为scollBox的高度为0，因此要在渲染完成后执行 better-scroll的refresh 操作。因为此时高度因为新数据发生改变，需要重置 better-scroll
//mounted函数 this.$nextTick(()=>{ if (!this.scroll) { this.scroll = new BScroll(this.$refs.rongqi, { click: true }); } else { this.scroll.refresh(); }; });
情况二：
以PC模式打开页面，按F12后切换移动端无法滚动。
解决方法：切换移动端后，按F5 以移动端模式重新加载即可。
八、兄弟组件间联动
子传父，父传弟的形式
九、使用Vuex实现数据共享
遇到的问题：模块莫名其妙的丢失
目前解决办法是 手动删除 node_modules文件夹，之后进行 npm install 重新安装
VUEX的使用
十、城市保存
localStorge本地存储
state: {city: localStorage.city || '上海'},
mutations: {
localStorage.city = city
}
使用keep-alive 优化网页性能
遇到的问题：
每次切换路由时，Ajax 都会发送请求
解决方法： 在App.vue 文件的 <router-view>标签外包裹一层 <keep-alive> ，下次请求时会将已存储的内容从内存中取出即可，实质是不再执行mounted 周期函数
十一、详情页动态路由及 banner 布局
十二、公共图片画廊组件拆分
遇到的问题，
页面拖动会互相影响 解决滚动行为
https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html
在router/index.js 文件中 routes下面添加
scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }
作用：每一次做页面切换时，让先进入的页面X轴为0 Y轴也为0，（始终回到最顶部）
十三、真机测试
- 通过 ipconfig 命令获取本地IP （我的是 192.168.1.105:8080）
- 进入 package.json 在 "dev" 内添加 "--host 0.0.0.0" 即可使用手机在内网访问
解决手机低版本浏览器白屏不支持 promise 的问题
- npm install babel-polyfill --save
- 在 main.js 中引入 "import 'babel-polyfill"
十四、打包上线
前后端联调：
修改 config/index.js 下的 proxyTable
proxyTable: { '/api': { target: 'http://localhost:8080', //前端模拟数据形式 pathRewrite: { '^/api':'/static/mock' } } },
修改为：
proxyTable: { '/api': { target: 'http://localhost:80' //后端从80端口返回数据 } },
遇到的问题：
Vue 打包后运行 index.html 网页一片空白
解决方法：修改 config 文件夹下的index.js
设置assetsPublicPath: './'