用Vue建立一個新的項目

• vue的安裝

Vue.js不支持IE8及如下版本。由於Vue.js使用了ECMAScript5特性，IE8顯然不能模擬。
Vue.js支持全部兼容ECMAScript5的瀏覽器。

在用Vue.js構建大型應用時，推薦使用npm安裝，npm能很好的和webpack等打包工具配合使用。若是使用npm過程當中安裝速度過慢，能夠考慮使用淘寶鏡像的cnpm來代替npm。下文中僅使用npm來安裝。

首先Vue的安裝依賴於node.js，要保證你的計算機上已經安裝過node.js。
如何查看node是否安裝或者node版本呢？
進入cmd，輸入命令 node -v，回車查看。node最好使用新一些的版本，不然後續安裝會提示node版本太低。

若是是安裝過node,則會顯示node的版本，不然就會提示不是內部或外部命令，這時候須要自行去node官網下載
並安裝（百度node安裝）。

npm install vue

安裝完畢後，能夠檢驗版本。

vue -V

到此vue安裝成功

• 建立一個vue項目

這裏使用vue官網的命令行工具。Vue.js提供一個官方命令行工具，能夠用於快速搭建大型單頁應用。該工具提供的構建工具配置，能夠直接使用，只須要一分鐘便可以啓動帶熱重載，保存時靜態檢查以及可用於生產環境的構建配置的項目。

# 全局安裝 vue-cli
npm install --global vue-cli
# 建立一個基於webpack 模板的新項目
vue init webpack new-project

輸入上面命令後，會詢問幾個選項，根據本身須要填寫就能夠了。

Project name :項目名稱，若是不須要就直接回車。注：此處項目名不能使用大寫。
Project description:項目描述，直接回車
Author ：做者
vue build 構建方式（暫且這麼解釋）
兩個選擇（上下箭頭選擇，回車即爲選定）
1.Runtime + Compiler:recommended for most users
(譯：運行+編譯：被推薦給大多數用戶)
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files-render functions are required elsewhere
(譯：只運行大約6KB比較輕量的壓縮文件，但只容許模板（或任何VUE特定HTML）。VUE文件須要在其餘地方呈現函數。翻譯不精準，意思大概是選擇該構建方式對文件大小有要求)
這裏推薦使用1選項，適合大多數用戶的
install vue-router？是否安裝vue的路由插件，須要就選y，不然就n（如下均遵循此方法）
Use ESLint to lint your code?是否使用ESLint檢測你的代碼？
（ESLint 是一個語法規則和代碼風格的檢查工具，能夠用來保證寫出語法正確、風格統一的代碼。）
Pick an ESLint preset:選擇分支風格
選項有三個
1.standard(https://github.com/feross/standard) js的標準風格
2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，這個github地址說是JavaScript最合理的方法
3.none (configure it yourself) 本身配置
Setup unit tests? 是否安裝單元測試（暫不詳細介紹）
Pick a test runner 選擇一個單元測試運行器
選項有三個
1.Jest（Jest是由Facebook發佈的開源的、基於Jasmine的JavaScript單元測試框架）
2.Karma and Mocha
3.none
Setup e2e tests with Nightwatch(Y/n)?是否安裝E2E測試框架NightWatch（E2E，也就是End To End，就是所謂的「用戶真實場景」。）
Should we run 'npm install' for you after the project has been created?(譯：項目建立後是否要爲你運行「npm install」?這裏選擇包管理工具)
選項有三個
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(本身操做)
一路回車到此等待安裝完畢，會提示接下來的命令行

# 安裝依賴
cd new-project
npm install
#啓動項目
npm run dev

這時候在瀏覽器中打開cmd上顯示的地址就能夠看到新建的頁面。
http://localhost:8081

 

這時，能夠到對應的文件夾下面看到文件的結構了。

 

 

可是這個只能在本地跑，要如何在咱們本身的服務器上訪問呢？ 此時須要執行： ·

npm run build

會生成靜態文件，在根目錄的dist裏，裏面有個index.html，這是服務器訪問的路徑指定到這裏就能夠訪問咱們本身的項目了。