Skip to content
基于 Vue2.x、Vue-Cli4、vant2.x 的移动端 H5 移动端应用(偏向商城)
Vue JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github docs(readme): update README Jan 7, 2020
public chore(images): add some images assets Jan 7, 2020
src feat(tests): add tests demo Jan 14, 2020
tests/unit
.editorconfig chore(config): update config Jan 7, 2020
.env-default.js chore(config): update config Jan 7, 2020
.eslintignore chore(config): update config Jan 7, 2020
.eslintrc.js chore(eslint): 新增 eslint 相关配置 Dec 30, 2019
.gitignore build(init): 初始化vue-cli4项目 Dec 27, 2019
.prettierrc.json
.travis.yml
LICENSE chore(config): update config Jan 7, 2020
README.en-CH.md feat(tests): add tests demo Jan 14, 2020
README.md docs(readme): add README Jan 15, 2020
README.zh-CH.md docs(readme): update README Jan 7, 2020
babel.config.js chore(config): update config Jan 7, 2020
jest.config.js test: add some jest usage Jan 7, 2020
package.json
vue.config.js chore(config): update config Jan 7, 2020
yarn-alias.md docs(readme): update README Jan 7, 2020
yarn.lock chore(config): update config Jan 7, 2020

README.md

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

You can’t perform that action at this time.