一、数据获取

Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据。

• 关于axios插件的引入
  在main.js中引入，但是 axios 并不能Vue.use，只能每个需要发送请求的组件中即时引入。为了解决这个问题，是在引入 axios 之后，修改原型链。

// main.js// 导入Axios插件import Axios from 'Axios';// 如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性Vue.prototype.$ajax = Axios;

// 其他组件，例如App.vueexport default {created() { // this.$ajax ==> Axios this.$ajax.get('/api/seller').then( function(response) {console.log(response);}).catch(function(error) {console.log('获取数据失败:' + error);});},}

安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()。

// 导入vue-router插件import VueRouter from 'vue-router';// 全局注册，在其他组件就是可以使用Vue.use(VueRouter);

二、header界面

三、公告以及优惠信息 --- 详情弹层页

CSS sticky footers布局: Sticky footers设计是最古老和最常见的效果之一，可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。

<div v-show="detailShow" class="more"><div class="detail-wrapper clearfix"><div class="detail-main"></div></div><div class="detail-close"></div></div>

.more{position: fixed;z-index: 9999;width: 100%;height: 100%;overflow: auto;left: 0;top: 0;transition: all 1s;background: rgba(7, 17, 27, 0.8);}.more .moreShow-wrapper{/* 最小高度和视口一样*/min-height: 100%;}.more .moreShow-wrapper .moreShow-main{padding: 64px 0;}.more .moreShow-close{position: relative;width: 32px;height: 32px;/* 注意*/margin: -64px auto 0;}

四、star组件

export default {// 父组件传递过来的两个参数props: {size:{  // 尺寸大小24, 36, 48type: Number        // 指定参数类型},score:{type: Number}},/*计算属性computed的使用描述：在同一个实例化对象中，其中一个属性改变，要求另外一个属性也跟着改变*/computed: { // 传入尺寸不同，类名即不一样starType() {    return 'star-' + this.size;},items() {let result = [];// 分数处理，只有整数和0.5let score = Math.floor(this.score * 2) / 2;let has = score % 1 !== 0;  // 是否有小数let integer = Math.floor(score);  // 整数部分// 点亮的星for(let i=0; i<integer; i++){result.push(CLS_ON);}if(has){        // 半星result.push(CLS_HALF);}while(result.length < LENGTH){result.push(CLS_OFF);}return result;}}}

五、自适应经典flex布局

六、添加动画效果

Vue过渡效果

<transition name="fade"><p v-if="show">hello</p></transition>// v对应的即是name属性- v-enter: 过渡的开始状态(进入时)- v-enter-to: 过渡的结束状态(进入时)- v-enter-active: 定义过渡的过程时间，延迟和曲线函数(进入时)- v-leave: 过渡的开始状态(离开时)- v-leave-to: 过渡的结束状态(离开时)- v-leave-active: 定义过渡的过程时间，延迟和曲线函数(离开时)

<transition name='fade'><div v-show="moreShow" class="more">// ...</div></transition>