前後端分離之Vue項目構建測試打包發布

摘要： 寫在開始 其實之前對前後端分離研究過一段時間，中間由於項目進度耽擱也就不了了之了，最近項目中部分使用到了Vue，恰逢前端小夥伴們居然說要使用這個東西，也許是前端的工作的確有點太乏味了，他們想找點新鮮感。

寫在開始

其實之前對前後端分離研究過一段時間，中間由於項目進度耽擱也就不了了之了，最近項目中部分使用到了Vue，恰逢前端小夥伴們居然說要使用這個東西，也許是前端的工作的確有點太乏味了，他們想找點新鮮感。

目前我們前後端開發配比是1:5的樣子，前端負責提供靜態頁面，後端負責後台開發以及前台數據渲染以及效果展示，從工作量上以及人員分配上來說還是比較合理的。

那麼問題來了，如果前端真想找新鮮感，在不增加人手的情況下，他們的新鮮感很可能會被進度拖入無盡的深淵。對於後端開發來說，我們一般開發一個功能，後台和前台工作量的比例一般會是1:3，甚至會更高(排除簡單的增刪查改和套模版)。

儘管前後端分離已是趨勢，但是對於大部分中小公司，特別是只有20-30人的開發團隊，前後端分離可能會是個大坑，如果沒準備好，入坑請慎重。

準備環境

在用 Vue.js 構建大型應用時推薦使用 NPM 安裝，NPM 能很好地和諸如 Webpack 或 Browserify 模塊打包器配合使用。Vue.js 也提供配套工具來開發單文件組件。

安裝Node.js以及npm包管理器：https://nodejs.org/en/

國外網址可能有點卡，可以看點比的，慢慢等待就是了，

下載成功後，與安裝普通軟體一樣下一步就可以。

安裝完成之後，打開命令行工具，輸入 node -v，如下圖，如果出現相應的版本號，則說明安裝成功。

由於npm資源是國外的，對於國內用戶來說，你懂的，速度慢並且會導致npm安裝依賴包的時候失敗，所有我還需要npm的國內鏡像---cnpm：https://npm.taobao.org/

安裝cnpm：

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

持久使用：

npm config set registry http://registry.npm.taobao.org// 配置後可通過下面方式來驗證是否成功npm config get registry// 或npm info express

安裝webpack：

cnpm install webpack -g

安裝vue-cli腳手架構建工具：

cnpm install --global vue-cli

Vue項目

執行一下命令：

vue init webpack first_vue

命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的。first_vue是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中。

安裝項目所需的依賴(項目下會多出一個node_modules文件夾)：

cnpm install

安裝 vue 路由模塊vue-router和網路請求模塊vue-resource：

cnpm install vue-router vue-resource --save

運行測試項目：

npm run dev

打包項目(項目下會多出一個dist文件夾)：

npm run build

切換到dist目錄我們會發現有一個static文件夾和index.html文件，這時候我們可以直接訪問index.html頁面的，但是由於路徑問題可能會導致訪問不成功。

建議下載一個MyWebServer3621小型web伺服器進行測試：

作者：小柒2012

作者：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！