Vue 基礎的開發環境

本期節目將手把手教你去 NPM 市場買最新鮮的食材，只爲搭配 小鮮肉 Vue 下廚。

既然它是當紅小鮮肉，我想有必要寫一篇文章來幫助你們配置好 Vue 的生產環境，我給它的整體評價是「簡單卻不失優雅，小巧而不乏大匠」，下面將圍繞這句話給你們介紹 Vue.js，但願可以激發你對 Vue.js的興趣。

若是你還不認識這位小鮮肉的話，請回看咱們對 Vue 的早期採訪 Vue.js 的設計思想。

然而，就當前熱門的前端框架（Vue.js、React.js、Angular.js）來看，Vue.js 無疑是學習曲線最爲平緩的。

Node.js

首先，請先安裝 Node.js（NPM）。

若是沒安裝，請點擊 node.js下載 下載並安裝。（沒帶錢去什麼市場）

在安裝好 Node.js 後咱們能夠在其安裝目錄下發現它已經集成了 NPM，能夠直接使用 NPM 命令。

在安裝好 Node.js 後打開控制檯，輸入如下 JS 代碼，測試一下。

node -v //查看 node 版本 node //啓用 node 環境 console.log('最污的博客')//最污的博客

效果圖以下:

因爲 npm 的鏡像服務器在國外，咱們能夠把它改爲淘寶的鏡像，這樣 git 到本地的速度快一些。

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

初始化項目

我在初始化的過程當中遇到了 Npm 版本太低而沒法成功安裝 Vue 模板的狀況，因此當你使用 Vue 模板須要 Npm 版本(3.0.0) 以上。

查看 npm 版本號：

npm -v // 2.9.5，低於要求就要更新了。

解決辦法:

npm -g install npm@3.0.0 //更新 Npm 版本至3.0.0

安裝 Vue 的腳手架

cnpm install -g vue-cli 

（上述命令爲全局）這個命令必須安裝在全局中，只須要運行一次就能夠了；安裝上以後，之後就不須要安裝了。

vue init webpack vue-demo 

上述命令爲新建一個 基於 webpack 的 vue-demo 模板，並在該文件夾下初始化了 Vue 模板。

在安裝過程當中會讓你初始化你項目的時候，輸入一些你項目的基本信息和配置項;下面給你們解釋一下：

• Project name :(你的項目名稱)
• Project description :(你的項目具體描述)
• Author:(做者郵箱)
• Vue build :(單個獨立項目)
• Install vue-router:(Vue路由組件)
• Use ESLint to lint you code:(語法檢查工具 ESLint)
• Pick an ESLint preset: (選擇 ESLint 預設好的配置)
• Setup unit tests with Karma + Mocha:(安裝單元測試工具 Karma + Mocha)
• Setup e2e tests with Nightwatch:(安裝 Nightwatch 設置 e2e 測試)

建議全都安裝，特別是測試模塊，正統的開發中，單元測試能夠快速定位出應用的某個模塊的問題，大大縮減你 Debug (調試)的時間。

如今的程序員，不多有去寫測試代碼，只要基本邏輯跑通之後，數據能正常加載，就以爲能行了，其實否則，在複雜的業務場景下，模塊會隨着業務需求而變得複雜，因此就顯得單元測試尤其重要，甚至在測試的過程當中，編寫的代碼每每要多於業務代碼。

此時你會發現，初始化好項目之後，控制檯會有很人性化的提示，把接下來你要敲擊的命令已經給你列舉出來了。

買菜、作飯

• 安裝依賴

cd vue-demo //cd 到你的項目底下 cnpm install //安裝依賴

項目開始初始化並安裝依賴，因爲模板中已經給咱們安裝好了 Vue-router （路由組件）。

效果圖以下:

這個過程可能會相對漫長一些。

• 添加 Vuex (狀態管理組件)

$ cnpm install vuex --save 

和 Redux,若是你不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。確實是如此——若是您的應用夠簡單，您最好不要使用 Vuex。

• 添加 element (餓了麼一款基於 VUE 的 UI)

$ cnpm i element-ui -S 

推薦使用更簡便的按需加載用法

import {Button,Select} from 'element-ui' 

驗證依賴包？

安裝了這麼多依賴模塊，咱們怎麼驗證是否安裝成功呢？

打開 package.json 文件，在 dependencies 地下就能夠查看你安裝了那些模塊。

上菜，品嚐

cnpm run dev // 啓動本地服務器，並打包文件輸出 

執行 npm run dev 後，上述命令表示咱們已經在本地成功的跑起一個 Vue 項目了，打開瀏覽器，輸入地址：http://localhost:8080/ 就能夠成功看到了咱們的例子了。

這樣咱們就配置好了 Vue + element UI 的生產環境 。

在2016年，不能使用 ES2015/ES2016 進行開發的前端技術棧，會是最早中止增加而且走下坡路的，而今已經是 2017 年。

Vue.js 從總體邏輯來說， 它要解決的是 MVVM 的 VM 部分， Vue 使用起來確實比 React 簡單方便多了。 代碼也清晰；同時借鑑了 angularjs 的 declarative 的特色； 另外文檔， 例子作的都作得很好，這些都是很好的優勢。