天天看點

vue開發環境搭建步驟詳解

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

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

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

vue開發環境搭建步驟詳解
vue開發環境搭建步驟詳解

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

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

vue開發環境搭建步驟詳解

然後複制标紅路徑,找到計算機的進階設定裡面的環境變量,找到後在系統變量下面建立一個變量

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

vue開發環境搭建步驟詳解

2.npm淘寶鏡像(因為國外鏡像下載下傳太慢,換成國内鏡像下載下傳更快)

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

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

vue開發環境搭建步驟詳解

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

在本地建立檔案夾vue,然後通過指令找到本檔案夾然後輸入指令npm install vue-cli -g

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

vue開發環境搭建步驟詳解

初始化項目:輸入指令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就會出現下面頁面,基本項目就搭建好了。

vue開發環境搭建步驟詳解