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


自己亲自实践:

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,则表示未安装。

在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 命令来安

验证安装结果:webpack -v

这时候会提示安装webpack-cli

安装webpack-cli

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

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

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

验证安装结果:webpack -v

参考:Vue学习 之 MacOS 安装 webpack_mac安装webpack_Morris_的博客-CSDN博客 

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

测试:

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

应该是没安装vue-cli 

Vue学习 之 MacOS 安装 vue-cli_mac vue 安装_Morris_的博客-CSDN博客

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

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

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

重新初始化vue项目:

可以看到联网下载

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

vue新建项目一直在downloading template转,最后超时_mob604756ee87ff的技术博客_51CTO博客

哈哈,竟然好了 

把项目运行起来:npm run dev

浏览器访问:

脚手架搭建完成,接下来用vscode打开,跑起来 

自己写个组件测试:

浏览器访问:http://localhost:8082/#/hello

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/79971.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

测试人进阶技能:单元测试报告应用指南

为什么需要单元测试 从产品角度而言,常规的功能测试、系统测试都是站在产品局部或全局功能进行测试,能够很好地与用户的需要相结合,但是缺乏了对产品研发细节(特别是代码细节的理解)。 从测试人员角度而言&#xff0…

无涯教程-TensorFlow - TensorBoard可视化

TensorFlow包含一个可视化工具,称为TensorBoard,它用于分析数据流图,还用于了解机器学习模型。 TensorBoard的重要功能包括查看有关垂直对齐的任何图形的参数和详细信息的不同类型统计的视图。 深度神经网络包括多达36,000个节点…

Java实现CAS的原理

