前言

由於上次搭好了SSM後端框架，就想著順便把以前那個部落格網站的後臺管理系統給做了，系統的後端環境是有了，前端頁面用什麼開發呢？之前簡單的看了vue.js，所以就決定用vue.js做前端頁面，然後搜了一些vue.js配套的ui，找到了elementUI。而在看vue.js的時候看到上面說了npm安裝，於是就想起了這個，就想知道這是什麼，於是各種Google，差不多瞭解了現在的前端開發是什麼樣的了。感覺是跟後端差不多，要安裝服務程式，要用包管理工具，用包管理工具從遠端倉庫中拉去各種框架的包來搭建開發環境，設計好目錄結構，然後開始開發，開發完了打包帶走。因為開發前端也要伺服器，不是以前的靜態頁面跳轉，所以在測試時的時候前端頁面訪問後端的時候需要跨域訪問，還好SpringMVC只要簡單配置一下就可以了。
以下只說明如何在windows環境下快速地搭建開發環境進行開發，不進行任何介紹，相關介紹網上都有很多。

搭建開發環境

安裝webpack

首先要安裝Node.js，Node.js集成了npm（node package manage），所以安裝了Node.js就自然有了npm，可以用 $ npm -v 命令檢視有沒有安裝npm。
npm介紹：npm使用介紹

有了npm就可以安裝webpack了，開啟命令列工具輸入以下命令安裝webpakc：

npm install webpack -g

後面的-g表示全域性安裝，此時webpck應該安裝到了全域性環境下，可以用 命令：webpack -h試試看。

npm就像Maven一樣，幫你從遠端倉庫拉取各種包，也跟Maven一樣有個國外的訪問很慢的中央倉庫，又跟Maven一樣有國內自己的映象：

npm install -g cnpm --registry=https://registry.npm.taobao.org

可以用這個命令安裝淘寶的映象，然後就可以將用cnpm命令取代npm命令了，速度會快一點。

現在Node.js，npm，webpack都安裝好了，所以可以用webpack搭建開發環境了，可以參考這兩個簡介：
webpack中文指南
入門webpack，看這篇就夠了

安裝vue-cli

但是自己手動搭建開發環境太慢了，我們用的是vue.js，剛好可以用vue cli來快速地搭建基於vue.j的開發環境，命令列輸入下面的命令安裝vue-cli：

npm install vue-cli -g
 

然後找一個目錄準備建立專案，使用

vue init <template-name> <project-name>

命令進行專案的建立和初始化，template-name是vue-cli提供的幾種模板名字，可以不輸入。
vue -cli參考資料：Vue-cli圖文視訊教程
初始化命令介面：

上面的問號都是yes or no。

目錄結構：

目錄中的node_moduless資料夾是沒有的，進行專案建立和初始化之後是沒有一些依賴包的，這個時候我們就要進入專案的目錄下，使用

npm install

命令來初始化依賴包，初始化需要的包都在package.json裡面設定好了，這樣一個基本的專案環境搭建好了。

npm run dev

輸入上面的命令執行專案

執行成功。
至此，專案的開發環境成功搭建，接下來就要進行專案的開發了。

專案示例

專案開發都是在src資料夾下進行的。
因為是基於Vue.js和elementUI進行的專案開發，所以當然要匯入Vue.j包和elementUI包：

npm install --save vue element-ui

npm install --save vue-router

要從後端獲取資料，所以要ajax請求，用vue官方推薦的axios：

npminstall --save axios

本來還想把vuex加進去，但是想想專案太小了就算了。

開發工具Sublime Text3的外掛配置

方式一：
安裝Sublime text 3外掛很方便，可以直接下載安裝包解壓縮到Packages目錄（選單->preferences->Browse Packages）。
方式二：使用Package Control元件安裝
也可以安裝package control元件，然後直接線上安裝：

1.按Ctrl+`調出console
2.貼上以下程式碼到命令列並回車：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

3.重啟Sublime Text 3。
4.如果在Perferences->package settings中看到package control這一項，則安裝成功。
5.按下Ctrl+Shift+P調出命令面板
6.輸入install 調出 Install Package 選項並回車，然後在列表中選中要安裝的外掛。

由於我是用vue開發的，所以當然要安裝vue相關的外掛，在彈出的列表裡輸入vue就有vue相關的外掛。
Emmet外掛當然也是必裝的。

目錄結構

還可以根據不同模組在各個檔案下面進行細分

專案展示

上面的部落格管理是要與後臺互動的

下面的是elementUI部分元件的展示

參考資料彙總

原始碼：前端，後端

當然，還有很多功能沒實現，最近一段時間有事，大概可能弄不了多少，反正是不定時搗鼓。