vue-cli安裝使用步奏詳解

這次帶給大家vue-cli安裝使用步奏詳解，vue-cli安裝使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

安裝vue-cli的前提是你已經安裝了npm，安裝npm你可以直接下載node的安裝套件來安裝。你可以在命令列工具裡輸入npm -v 偵測你是否安裝了npm和版本狀況。出現版本號碼表示你已經安裝了npm和node，如果該指令不可用，需要安裝node軟體包，根據你的系統版本選擇下載安裝就可以了。

一、安裝vue-cli

在命令列工具輸入：

npm install vue-cli -g

-g:代表全域安裝。用vue -V 來檢查你安裝版本號（-V，是大寫的）

二、初始化項目

##我們用vue init 指令來初始化專案：

vue init <template-name> <project-name>

：表示模板名稱，vue-cli官方為我們提供了5種模板，

# webpack,webpack-simple,browserify,browserify-simple,simple

:標識專案名稱，這個你可以根據自己的專案來取名字。在實際開發過程中，我們通常會使用webpack這個模板。

vue init webpack vueclitest

輸入指令後，會詢問我們幾個簡單的選項，我們依照自己的需求填寫就可以了。 Project name:專案名稱。注意：這裡不能使用大寫。

Project description:專案描述。

Author：作者，如果你有設定git的作者，它會讀取。

Install vue-router?

: 是否安裝vue的路由外掛程式。 yes

Use ESLint to your code?

:是否用ESLint來限制你的程式碼錯誤和風格。自己練習不用了。如果是大型團隊開發，最好進行設定。

setup unit tests with Karma Mocha?是否需要安裝

單元測試

工具。我們不需要。 N

Setup e2e tests with Nightwatch?

是否安裝e2e來進行使用者行為模擬測試，我自己練習不需要。輸入n

這樣我們已經初始化了第一步。

cd vueclitest

進入我們的vue專案目錄。
npm install

安裝我們的專案依賴，也就是安裝package.json 裡的套件（也可以用cnpm來安裝）

npm run dev
開發模式下運行我們的程式。給我們自動建立了開發用的伺服器壞境和在瀏覽器中打開，並即時監視我們的程式碼變更。

###相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########如何對vue傳參與router使用###############如何使用PHP實作微信小程式人臉識別刷臉登入#########

以上是vue-cli安裝使用步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！