vue2-airbnb

仿爱彼迎的Vue项目

基于 vue2 + webpack + vueRouter

在线效果

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

项目目的

• 搭建一个完整的项目骨架
• 使用vw实现移动端适配

前期准备

1. 配置.postcssrc.js(参考)
2. 增加viewport-units-buggyfill配置，适配了低版本安卓机型
3. Less配置
4. svg-sprite-loader配置(参考)
5. vuex配置
6. 添加normalize.css(跨浏览器的高度一致性)
7. 添加babel-polyfill(ES6转ES5)
8. 搭建目录

目录

• apis - 接口
• assets - 静态资源
• components - 组件
• icons - iconfont
• router - 路由
• store - vuex
• styles - 样式
• utils - 工具库
• views - 页面

styles

• normalize.css： 样式重置统一
• styles/*.less： 公共样式(UI-Key、工具样式)
• <style></style>: 局部样式

component

• slot插槽分发内容: 向一个组件传递内容
• 父组件给子组件传值：子组件创建props接受父组件传递过来的值； 父组件使用子组件的时候，绑定变量传值
• 子组件给父组件传值：父组件使用子组件的时候，绑定监听事件；子组件值发生改变，通过this.$emit事件通知父组件
• 子组件不可以直接修改父组件传递过来props的变量的值

困难

• 含单个进度条的分页器与图片滚动的时间对不上