Sen descrición

chenhao 526d1b6bfb fix: 修复小程序参数apiServer值错误 %!s(int64=2) %!d(string=hai) anos
http-test 04249cad9e rest client upload files %!s(int64=4) %!d(string=hai) anos
mock d713f7a06f 增加mock data代理 %!s(int64=6) %!d(string=hai) anos
public a1cb549b21 百度统计减少统计明细类型 %!s(int64=4) %!d(string=hai) anos
src 526d1b6bfb fix: 修复小程序参数apiServer值错误 %!s(int64=2) %!d(string=hai) anos
tests eb5bf55d39 lint fix %!s(int64=4) %!d(string=hai) anos
.browserslistrc e4bdaa4d67 update @vue/cli from 3.0.4 to 3.1.1 %!s(int64=6) %!d(string=hai) anos
.env.development f9869f8ecc 更新二维码处理逻辑 %!s(int64=3) %!d(string=hai) anos
.env.production 3c9618b141 生产环境变量 %!s(int64=4) %!d(string=hai) anos
.env.staging 2c2a86b9df 新构建脚本和环境 %!s(int64=4) %!d(string=hai) anos
.env.test 2c2a86b9df 新构建脚本和环境 %!s(int64=4) %!d(string=hai) anos
.eslintrc.js eb5bf55d39 lint fix %!s(int64=4) %!d(string=hai) anos
.gitignore 5d24763019 升级依赖 %!s(int64=4) %!d(string=hai) anos
README.md 49778f989f 打包优化. 补充README.md的内容. %!s(int64=6) %!d(string=hai) anos
babel.config.js 5d24763019 升级依赖 %!s(int64=4) %!d(string=hai) anos
jenkins.sh 2c2a86b9df 新构建脚本和环境 %!s(int64=4) %!d(string=hai) anos
jest.config.js eb5bf55d39 lint fix %!s(int64=4) %!d(string=hai) anos
jsconfig.json 5d24763019 升级依赖 %!s(int64=4) %!d(string=hai) anos
package.json eb5bf55d39 lint fix %!s(int64=4) %!d(string=hai) anos
postbuild.js 2c0022c762 升级npm dependencies %!s(int64=4) %!d(string=hai) anos
postcss.config.js 7f9bfb39cf prettier: add trailing comma %!s(int64=6) %!d(string=hai) anos
prebuild.js 876197f73f fix prod build date %!s(int64=4) %!d(string=hai) anos
prettier.config.js 7f9bfb39cf prettier: add trailing comma %!s(int64=6) %!d(string=hai) anos
serviceWorkerAppend.js c6798838b3 注释掉自定义的service worker %!s(int64=5) %!d(string=hai) anos
vue.config.js c4f91d5ff0 prettier %!s(int64=4) %!d(string=hai) anos
yarn.lock 5d24763019 升级依赖 %!s(int64=4) %!d(string=hai) anos

README.md

介绍

本文档介绍项目如何使用和扩展、采用的技术栈、目录结构和最佳实践等。你不用一次看完所有内容,但是建议在正式开发前完整读一遍文档。

安装、启动和打包

安装:

npm install

启动:

npm start

打包:

npm run build

技术栈

Vue 2.x Vuex 3.x Vue router 2.x

TODO: 架构图

构建工具

vue-cli

工具安装

Chrome 插件

Vue.js devtools

VS Code 插件

  1. Vetur (Author: Pine Wu)
  2. Prettier (Author: Esben Petersen) # 注意: 其他的 vscode 插件可能导致格式化不一致
  3. REST Client (Author: Huachao Mao)
  4. Quokka.js (Author: Wallaby.js) - optional

目录结构

目录 说明
build/ 打包产出
config/ 打包配置文件
node_modules/ 依赖包
src/assets/ 图片、字体文件等文件. 在多数情况下,应该把资源文件放在 src/features/下,这种情况可以让应用垂直划分,同时可以更干净的删除资源。
src/auth/ 认证信息是全局的
src/components/ 全局组件 
src/constants/ 集中放置全局  常量,方便更新 API 的服务器地址等
src/directives/ 全局的 directive
src/features/ 实现业务需求的组件。目标是让尽可能多的相关文件在相同的业务组件内。这使得开发团队可以更好的划分任务。业务组件可以依赖全局元素,如 src/auth, src/components, src/directives,或者依赖其它业务组件。但是业务组件不应该依赖其它业务组件的子组件,它应该使用其它组件的 public API。必要时,子组件可能在业务组件中重复。
src/http/ 包含非认证  的 HTTP 请求( 认证的部分应该在 src/auth 中做)。同时包含 router 和 routes。如果 routes 变的很大,可以将它拆分到 src/features 中,然后通过 import 引用。
src/store/ 使用 Vuex 管理状态的单一 store
src/styles/ 全局样式。 局部样式应该放在 src/features/中
src/utils/ 共享的工具类。 跟业务有关的  工具方法放在 src/features/中
static/ 不需要 Webpack 处理的静态文件
tests/ 单元测试和 E2E 测试

错误处理

通用的错误处理

API 请求

从用户操作,界面有一处集中显示操作反馈。
处理顺序如下:

  1. 用户操作
  2. 触发 vue action
  3. 调用 vuex action(无需处理错误)
  4. 调用 api,若出错,修改全局错误状态,并通知展示状态
  5. 界面展示程序状态,即出错信息

如果用户需要 vuex action 的结果,可以在 vuex action 里面返回 promise,不建议在 component 处理状态。 应该尽可能通过 store 的状态更新使得界面更新。

状态处理

无需共享状态的组件可以直接在组件的生命周期中发请求获取数据。一般是纯显示的组件比较多。

共享状态的通过 vuex 来处理。

TODO:

  1. module state
  2. 新项目以 ES2018 为基准,选择 stage 3 的特性,将常用的特性列表在 readme 中给出网址

参考资料

  1. Vue-pizza
  2. Error handling with async-await in Vue and Vuex