爲營銷活動設計的前端架構
主要的技術棧爲 Vuejs，Webpack，請自行閱讀以下技術或者框架的文檔：前端
1、基礎說明：vue
-
node (https://nodejs.org/en/)node
-
npm (https://www.npmjs.com)webpack
-
webpack (https://github.com/webpack/webpack)git
-
vuejs (https://vuejs.org)github
-
babel (https://babeljs.io)web
-
其餘的好比sass等CSS預編譯器，均可以先不考慮。vue-cli
下面對以上涉及的技術作一個簡單的說明。 npm是
node的包管理工具，每一個包都是一個或者一組js文件的組合。包（js文件）之間的依賴關係被定義在package.json文件中，你能夠在示例項目的根目錄下找到這個文件，注意裏面的dependecies等內容。node，和npm都須要你自行在開發機中進行安裝，有MacOSX和Windows的版本。咱們通常須要經過npm來安裝項目須要的包、模塊（裏面是js文件）。同時還須要經過npm來運行整個項目的構建過程。npm
2、使用說明：json
下面介紹當前這個示例項目的使用說明，你能夠在本身機器上完成示例項目的安裝和運行，查看運行效果。而後咱們在瞭解從這種項目的構建，到具體的開發細節。 安裝 使用git clone將示例項目的代碼下載到本地。具體git的使用，請查看git的文檔。 命令以下： git clone http://120.76.123.62:8081/frontend/act-example.git Cloning into 'act-example'... remote: Counting objects: 71, done. remote: Compressing objects: 100% (63/63), done. remote: Total 71 (delta 8), reused 0 (delta 0) Unpacking objects: 100% (71/71), done. 安裝node和npm 確保本機上有成功安裝node及npm。在命令行輸入npm後應該能夠看到命令執行後的提示信息。 安裝Json-server 在確保node和npm正確安裝好之後，經過npm安裝json-server（https://www.npmjs.com/package/json-server）。 示例項目主要是使用json-server模擬後端接口API，實際項目中，使用超桌本身的API接口平臺。 執行命令行安裝json-server： $ npm install -g json-server 安裝成功後在本地硬盤創建以下的json文件： maxiaoqiangdeMacBook-Pro:~ maxiaoqiang$ cat ~/Temp/fake.json { "users": [ { "id": 1, "name":"混世魔王", "phone":"18620364545", "company":"中國平安-璽越人生","tags":["保障全","收益高","保費低"],"likes":8 } ], "companyAndProds" : [ { "name": "中國平安-璽越人生", "value": "中國平安-璽越人生-001"}, { "name": "中國xx-璽越人生", "value": "中國xx-璽越人生-002"}, { "name": "中國人壽-璽越人生", "value": "中國人壽-璽越人生-003"}, { "name": "太平洋保險-璽越人生", "value": "太平洋保險-璽越人生-004"}, { "name": "前海人壽-璽越人生", "value": "前海人壽-璽越人生-005"} ], "statistic": {"total": "456511"} } 而後運行json-server，命令以下： maxiaoqiangdeMacBook-Pro:~ maxiaoqiang$ json-server --watch ~/Temp/fake.json 執行成功後會得到以下信息： Resources http://localhost:3000/users http://localhost:3000/companyAndProds http://localhost:3000/statistic `Home` `http://localhost:3000` 而後使用瀏覽器能夠訪問這些地址看看接口是否正常工做。 運行示例項目 進入act-example項目目錄，而後按照以下操做運行項目： npm install npm run dev 運行成功後會彈出一個瀏覽器，在地址欄中輸入 http://localhost:8080/#/start，這樣就能夠看到開始頁面，而後能夠進行操做後點擊「下一步」。 注意若是nom run dev有提示錯誤信息，極可能是沒有安裝相應的依賴包，這種狀況下，請自行經過以下命令安裝： nom install <包的名字> --save-dev
咱們已經瞭解到如何安裝並運行示例項目，接下來咱們介紹示例項目是如何構建的。 咱們往後統一使用vue cli 工具建立營銷活動使用的項目，而後每一個項目都是git裏面的一個獨立的repository，而非如今的所有的各類各樣的項目代碼都在一個repository中。 安裝vue cli 你能夠到 vue cli官方網站 去得到關於vue cli的說明文檔。 $ npm install -g vue-cli 上面的命令將在全局安裝vue cli工具，這樣在任何一個項目或者目錄中均可以使用vue cli工具。在Mac OSX中，全局的目錄位於： /usr/local/lib/node_modules 執行命令構建項目 你能夠經過命令行 $vue init webpack *YOUR_PROJECT_NAME* 在當前目錄下建立一個項目出來。 示例項目的目錄結構說明 請自行研究。
4、前端架構說明：
下面咱們介紹下前端架構。 前端架構示意圖以下: 藍色部分通常是由cli模版自動生成的，通常只須要咱們作少許的改動便可。 黃色部分是頁面主體部分，也就是大部分咱們用戶看到的頁面都在這裏，這裏也是組件主要被使用到的地方。 粉色部分則是能夠複用的組件。
5、項目示例詳解：
下面咱們來看看示例項目中的關鍵代碼，請按照下面的步驟構思咱們的前端架構（已經完成切圖）。
- 咱們是否有全局的數據結構，也就是須要在多個頁面上訪問的共享數據結構，若是有的話，咱們考慮在store中進行定義，並在多個頁面上訪問；(http://120.76.123.62:8081/frontend/act-example/blob/master/src/store/index.js )
- 咱們是否有全局的靜態變量，好比活動ID，在全部頁面上均可以訪問到這個只讀的變量(http://120.76.123.62:8081/frontend/act-example/blob/master/src/App.vue)；
- 咱們有哪些頁面，這些頁面間的跳轉關係是怎樣的，咱們須要給這些頁面起好名字，並在router中安排好這些頁面，並在頁面內部使用
route-link在頁面間跳轉(http://120.76.123.62:8081/frontend/act-example/blob/master/src/router/index.js)； - 頁面上有哪些交互或者頁面元素是組件化的，或者是已經有組件來提供的？咱們須要在頁面上引用這些組件(http://120.76.123.62:8081/frontend/act-example/blob/master/src/pages/StartPage.vue)；
- 頁面有哪些須要和後臺交互的代碼，是目前的組件沒法知足要求的？咱們須要考慮新增組件或者作一次性的代碼開發；
- 在頁面上引用組件，並在頁面內部對組件進行外部的CSS定義(http://120.76.123.62:8081/frontend/act-example/blob/master/src/pages/StartPage.vue)；
- 運行整個項目，觀察是否有其餘須要調整的地方。
關於組件的開發，咱們在另外的項目中描述。