node創(chuàng)建Vue項(xiàng)目步驟詳解

vue的安裝

Vue.js不支持IE8及以下版本。因?yàn)閂ue.js使用了ECMAScript5特性，IE8顯然不能模擬。

Vue.js支持所有兼容ECMAScript5的瀏覽器。

在用Vue.js構(gòu)建大型應(yīng)用時(shí)，推薦使用npm安裝，npm能很好的和webpack等打包工具配合使用。

首先Vue的安裝依賴于node.js，要保證你的計(jì)算機(jī)上已經(jīng)安裝過(guò)node.js。

如何查看node是否安裝或者node版本呢？
進(jìn)入cmd，輸入命令 node -v，回車查看。node最好使用新一些的版本，否則后續(xù)安裝會(huì)提示node版本過(guò)低

如果是安裝過(guò)node,則會(huì)顯示node的版本，否則就會(huì)提示不是內(nèi)部或外部命令，這時(shí)候需要自行去node官網(wǎng)下載 
并安裝

1，安裝vue

npm install vue

安裝完畢后，可以檢驗(yàn)版本。

vue -V

到此vue安裝成功

創(chuàng)建一個(gè)vue項(xiàng)目

1，全局安裝 vue-cli

npm install --global vue-cli

2 , 創(chuàng)建一個(gè)基于webpack 模板的新項(xiàng)目

vue init webpack new-project

輸入上面命令后，會(huì)詢問(wèn)幾個(gè)選項(xiàng)，根據(jù)自己需要填寫就可以了。

Project name :項(xiàng)目名稱，如果不需要就直接回車。注：此處項(xiàng)目名不能使用大寫。

Project description:項(xiàng)目描述，直接回車

Author ：作者

vue build 構(gòu)建方式（暫且這么解釋）

兩個(gè)選擇（上下箭頭選擇，回車即為選定）

1.Runtime + Compiler:recommended for most users

(譯：運(yùn)行+編譯：被推薦給大多數(shù)用戶)

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

(譯：只運(yùn)行大約6KB比較輕量的壓縮文件，但只允許模板（或任何VUE特定HTML）。VUE文件需要在其他地方呈現(xiàn)函數(shù)。翻譯不精準(zhǔn)，意思大概是選擇該構(gòu)建方式對(duì)文件大小有要求)

這里推薦使用1選項(xiàng)，適合大多數(shù)用戶的

install vue-router？是否安裝vue的路由插件，需要就選y，否則就n（以下均遵循此方法）

Use ESLint to lint your code?是否使用ESLint檢測(cè)你的代碼？

（ESLint 是一個(gè)語(yǔ)法規(guī)則和代碼風(fēng)格的檢查工具，可以用來(lái)保證寫出語(yǔ)法正確、風(fēng)格統(tǒng)一的代碼。）

Pick an ESLint preset:選擇分支風(fēng)格

選項(xiàng)有三個(gè)

1. standard(https://github.com/feross/standard) js的標(biāo)準(zhǔn)風(fēng)格
2. Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，這個(gè)github地址說(shuō)是JavaScript最合理的方法
3. none (configure it yourself) 自己配置
   

Setup unit tests? 是否安裝單元測(cè)試（暫不詳細(xì)介紹）

Pick a test runner 選擇一個(gè)單元測(cè)試運(yùn)行器

選項(xiàng)有三個(gè)

1. Jest（Jest是由Facebook發(fā)布的開源的、基于Jasmine的JavaScript單元測(cè)試框架）
2. Karma and Mocha
3. none

Setup e2e tests with Nightwatch(Y/n)?是否安裝E2E測(cè)試框架NightWatch（E2E，也就是End To End，就是所謂的“用戶真實(shí)場(chǎng)景”。）

Should we run 'npm install' for you after the project has been created?(譯：項(xiàng)目創(chuàng)建后是否要為你運(yùn)行“npm install”?這里選擇包管理工具)

選項(xiàng)有三個(gè)

1. yes,use npm(使用npm)
2. yes,use yarn(使用yarn)
3. no,I will handle that myself(自己操作)
   

一路回車到此等待安裝完畢，會(huì)提示接下來(lái)的命令行

 3，安裝依賴

進(jìn)入項(xiàng)目

cd new-project

安裝

npm install

4,啟動(dòng)項(xiàng)目

npm run dev

這時(shí)候在瀏覽器中打開cmd上顯示的地址就可以看到新建的頁(yè)面。

http://localhost:8081

但是這個(gè)只能在本地跑，要如何在我們自己的服務(wù)器上訪問(wèn)呢？ 此時(shí)需要執(zhí)行： ·

npm run build

到此這篇關(guān)于node創(chuàng)建Vue項(xiàng)目步驟詳解的文章就介紹到這了,更多相關(guān)node創(chuàng)建一個(gè)Vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云！