项目实战
2021-04-02 10:15:45 10 举报AI智能生成
项目实战
作者其他创作
大纲/内容
0. 相关概念
1. 八爪图
对应用界面各个组成元素进行颜色/大小/颜色等进行标记
2. 图片Base64
css中引用的小图片, webpack在打包时会自动将其转化为样式内部的Base64编码字符串
适合小图片, 减少请求次数
3. @2x和@3x
不同手机的分辨率是不一样的, @x越大, 手机密度越高
iphone6是@2x, iphoneX是@3x
为了适应不同屏幕, 图的内容一样, 大小不一样
4.安装Vue调试工具
Vue.js devtools
更多工具
扩展程序
1. 项目介绍
2. 项目描述
此项目为高仿拼多多Web App(SPA)
项目版块包括
首页
推荐
搜索
聊天
个人中心
项目涉及技术
vue全家桶+ES6/7+Webpack+Node+MySQL+...
项目开发模式
模块化
组件化
工程化
3. 项目涉及类库
前端页面层
vue+vue-router(路由)+vuex(状态管理)+vue-lazyload(图片懒加载)+mint-ui(界面构建)
vue开发必备
vue-scroller + better-scroll + animate + swiper
动画涉及库
stylus
css预编译器
组件模块化
ES6 +babel
数据交互层
mock.js + postman + ajax(axios)
项目工程化
vue-cli + eslint + webpack
4. 项目整体路由搭建
一级路由
首页
/home
Home.vue
推荐
/recommend
Recommend.vue
搜索
/search
Search.vue
聊天
/chat
Chat.vue
个人中心
/me
Me.vue
登录
/login
Login.vue
注册
/register
Register.vue
二级路由
首页
热门
/hot
Hot.vue
服饰
/dress
Dress.vue
鞋包
/box
Box.vue
母婴
/mbaby
Mbaby.vue
百货
/general
General.vue
食品
/food
Food.vue
内衣
/shirt
Shirt.vue
男装
/man
Man.vue
电器
/ele
Ele.vue
5. 数据交互
接口文档
mock数据
企业开发一般一开始都是自己造模拟数据
API接口
接口联调
0 条评论
下一页
