1. 程式人生 > 程式設計 >node建立Vue專案步驟詳解

node建立Vue專案步驟詳解

vue的安裝

Vue.js不支援IE8及以下版本。因為Vue.js使用了ECMAScript5特性,IE8顯然不能模擬。

Vue.js支援所有相容ECMAScript5的瀏覽器。

在用Vue.js構建大型應用時,推薦使用npm安裝,npm能很好的和webpack等打包工具配合使用。

首先Vue的安裝依賴於node.js,要保證你的計算機上已經安裝過node.js。

如何檢視node是否安裝或者node版本呢?
進入cmd,輸入命令 node -v,回車檢視。node最好使用新一些的版本,否則後續安裝會提示node版本過低

node建立Vue專案步驟詳解

如果是安裝過node,則會顯示node的版本,否則就會提示不是內部或外部命令,這時候需要自行去node官網下載

並安裝

1,安裝vue

npm install vue

安裝完畢後,可以檢驗版本。

vue -V

node建立Vue專案步驟詳解

到此vue安裝成功

建立一個vue專案

1,全域性安裝 vue-cli

npm install --global vue-cli

2,建立一個基於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”?這裡選擇包管理工具)

選項有三個

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

一路回車到此等待安裝完畢,會提示接下來的命令列

node建立Vue專案步驟詳解

3,安裝依賴

進入專案

cd new-project

安裝

npm install

4,啟動專案

npm run dev

這時候在瀏覽器中開啟cmd上顯示的地址就可以看到新建的頁面。

http://localhost:8081

但是這個只能在本地跑,要如何在我們自己的伺服器上訪問呢? 此時需要執行: ·

npm run build

到此這篇關於node建立Vue專案步驟詳解的文章就介紹到這了,更多相關node建立一個Vue專案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!