GuLi商城-前端基础Vue-使用Vue脚手架进行模块化开发

系统管理员 2024-03-24 18:32 103阅读 0赞

![3040e4299c6b4b04ae14affc53295d1f.png][]

![612c1432ddd54817892720504d8d326d.png][]![dd71d9516fda4579b0c0f6c7cee3a99d.png][]

![3b58917d1f164974b3c611a0b1aad0f6.png][]

--------------------

自己亲自实践：

mac安装webpack

webpack 简介
    
    Webpack 是一个非常流行的前端构建工具，它可以将多个模块（包括CSS、JavaScript、图片等）打包成一个或多个静态资源文件（bundle），以便用于部署到生产环境。Webpack 支持自定义配置，可以实现各种复杂的前端项目构建需求。
    
    Webpack 主要功能包括：模块加载、代码拆分、文件处理、自动刷新、性能优化等等。
    
    在使用 Vue.js 或 React 等流行的前端框架时，通常会使用 Webpack 对应的插件或脚手架进行项目构建，以便更好地管理项目依赖和资源。
    
    
    原文链接：https://blog.csdn.net/Morris_/article/details/131180475

前提：已经安装node.js，可以参考

https://blog.csdn.net/ZHOU\_VIP/article/details/128807814?spm=1001.2014.3001.5501

webpack 安装

首先确认一下是否已经安装：

webpack -v

如果提示 `command not found: webpack`，则表示未安装。

![858db3ec889f410bbf3335b5f4f7c049.png][]

