齒科服務專案–前端架構配置
1. 齒科服務專案前端架構 1
2. Vue簡介 1
3. Webpack 1
4. 路由管理 2
5. Axios 2
6. 架構圖 2
7. 前端的目錄結構如下： 3
8. 版本釋出 git 4

1.齒科服務專案前端架構
此專案為多個渠道的入口進來的齒科潔牙客戶提供齒科服務預約，包括預約模組和使用者管理模組。具體，預約模組包括：城市查詢，門店列表，門店詳情，預約時間，預約下單；使用者模組包括：預約進度查詢，及售後齒科全景圖和評價服務。
採用前後端分離部署方式，前端是使用了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等），並將其轉換和打包為合適的格式供瀏覽器使用。

3.1 WebPack和Grunt以及Gulp相比有什麼特性
其實Webpack和另外兩個並沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模組化的解決方案，不過Webpack的優點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。

Grunt和Gulp的工作方式是：在一個配置檔案中，指明對某些檔案進行類似編譯，組合，壓縮等任務的具體步驟，工具之後可以自動替你完成這些任務。

3.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歷史也會保留，這點非常重要。