挣闲钱前端部分软件设计技术文档

1 面向对象编程

1.1 技术选型理由

我们选择了vue-cli2 + vuex + vue-router + webpack + ES6/7 + semanticUI作为前端框架

  • Vue 作为渐进增强的框架,不在一开始就在使用场景和模式上限制用户,而是通过官方提供的扩展,以及第三方扩展,逐渐为更复杂的需求场景提供解决方案,也给用户提供了选择的余地。
  • 在内存占用上,Vue 要优于 Angular,但是 Angular 框架本身提供了非常多的特性,而 Vue 在开发过程中引入 vue-router,vuex,vue-class-component 逐步发展为 Vue 全家桶的过程中,会逐步增长对内存的需求。
  • 这个框架可以被不同程度的使用,可以单独使用核心组件的部分,也可以加入状态管理,也可以加入路由管理,从一部分使用 Vue 到全站使用 Vue 开发,提供了开发者更多的选项,也借鉴了不同的框架,并对其优点单独为 Vue 进行了增强

1.2 对应模块和代码

vue-cli2框架

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

  • 通过 @vue/cli 搭建交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service),该依赖:
    • 可升级;
    • 基于 webpack 构建,并带有合理的默认配置;
    • 可以通过项目内的配置文件进行配置;
    • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合,集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
    Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
vue-cli项目目录结构
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件,加载各种公共组件
|-- static                           // 静态文件,比如一些图片,json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                       // postcss配置文件
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,包依赖信息等

一个page或者component包含:

脚本部分 样式部分 模版部分

你可能感兴趣的:(WEB开发)