在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` 会报权限问题，需要使用 sudo npm install 命令来安

装

![01f7828faf364b43bbc3b0c471519231.png][]

![75f049050a984b6f96c86262f1622129.png][]

验证安装结果：webpack -v

这时候会提示安装webpack-cli

![03ee8a6650b04310bfe6eb4457de37a8.png][]

安装webpack-cli

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

我这里回复yes，即可自动安装

![76e47fc8748c498aa155b999294b1264.png][]

![b7490435e45a4b65965c84d75e13c587.png][]还是使用了命令：sudo npm install webpack-cli -g --unsafe-perm=true --allow-root

![3bfd8bb216914742a92ad9679b590653.png][]

验证安装结果：webpack -v

![8cc84d1baf304d52ba8b5693f7425801.png][]

参考：[Vue学习 之 MacOS 安装 webpack\_mac安装webpack\_Morris\_的博客-CSDN博客][Vue_ _ MacOS _ webpack_mac_webpack_Morris_-CSDN]

[手把手带你安装webpack --mac电脑哦~\_Kris老梦的博客-CSDN博客][webpack --mac_Kris_-CSDN]

测试：

本地磁盘中新建一个vue-demo文件夹

![410b75a678a9470d91d0fce2d0ef883b.png][]

![10e4e3892cc54d4f92be2ce6c1f3abb4.png][]

应该是没安装vue-cli

[Vue学习 之 MacOS 安装 vue-cli\_mac vue 安装\_Morris\_的博客-CSDN博客][Vue_ _ MacOS _ vue-cli_mac vue _Morris_-CSDN]

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

![f5ccb16dc7d549389df064e411eb7ea4.png][]

安装完成后可以通过以下命令验证是否安装成功：vue -V

如果正确显示版本号，则说明安装成功

![e0c8f673595a4dd18c10ef6617887a5e.png][]重新初始化vue项目：

可以看到联网下载

![1ca5f80a049f46ab90f69530a4c232b3.png][]

几分钟过去了，还是没有下下来啊

[vue新建项目一直在downloading template转，最后超时\_mob604756ee87ff的技术博客\_51CTO博客][vue_downloading template_mob604756ee87ff_51CTO]

哈哈，竟然好了

![709b8c0dd5f24694ac936dc3b714e805.png][]

![29d8abf2d8c34ab49f57afb4808495ef.png][]

![d52304b992474940a60159c7472027e5.png][]

![c3e51419000e4ca68a138581c56923c7.png][]

![a6f15e7d0e684fbc817a71f8cbb1c42a.png][]

![267e7280bf2b4b3fb7d2a2f01821bb7e.png][]

把项目运行起来：npm run dev

![cc4a1dc27e174a839c773043ba577702.png][]

浏览器访问：

![66815473bda54a95aec7f760e4375e60.png][]脚手架搭建完成，接下来用vscode打开，跑起来

![d2f55e70a32643d5a6a30ec91ec689b8.png][]![06ded4b105894cdd9178c41fe1c23415.png][]

自己写个组件测试：

![6614e06cf6e6496e92f7099b5c2bc137.png][]

浏览器访问：[http://localhost:8082/\#/hello][http_localhost_8082_hello]

![ff45a0b56be247d4ae5996a9f52a14f8.png][]

[3040e4299c6b4b04ae14affc53295d1f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/2c4b1df78cc949ccaab78585cc5d923a.png
[612c1432ddd54817892720504d8d326d.png]: https://img-blog.csdnimg.cn/612c1432ddd54817892720504d8d326d.png
[dd71d9516fda4579b0c0f6c7cee3a99d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/488d7f82a8924cefb872c5831f0268f5.png
[3b58917d1f164974b3c611a0b1aad0f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/37d751c22e65402080afeb57899fbd3d.png
[858db3ec889f410bbf3335b5f4f7c049.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/2aa6626673e343bfbfdede57292d1848.png
[01f7828faf364b43bbc3b0c471519231.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/79b7288d9db04777b3ec6d55725affe6.png
[75f049050a984b6f96c86262f1622129.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1aae95bfd5fb45b1bf5fd0703b7e864e.png
[03ee8a6650b04310bfe6eb4457de37a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/c9519b3c2d594954a4010361e87ac193.png
[76e47fc8748c498aa155b999294b1264.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/b213ab6cbe0a4af8ae6317efc12ce6cd.png
[b7490435e45a4b65965c84d75e13c587.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/be244154d1d542578de78537e76e05f3.png
[3bfd8bb216914742a92ad9679b590653.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/ad88709e0da04effb94efb68639d69c8.png
[8cc84d1baf304d52ba8b5693f7425801.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/303b5a679ecf47deb052e8549081abda.png
[Vue_ _ MacOS _ webpack_mac_webpack_Morris_-CSDN]: https://blog.csdn.net/Morris_/article/details/131180475
[webpack --mac_Kris_-CSDN]: https://blog.csdn.net/github_40020301/article/details/80857223?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-80857223-blog-131180475.235%5Ev38%5Epc_relevant_anti_vip_base&spm=1001.2101.3001.4242.1&utm_relevant_index=3
[410b75a678a9470d91d0fce2d0ef883b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/39e89afc27324a6e85f75344b96b4a79.png
[10e4e3892cc54d4f92be2ce6c1f3abb4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/33455eb939cf4dc0800995a3ea8ade35.png
[Vue_ _ MacOS _ vue-cli_mac vue _Morris_-CSDN]: https://blog.csdn.net/Morris_/article/details/131180455
[f5ccb16dc7d549389df064e411eb7ea4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/097c4548db4b40668a32eccac91b1f1c.png
[e0c8f673595a4dd18c10ef6617887a5e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/c0130b9c03264714a40c4f7504a8dd29.png
[1ca5f80a049f46ab90f69530a4c232b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/ded6f98077c64ccca74af78cc8e7eadb.png
[vue_downloading template_mob604756ee87ff_51CTO]: https://blog.51cto.com/u_15127553/4373842
[709b8c0dd5f24694ac936dc3b714e805.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/6385c88cd0c94c5a8219ec1bfb282eb8.png
[29d8abf2d8c34ab49f57afb4808495ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/5ef41fbc1fcb4c2fa9e98ab0e184addc.png
[d52304b992474940a60159c7472027e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/5bd1d0a84840433fb5219e5be8f4a1d4.png
[c3e51419000e4ca68a138581c56923c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/8ee3dc5a83b34d8eb9268eae51f31809.png
[a6f15e7d0e684fbc817a71f8cbb1c42a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/9fd48333ac034dcebe6c7f4e70f655a5.png
[267e7280bf2b4b3fb7d2a2f01821bb7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1b51124d4ba740208fba9207069df133.png
[cc4a1dc27e174a839c773043ba577702.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/912b7eda9c02469aba9a7c8400cef056.png
[66815473bda54a95aec7f760e4375e60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/5716cf69f673440b940140161f9e30ab.png
[d2f55e70a32643d5a6a30ec91ec689b8.png]: https://img-blog.csdnimg.cn/d2f55e70a32643d5a6a30ec91ec689b8.png
[06ded4b105894cdd9178c41fe1c23415.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/67e4a4436aab4784adb4602c9cc09d04.png
[6614e06cf6e6496e92f7099b5c2bc137.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/c53ffd1febd84540ae922bc05a426fec.png
[http_localhost_8082_hello]: http://localhost:8082/#/hello
[ff45a0b56be247d4ae5996a9f52a14f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1e9336a037264042b7c9e284865d8113.png