文章目录 1、 什么是CAS2、CAS的原理3、CAS的应用场景4、Java中的CAS实现5、使用AtomicInteger实现线程安全的计数器6、CAS实现原子操作的三大问题6.1、ABA问题6.2、循环时间长6.3、只能保证一个共享变量的原子性 7、总结 1、 什么是CAS CAS(Compare and Swap&…

读书笔记-《ON JAVA 中文版》-摘要22[第二十章 泛型-1]

文章目录 第二十章 泛型1. 简单泛型1.1 简单泛型1.2 一个元组类库 2. 泛型接口3. 泛型方法3.1 泛型方法3.2 变长参数和泛型方法 4. 构建复杂模型 第二十章 泛型 普通的类和方法只能使用特定的类型:基本数据类型或类类型。如果编写的代码需要应用于多种类型&#xff…

5G+AI数字化智能工厂建设解决方案PPT

导读:原文《5GAI数字化智能工厂建设解决方案》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。数字化智能工厂定义 智能基础架构协同框架 - 端、边、云、网…

ARM 作业1

一、思维导图 二、 1. 2. .text 文本段 .globl _start 声明_start:mov r0,#0mov r1,#0fun:cmp r1,#100bhi stopadd r0,r0,r1add r1,r1,#1b fun stop:b stop .end

【3Ds Max】车削命令的简单使用(以制作花瓶为例)

简介 在3ds Max中,"车削"(Lathe)是一种建模命令,用于创建围绕轴线旋转的几何形状。通过车削命令,您可以将一个闭合的平面或曲线几何形状旋转,从而生成一个立体对象。这种方法常用于创建圆柱体、…

原生微信小程序自定义picker多列选择器:picker写法用法

前言: 最近用原生微信小程序写法写医疗相关项目微信小程序,在编辑个人资料的时候,需要很多选择器,比如城市地区选择器,职业职称选择器,科室选择器,学校选择器,学历选择器,年份日期选…

YOLOv5改进系列(21)——替换主干网络之RepViT(清华 ICCV 2023|最新开源移动端ViT)

【YOLOv5改进系列】前期回顾: YOLOv5改进系列(0)——重要性能指标与训练结果评价及分析 YOLOv5改进系列(1)——添加SE注意力机制 YOLOv5改进系列(2

基于YOLOv8模型的五类动物目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要:基于YOLOv8模型的五类动物目标检测系统可用于日常生活中检测与定位动物目标(狼、鹿、猪、兔和浣熊),利用深度学习算法可实现图片、视频、摄像头等方式的目标检测,另外本系统还支持图片、视频等格式的结果可视化与…

如何区分闰年与平年

首先要明白 地球绕太阳运行周期为365天5小时48分46秒(合365.24219天),即一回归年(tropical year)。公历的平年只有365日,比回归年短约0.2422 日,每四年累积约一天,把这一天加于2月末…

CentOS7源码安装MySQL详细教程

😊 作者: Eric 💖 主页: https://blog.csdn.net/weixin_47316183?typeblog 🎉 主题:CentOS7源码安装MySQL详细教程 ⏱️ 创作时间: 2023年08月014日 文章目录 1、安装的四种方式2、源码安装…

机器学习基础之《分类算法(3)—模型选择与调优》

作用是如何选择出最好的K值 一、什么是交叉验证(cross validation) 1、定义 交叉验证:将拿到的训练数据,分为训练和验证集。以下图为例:将数据分成5份,其中一份作为验证集。然后经过5次(组)的测试&#x…

nginx php-fpm安装配置

nginx php-fpm安装配置 nginx本身不能处理PHP,它只是个web服务器,当接收到请求后,如果是php请求,则发给php解释器处理,并把结果返回给客户端。 nginx一般是把请求发fastcgi管理进程处理,fascgi管理进程选…

musl libc ldso 动态加载研究笔记:02

前言 本篇继续研究 musl libc ldso 的动态加载过程中遇到的关键性的概念:到底要加载ELF 文件的哪些内容到 内存 当前如果遇到 ELF 动态加载,当前系统需要有【文件系统】,并且有较大的内存,因为 ELF 文件是无法直接运行的&#xf…

【解析postman工具的使用---基础篇】

postman前端请求详解 主界面1.常见类型的接口请求1.1 查询参数的接口请求1.1.1 什么是查询参数?1.1.2 postman如何请求 1.2 ❤表单类型的接口请求1.2.1 复习下http请求1.2.2❤ 什么是表单 1.3 上传文件的表单请求1.4❤ json类型的接口请求 2. 响应接口数据分析2.1 postman的响…

Qt应用开发(基础篇)——MDI窗口 QMdiArea QMdiSubWindow

一、前言 QMdiArea类继承于QAbstractScrollArea,QAbstractScrollArea继承于QFrame,是Qt用来显示MDI窗口的部件。 滚屏区域基类 QAbstractScrollAreahttps://blog.csdn.net/u014491932/article/details/132245486 框架类 QFramehttps://blog.csdn.net/u01…

【Alibaba中间件技术系列】「RocketMQ技术专题」让我们一起探索一下DefaultMQPushConsumer的实现原理及源码分析

RocketMQ开源是使用文件作为持久化工具,阿里内部未开源的性能会更高,使用oceanBase作为持久化工具。 在RocketMQ1.x和2.x使用zookeeper管理集群,3.x开始使用nameserver代替zk,更轻量级,此外RocketMQ的客户端拥有两种的…

公网远程连接Redis数据库「内网穿透」

文章目录 1. Linux(centos8)安装redis数据库2. 配置redis数据库3. 内网穿透3.1 安装cpolar内网穿透3.2 创建隧道映射本地端口 4. 配置固定TCP端口地址4.1 保留一个固定tcp地址4.2 配置固定TCP地址4.3 使用固定的tcp地址连接 前言 洁洁的个人主页 我就问你有没有发挥&#xff0…

GuLi商城-前端基础Vue-生命周期和钩子函数

下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它 的参考价值会越来越高。 VUE 的生命周期指的是组件在创建、运行和销毁过程中所经历的一系列事件,通过这些事件可以 让开发者在不同阶段进行相应的…