/suo-design-pro

基于 Vue2.x、Vue-Cli4、vant2.x 的移动端 H5 移动端应用(偏向商城)

Primary LanguageVueMIT LicenseMIT

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