1. 程式人生 > >vue開發環境搭建步驟詳解

vue開發環境搭建步驟詳解

1.首先安裝node, npm環境(http://nodejs.cn/download/)

node.js安裝配置步驟(https://www.runoob.com/nodejs/nodejs-install-setup.html)

安裝完成之後可以查詢到你安裝的node版本和npm版本,你電腦的環境變數也多出PATH

 windows需要進行npm全域性環境變數配置(如果不進行npm全域性環境變數配置,你在其他盤下面下載npm包是會報錯的)

1.首先找到你安裝npm的路徑

然後複製標紅路徑,找到計算機的高階設定裡面的環境變數,找到後在系統變數下面新建一個變數

變數名:NODE_PATH  變數值:C:\Program Files\nodejs\node_modules(你安裝npm的路徑)點選確定就完成了。

 

2.npm淘寶映象(因為國外映象下載太慢,換成國內映象下載更快)

在命令列輸入命令npm config get registry 顯示的是https://registry.npm.taobao.org就是對的

如果顯示https://registry.npmjs.org設定命令npm config set registry https://registry.npm.taobao.org

3.環境配置完成後,我們用vue-cli腳手架來進行開發

在本地新建資料夾vue,然後通過命令找到本資料夾然後輸入命令npm install vue-cli -g

下載完成輸入vue --version 會出現你下載的vue-cli版本

初始化專案:輸入命令vue init webpack my-project(專案名稱)

● Project name:專案名稱,如果不需要更改直接回車就可以了。

● Project description:專案描述,預設為 A Vue.js project 直接回車,不用編寫。

● Author:作者,如果你有配置 git 的作者,它會讀取。

● Install vue-router?是否安裝vue的路由外掛,我們這裡需要安裝,選擇y

● Use ESLint to lint your code?是否用 ESLint 來限制你的程式碼錯誤和風格。我們這裡輸入n,如果是大型團隊開發,最好進行配置。

● setup unit tests ?是否需要安裝單元測試工具,我們這裡不需要,輸入n。

● Setup e2e tests with Nightwatch?是否安裝 e2e 來進行使用者行為模擬測試,我們這裡不需要,輸入n;

● Should we run ` npm install ` for you after the project has been created?是否在我們的專案建立後執行 npm install,它會有三個選項,我們選擇第一個執行選項,然後回車。

安裝完成後會出現提示,讓你進入專案目錄然後npm run dev執行專案,執行完成在瀏覽器搜尋欄裡輸入localhost:8080就會出現下面頁面,基本專案就搭建好了。

&n