vue.js開發環境怎麼搭建

vue.js開發環境的搭建：先安裝【vue.js】；然後分別安裝npm套件管理器、模組、webpack以及vue腳手架；最後開始初始化Vue環境以及安裝專案依賴，到這兒Vue開發環境就建置好了。

【推薦教學：#Vue.js教學##】

環境準備

Node.js Javascript的執行環境

npm Node.js下的套件管理工具

webpack 前端資源模組化管理與包裝工具

vue-cli 鷹架建置工具

cnpm npm的淘寶鏡像

Vue.js安裝

1. Node.js的安裝非常容易，先從官網下載你所需作業系統的版本，然後一直下一步就ok了。

安裝完成之後，在命令列敲出node -v，如果出現對應版本號，則表示安裝成功。

2. npm是隨同Node.js一起安裝的套件管理工具,直接在命令列敲出npm -v就可以查看是否安裝成功。

npm套件管理器雖然有了，但由於npm下載需要依賴套件的伺服器位址在國外，導致許多資源存取會很慢。所以我們可以安裝淘寶的國內鏡像。

3. 在命令列敲出 npm install -g cnpm --registry=http://registry.npm.taobao.org。
這樣就可以使用cnpm 指令來安裝模組了：

cnpm install [name]

4. 安裝webpack

cnpm install webpack -g

5. 安裝vue腳手架

npm install vue-cli -g

初始化一個Vue .js環境

在電腦上新建一個資料夾用來存放我們的程式碼。然後使用命令列進入這個資料夾cd 目錄路徑。

之後使用指令

vue init webpack name

來初始化一個vue環境，這個指令的意思是初始化一個項目，其中webpack是建構工具，也就是整個項目是基於webpack的。在安裝過程會有一些初始化的設置，我們可以採用預設配置，一路回車 。

從上圖的我們還可以看到vue很貼心的告訴了我們快速開始(To get started)的命令

安裝專案依賴

一定要從官方倉庫安裝，npm 伺服器在國外所以這一步安裝速度會很慢。

npm install

不要從國內鏡像cnpm安裝(會導致後面缺了很多依賴庫)

cnpm install

安裝vue 路由模組vue-router和網路請求模組vue-resource

cnpm install vue-router vue-resource --save

啟動專案

npm run dev

運行成功以後他會告訴你ip和連接埠號碼

訪問這個位址

如果出現上圖。恭喜你，已經可以開始Vue.js之旅了。

以上是vue.js開發環境怎麼搭建的詳細內容。更多資訊請關注PHP中文網其他相關文章！