---

自己親自實踐：

mac安裝webpack

webpack 簡介Webpack 是一個非常流行的前端構(gòu)建工具，它可以將多個模塊（包括CSS、JavaScript、圖片等）打包成一個或多個靜態(tài)資源文件（bundle），以便用于部署到生產(chǎn)環(huán)境。Webpack 支持自定義配置，可以實現(xiàn)各種復(fù)雜的前端項目構(gòu)建需求。Webpack 主要功能包括：模塊加載、代碼拆分、文件處理、自動刷新、性能優(yōu)化等等。在使用 Vue.js 或 React 等流行的前端框架時，通常會使用 Webpack 對應(yīng)的插件或腳手架進行項目構(gòu)建，以便更好地管理項目依賴和資源。原文鏈接：https://blog.csdn.net/Morris_/article/details/131180475

前提：已經(jīng)安裝node.js，可以參考

https://blog.csdn.net/ZHOU_VIP/article/details/128807814?spm=1001.2014.3001.5501

webpack 安裝

首先確認一下是否已經(jīng)安裝：

webpack -v

如果提示?command not found: webpack，則表示未安裝。

在Mac OS上安裝webpack，需要先安裝Node.js和npm。建議使用nvm（Node Version

Manager）來管理Node.js的版本，在安裝完成后再進行下面的安裝步驟。?

1.安裝 webpack

sudo npm install webpack -g --unsafe-perm=true --allow-root

MacOS 使用?npm install -g webpack?會報權(quán)限問題，需要使用 sudo npm install 命令來安

裝

驗證安裝結(jié)果：webpack -v

這時候會提示安裝webpack-cli

安裝webpack-cli

sudo npm install webpack-cli -g --unsafe-perm=true --allow-root

我這里回復(fù)yes，即可自動安裝

還是使用了命令：sudo npm install webpack-cli -g --unsafe-perm=true --allow-root

驗證安裝結(jié)果：webpack -v

參考：Vue學(xué)習(xí) 之 MacOS 安裝 webpack_mac安裝webpack_Morris_的博客-CSDN博客?

手把手帶你安裝webpack --mac電腦哦~_Kris老夢的博客-CSDN博客

測試：

本地磁盤中新建一個vue-demo文件夾

應(yīng)該是沒安裝vue-cli?

Vue學(xué)習(xí) 之 MacOS 安裝 vue-cli_mac vue 安裝_Morris_的博客-CSDN博客

安裝命令：sudo npm install -g vue-cli

安裝完成后可以通過以下命令驗證是否安裝成功：vue -V

如果正確顯示版本號，則說明安裝成功

重新初始化vue項目：

可以看到聯(lián)網(wǎng)下載

幾分鐘過去了，還是沒有下下來啊

vue新建項目一直在downloading template轉(zhuǎn)，最后超時_mob604756ee87ff的技術(shù)博客_51CTO博客

哈哈，竟然好了?

把項目運行起來：npm run dev

瀏覽器訪問：

腳手架搭建完成，接下來用vscode打開，跑起來?

自己寫個組件測試：

瀏覽器訪問：http://localhost:8082/#/hello