关于
适配多种设备视口是移动端所面对的场景，之前开发项目中多采用rem、media查询、flex百分比等布局，最近研究vw(视口单位)实现适配布局过程中，决定采用vue写仿网易严选项目练习下
注：讲解几种适配大法比较好的文章[https://juejin.im/post/5bc07ebf6fb9a05d026119a9]
关于兼容
由于精力有限，只测试了vivo、6p、xr机型部分浏览器。由于vw针对视口逐步放大，暂未解决pc下字体和盒子元素过大的问题
关于后端
暂未开发后台，留待以后开发node + mongodb的简单后台。开发环境采用简单mock数据，生产环境采用axios请求固定数据源。目前跟登录、购物相关页面暂未开发
技术栈
vue2 + vuex + vue-router + webpack + ES6 + axios + sass
运行
git clone https://github.com/lusteng/vue-yanxuan.git
cd vue-yanxuan
npm i 或者 yarn
npm run serve
Demo
http://www.liubaitong.com/view/?site=yanxuan
部分页面截图
目录结构
├── mock //dev 开发环境 mock数据
├── public
├── src
| ├── api //请求接口集合
| | ├── cateList.js
| | ├── comment.js
| | ├── common.js
| | ├── goodsDetail.js
| | ├── index.js
| | ├── items.js
| | ├── manufacturer.js
| | ├── marketDesc.js
| | ├── middleware.js
| | ├── search.js
| | ├── topic.js
| | └── user.js
| ├── App.vue
| ├── assets //logo、样式、字体集合
| | ├── css
| | ├── font
| | └── img
| ├── components //公共组件
| | ├── common
| | └── market
| ├── layout //布局组件
| | ├── footer
| | └── header
| ├── main.js
| ├── page //页面
| | ├── cart
| | ├── cateList
| | ├── comment
| | ├── goodsDetail
| | ├── index
| | ├── items
| | ├── login
| | ├── manufacturer
| | ├── marketDesc
| | ├── notFound.vue
| | ├── search
| | └── topic
| ├── router.js
| ├── store //数据源
| | ├── index.js
| | └── mutation-types.js
| └── utils //工具方法
| └── index.js
├── static //静态资源
| └── img
├── tests
├── .postcssrc.js //配置vw文件
.
.
TODO
- node + mongodb 模仿数据后台
- 登录系统、用户系统