齿科服务项目

xx服务项目--前端架构配置

1. xx服务项目前端架构 1

2. Vue简介 1

3. Webpack 1

4. 路由管理 2

5. Axios 2

6. 架构图 2

7. 前端的目录结构如下： 3

8. 版本发布 git 4

 

 

 

1.xx服务项目前端架构

此项目为多个渠道的入口进来的齿科洁牙客户提供齿科服务预约，包括预约模块和用户管理模块。具体，预约模块包括：城市查询，门店列表，门店详情，预约时间，预约下单；用户模块包括：预约进度查询，及售后齿科全景图和评价服务。

采用前后端分离部署方式，前端是使用了vue 2 单页应用的系统，使用webpack打包编译的项目架构。 主要技术用到

vue + webpack + vue-router + axios+mint +Element UI。

2. Vue简介

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。主要特点：

 

·自底向上增量开发的设计，易上手同时便于与其他现有系统整合

·组件化应用构建

·同样丰富的生态也可以实现复杂应用程序

·数据驱动视图

3.Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

 

7.1 WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

 

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

7.2 Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

 

 

Webpack工作方式

4.路由管理

项目使用的是官方vue-router库，采用默认路由是hash mode，既用户访问的路径为形式为：eg：  /#/home.html

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

5.Axios

vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios,本项目使用webpack,es6，只需要安装axios模块之后便可以使用。

 

 

6.架构图

 

 

 

 

 

 

 

 

 

 

 

 

 

 

使用vue-router来处理路由，axios来处理异步数据请求，同时项目使用mint,mui作为ui框架。

7.前端的目录结构如下：

7.1主结构：

 

解释：

·node_modules 运行的node环境

·config 项目的配置文件：关于dev发布和build打包的配置

·build  build打包具体的配置文件

·dist build打包后生成的具体文件

·src/api axios相关配置的文件 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

·src/assets  公共资源文件（公共js、css和image等）

·src/components 页面组件

·src/module入口配置文件

·src/router路由配置文件

·static 静态资源文件（架构js、css和image等）

 

7.2 分模块的配置

 

1）项目分为四个渠道，common,gx,yl,默认模块wb；

2）每个渠道分为  

--meal 购买模块  

--order 管理模块

两个模块

3）组件可以单独建一个文件夹：eg ： loadmore

7.3 入口文件配置

 

·App.vue 页面的入口文件

·gxOrder.js   程序的入口文件，导入公共的css js 和组件 创建Vue

·gxOrder.html  本模块的入口页面

 

7.4打包配置文件

配置多页面设计修改的文件utils.js ，webpack.base.conf.js ，webpack.dev.conf.js ，webpack.prod.conf.js

 

·utils.js 工具类方法

·webpack.base.conf.js webpack基础配置(动态获得入口 出口  和 loader)

·webpack.dev.conf.js  webpack 开发环境配置

·webpack.prod.conf.js webpack  生产环境配置

 

7.5压缩文件

 

 

每个模块对应一个入口html，分别对应生成一个css js 文件,css js 的map文件

 

8.版本发布 git

Git 和 CVS、SVN不同，是一个分布式的源代码管理工具，它很强，也很快，Linux内核的代码就是用Git管理的，它给我们带来的直接好处有：

1. 初始化，git init, git commit -a, 就完了。对于随便写两行代码就要放到代码管理工具里的人来说，再合适不过。也可以拿git做备份系统，或者同步两台机器的文档，都很方便。

2. 绝大部分操作在本地完成，不用和集中的代码管理服务器交互，终于可以随时随地大胆地check in代码了。 只有最终完成的版本才需要向一个中心的集中的代码管理服务器提交。

3. 每次提交都会对所有代码创建一个唯一的commit id。不像CVS那样都是对单个文件分别进行版本的更改。所以你可以一次性将某次提交前的所有代码check出来，而不用考虑到底提交过那些文件。（其实SVN也可以做到这点）

4. branch管理容易多了，无论是建立新的branch，还是在branch之间切换都一条命令完成，不需要建立多余的目录。

5. branch之间merge时，不仅代码会merge在一起，check in历史也会保留，这点非常重要。