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項目完成。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM