vue開發環境搭建及配置(windows)
一、安裝node.js
參考教程:https://www.runoob.com/nodejs/nodejs-install-setup.html
中文官網:https://nodejs.org/zh-cn/download/
歷史版本:https://nodejs.org/zh-cn/download/releases/
1、首先檢查一下電腦是否安裝node.js。點選 開始-搜尋cmd-回車,在命令列輸入node -v,回車,如果出現“'node' 不是內部或外部命令,也不是可執行的程式...”時說明沒有安裝node.js。
2、下載node.js。開啟 https://nodejs.org/zh-cn/download/,根據你的系統選擇相應版本下載。(推薦LTS:長期維護版)
注:如果您的系統是Windows Server 2008或者win7,則不能安裝太高版本的node.js,只能支援到v13版本,v14及以上都安裝不了。否則會出現以下提示。
經測試,Windows Server 2008或者win7 可以安裝v13.14.0。
3、安裝node.js。參考教程:https://www.runoob.com/nodejs/nodejs-install-setup.html 。雙擊下載好的安裝檔案進行安裝。其中選擇安裝路徑這一步預設為 "C:\Program Files\nodejs\" ,建議修改為非系統盤。其他按照教程一直點選下一步則可。
4、檢測PATH環境變數是否配置了Node.js,點選開始=》執行=》輸入"cmd" => 輸入命令"path",輸出如下結果:
可以看到環境變數中已經包含了C:\Program Files\nodejs\。由此得知,.msi格式的安裝包已經將node.js新增到系統環境變數path中,所以不需要我們再配置環境變量了。
5、檢查node是否安裝成功。在cmd裡執行node -v檢視node版本資訊或者驗證是否安裝成功:
由於新版的node.js已經集成了npm,所以安裝node的同時也安裝好了npm。可以在cmd裡執行npm -v檢視npm版本資訊:
出現以上內容/版本號資訊均代表安裝成功。注:node自帶npm但不是最新版本,需要命令更新:npm install -g npm 。
二、設定nodejs的全域性安裝路徑和快取路徑。
1、在nodejs安裝路徑下,新建node_global和node_cache兩個資料夾。此處node.js安裝路徑為:D:\Program Files\nodejs。
2、設定快取資料夾。在cmd命令下執行:
npm config set cache "D:\Program Files\nodejs\node_cache"
3、設定全域性模組存放路徑。在cmd命令下執行:
npm config set prefix "D:\Program Files\nodejs\node_global"
設定成功後,之後用命令npm install XXX -g安裝以後模組就在 D:\Program Files\nodejs\node_global 裡。
三、基於Node.js安裝cnpm(淘寶映象)。
npm install -g cnpm --registry=https://registry.npm.taobao.org
檢查是否安裝成功:輸入 cnpm -v 。
四、安裝vue命令列工具,即vue-cli 腳手架。
在cmd命令下執行:
npm install -g vue-cli
或者用cnpm:
cnpm install -g vue-cli
進行全域性安裝。使用淘寶映象安裝環境和依賴包會更快,推薦使用cnpm。
安裝完成之後輸入 vue -V(注意這裡是大寫的“V”),如下圖,如果出現相應的版本號,則說明安裝成功。
注:如果出現“'vue' 不是內部或外部命令,也不是可執行的程式或批處理檔案”的報錯,可以參考 https://blog.csdn.net/m0_48276047/article/details/113926266 解決。
五、建立vue專案。
1、首先在D盤下新建一個資料夾,命名為vue_project,作為要存放vue專案的目錄(此處我以C盤示範)。然後使用命令列cd進入到該存放目錄輸入:
vue init webpack vuedemo
vuedemo 就是你要建立的專案名稱,可自定義。命令執行之後,會在當前目錄生成一個以該名稱命名的專案資料夾。
選項說明:
Project name (vuedemo) 專案名稱,可直接回車,使用括號中預設名字(注意這裡的名字不能有大寫字母,如果有會報錯)
Project description (A Vue.js project) 專案描述,也可直接點選回車,使用預設描述
Author () 作者,輸入你的名字,確定則回車
Vue build (Use arrow keys) 構建模式,預設選擇第一種
> Runtime + Compiler: recommended for most users 執行時+編譯器:建議大多數使用者使用
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 min+gzip,但模板(或任何特定於Vue的HTML)只允許在.Vue檔案中使用-其他地方需要呈現函式
Install vue-router? (Y/n) 是否安裝引入vue-router 這是官方的路由,大多數情況下都使用 建議y
Use ESLint to lint your code? (Y/n) 是否使用ESlint語法,ESLint是個程式碼風格管理工具,是用來統一程式碼風格的,一般專案中都會使用,建議y
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設,編寫vue專案時的程式碼風格,直接選第一個回車
Set up unit tests (Y/n) 是否安裝單元測試 建議n
Setup e2e tests with Nightwatch? (Y/n) 是否和Nightwatch建立端到端的測試 建議n
Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) 是否在專案建立之後執行“npm install” 建議選擇第三個
Yes, use NPM 是的 用npm 建議預設
Yes, use Yarn 是的 用yarn 跟npm沒什麼大的區別
> No, I will handle that myself 不 我要自行安裝 (選擇此項之後 後續仍通過npm install 再次安裝)
.......回車之後 等待安裝
回答完選項後如上圖開始構建vue專案。
2、構建完成後,可以看到存放目錄下多出了一個專案資料夾vuedemo:
然後cd進入這個資料夾路徑下,執行 npm install 安裝依賴:
npm install :安裝所有的模組,如果是安裝具體的哪個模組,在install 後面輸入模組的名字即可。而只輸入install就會按照專案的根目錄下的package.json檔案中依賴的模組安裝(這個檔案裡面是不允許有任何註釋的),每個使用npm管理的專案都有這個檔案,是npm操作的入口檔案。因為是初始專案,還沒有任何模組,所以我用npm install 安裝所有的模組。安裝完成後,目錄中會多出來一個node_modules資料夾,這裡放的就是所有依賴的模組。
依賴安裝好後,vuedemo資料夾裡的目錄是這樣的:
3、cd進入vuedemo專案資料夾下,執行 npm run dev ,啟動專案。
4、在瀏覽器位址列輸入 http://localhost:8080,訪問這個vue專案,啟動成功後瀏覽器會預設開啟一個“歡迎頁面”:
至此,windows下vue開發環境搭建及配置,並建立一個vue專案完成。