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

news2025/1/23 4:45:31


自己亲自实践:

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

关于VScode插件,你不得不知道的几件事

一、前言 VSCode是微软家一个非常轻量化的编辑器,体量虽轻,但是却有异常强大的功能。原因在于VSCode许多强大功能都是基于插件实现的,IDE只提供一个最基本的框架和基本功能,我们需要使用插件来丰富和扩展它的功能。 由于插件的重…

arm安装docker与docker-copose

一、银河麒麟Arm64安装docker 1、docker 安装包地址: https://download.docker.com/linux/static/stable 2、解压,然后将docker目录下文件拷贝到/usr/bin里 tar -xf docker-18.09.3.tgz mv docker/* /usr/bin/ 3、准备 docker.service系统配置文件 &…

VMware虚拟机安装Linux教程(超详细,一篇就够)

一、安装 VMware 官方正版VMware下载(16 pro):阿里云盘分享 下载Linux系统镜像(阿里云盘不限速):阿里云盘分享(系统镜像下载后,把后缀改成iso即可正常使用) 安装&#…

Spring中JavaBean的生命周期及模式

( 本篇文章大部分讲述了是底层知识,理念及原理 ) ( 如果只想了解,看我标记的重点即可,如果想明白其中原理,请耐心看完,对你大有受益 ) 目录 一、简介 ( 1 ) 是什么 ( 2 ) 背景概述 ( 3 ) 作用 二、生命周期 2.1 …

借助 AI 工具,真的能成为 10x 工程师?

或许你听说过 10x 工程师吗? 如果你问猎头公司 10x 工程师是什么意思,他们可能会说 “生产力”!10x 是指完成任务比别人快 10 倍的工程师。 2019 年,Twitter 上就曾经对 10 x 工程师这一议题有过一次空前热烈的讨论,引…

自动气象站的监测原理、设备优势及应用领域

自动气象站,是一种能够在无人值守的情况下,实现自主采集各种气象数据,并将数据上传至环境监控平台,进行数据分析的智能设备。安装自动气象站,可以提升对当地气象数据掌握的准确性,及时对环境数据做出预判&a…

redis事务管理

目录 一、redis事务定义 二、事务控制命令——Multi、Exec、discard 三、事务的错误处理 四、事务的冲突问题 悲观锁 乐观锁 WATCH unwatch 五、事务特性 单独的隔离操作 没有隔离级别的概念 不保证原子性 一、redis事务定义 Redis 事务是一个单独的隔离操作&…

链表之第二回

欢迎来到我的:世界 该文章收入栏目:链表 希望作者的文章对你有所帮助,有不足的地方还请指正,大家一起学习交流 ! 目录 前言第一题:反转一个链表第二题:链表内指定区间反转第三题:判断一个链表…

CMake+VS2017编译OSGEarth(无需编译OSG)

本文写作于2023年8月18日,按以下步骤编译了再次,都可正常运行。 无需编译OSG,直接编译OSGEarth。 工具版本:CMake 3.27.3, VS2017(安装C开发组件) 一.下载OSG开发包 一般教程都会教怎么编译O…

【业务功能篇70】可重入锁与不可重入锁

介绍 本篇介绍的是可重入锁和不可重入锁。可指的是可以,不可指的是不可以。重入指的是重复进入同步作用域。这里的同步作用域可以是同步代码块,也可以是同步方法或者是lock锁同步代码,无论是进入哪一个同步作用域,都意味着同步锁被…

解锁数据潜力:信息抽取、数据增强与UIE的完美融合

解锁数据潜力:信息抽取、数据增强与UIE的完美融合 1.信息抽取(Information Extraction) 1.1 IE简介 信息抽取是 NLP 任务中非常常见的一种任务,其目的在于从一段自然文本中提取出我们想要的关键信息结构。 举例来讲&#xff0…

大数据及软件教学与实验专业实训室建设方案

一 、系统概述 大数据及软件教学与实验大数据及软件教学与实验在现代教育中扮演重要角色,这方面的教学内容涵盖了大数据处理、数据分析、数据可视化和大数据应用等多个方面。以下是大数据及软件教学与实验的一般内容:1. 数据基础知识:教授学生…

5、flink任务中可以使用哪些转换算子(Transformation)

1、什么是Flink中的转换算子 在使用 Flink DataStream API 开发流式计算任务时,可以将一个或多个 DataStream 转换成新的 DataStream,在应用程序中可以将多个数据转换算子合并成一个复杂的数据流拓扑图。 2、常用的转换算子 Flink提供了功能各异的转换算…

尚硅谷大数据项目《在线教育之离线数仓》笔记002

视频地址:尚硅谷大数据项目《在线教育之离线数仓》_哔哩哔哩_bilibili 目录 P025 P026 P027 P028 P029 P030 P031 P032 P033 P034 P035 P036 P037 P038 P025 在Hive所在节点部署Spark P026 3)Hive on Spark测试 (1)…

kali linux查看局域网下所有IP,并对指定IP攻击

kali linux查看局域网下所有IP,并对指定IP实施局域网内攻击 首先我们打开我们熟悉的kali linux操作系统,利用指令: ifconfig来确认本机的ip地址 确认了本机的ip地址之后,利用一下的指令查看局域网下所有ip: fping -g 本机IP地址…

SpringMVC-1-解密Spring MVC:构建优雅、灵活的Web应用的秘诀

今日目标 能够编写SpringMVC入门案例 了解SpringMVC原理 1. SpringMVC介绍 1.1 SpringMVC概述 思考:SpringMVC框架有什么优点? SpringMVC是一种基于Java实现MVC模型的轻量级Web框架 优点 使用简单,开发便捷(相比于Servlet) 天…

Java进阶篇--迭代器模式

目录 同步迭代器(Synchronous Iterator): Iterator 接口 常用方法: 注意: 扩展小知识: 异步迭代器(Asynchronous Iterator): 常用的方法 注意: 总结&#xff1a…

【S32K 进阶之旅】S32K 芯片的解锁

在使用 S32K1xx MCU 的过程中,因为某些不当操作导致芯片被锁、加密的情况偶有发生,在此总结一篇如何解锁芯片的文档,希望能够帮到有需要的人。 1. S32K 芯片被锁的现象及原因分析1)在S32K 系列 MCU 开发和生产过程中&#xff…

【Unity细节】Unity中的层级LayerMask

👨‍💻个人主页:元宇宙-秩沅 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 秩沅 原创 😶‍🌫️收录于专栏:unity细节和bug 😶‍🌫️优质专栏 ⭐【…

元宇宙是什么?有哪些应用方向?一文了解元宇宙虚拟展厅

引言: 在当今数字科技飞速发展的时代,元宇宙作为一个令人向往的概念正逐渐进入大众的视野。那么,什么是元宇宙?元宇宙又有哪些应用方向呢?元宇宙虚拟展厅又有哪些优势呢? 一.元宇宙是什么 元宇…