suo-design-pro 商城

简介

这是一个移动端web (H5) 解决方案，以移动端商城为主题，打造一个通用常规解决方案技术模型。

开始

# 克隆项目
git clone https://github.com/suoyuesmile/suo-design-pro.git
# 安装依赖
yarn
# 运行开发环境
yarn serve

测试

# 运行测试用例
yarn test

构建

## 构建
yarn build

教程

吃透 Vue 项目开发实践

吃透移动端 H5 与 hybrid

相关技术文章

编号	名称	状态
0001	吃透移动端 1px	完成
0002	吃透移动端 H5 响应式布局	完成
0003	吃透移动端 H5 与 hybrid	完成
0004	吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧《上》	完成
0005	[吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧《下》]	计划

设计规范

功能

功能规划

基础组件

	类型	名称	组件名
1	基础	颜色	app-color
2	基础	字体	app-font
3	基础	图标	app-icon
4	触发	按钮	app-button
5	触发	单栏	app-cell
6	选择	单选	app-radio
7	选择	多选	app-check
8	选择	弹窗选择	app-select
9	选择	下拉	app-select-drop
10	选择	开关	app-switch
11	选择	切换	app-tab
12	选择	评分	app-rate
13	选择	输入框	app-filed
14	提示	提示	app-toast
15	提示	加载	app-loading
16	提示	弹窗	app-dialog

参考文档

	技术	类型	参考文档	一周快速上手建议时间
1	vue	mvvm 框架	https://cn.vuejs.org/index.html	3 天
2	vue-cli4	脚手架	https://github.com/vuejs/vue-cli/tree/v3#vue-cli--	空闲研究
3	vue-devtools	调试工具	https://github.com/vuejs/vue-devtools	空闲研究
4	vue-router	路由	https://router.vuejs.org/zh/	1 天
5	vuex	状态管理	https://vuex.vuejs.org/zh/	1 天
6	sass	CSS 预编译	https://www.sasscss.com/getting-started/	1 小时
7	vant	组件库	https://youzan.github.io/vant/#/zh-CN/intro	半天
8	axios	获取 API 数据	https://github.com/axios/axios	空闲研究
9	eslint	静态检查	https://eslint.org/	边开发边理解
9	pug	模版	https://juejin.im/post/5e0202fc6fb9a0165721e39a	自行研究
9	rem & pxToRem	屏幕适配	https://juejin.im/post/5df59139518825123e7af459
9	jest	自动化测试	https://juejin.im/post/5df59139518825123e7af459	自行研究

License

MIT

Copyright (c) 2020-present, Suo Shao