这是一个移动端web (H5) 解决方案,以移动端商城为主题,打造一个通用常规解决方案技术模型。
# 克隆项目
git clone https://github.com/suoyuesmile/suo-design-pro.git
# 安装依赖
yarn
# 运行开发环境
yarn serve
# 运行测试用例
yarn test
## 构建
yarn build
编号 | 名称 | 状态 |
---|---|---|
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 | 自行研究 |
Copyright (c) 2020-present, Suo Shao