一、安裝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專案完成，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458069.html
標籤：其他