NodeJS的安装 npm 配置和使用 Vue-cli安装 Vue项目介绍

一.前端工程化

前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本

1. NodeJS的安装

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环
境,可以使 JavaScript 运行在服务器端。使用 Node.js,可以
方便地开发服务器端应用程序,如 Web 应用、API、后端服
务,还可以通过 Node.js 构建命令行工具等。

  • 打开官网https://nodejs.org/en下载对应操作系统的 LTS版本。
  • 双击安装包

  • 选择安装到一个,没有中文,没有空格的目录下(新建一个文件夹NodeJS)

NodeJS 安装完毕后,会自动配置好环境变量,我们验证一
下是否安装成功,通过: node -v

2.npm 配置和使用

NPM全称Node Package Manager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Node.js的包管理工具,相当于后端的Maven 。

  • 安装node,自动安装npm包管理工具!
  • 配置全局依赖下载后存储位置

创建一个新的全局依赖存储目录,例如
D:\develop\GlobalNodeModules

  • 打开命令行终端,执行以下命令来配置新的全局依赖存储

路径:npm config set prefix "D:\develop\GlobalNodeModules"

  • 确认配置已生效,可以使用以下命令查看当前的全局依赖存储路径

npm config get prefix

  • 切换npm的淘宝镜像,使用管理员身份运行命令行,在命令行中,执行如下指令:

npm config set registry https://registry.npmmirror.com

  • 确认配置已生效,可以使用以下命令查看当前 registry 的配置:

npm config get registry

3. Vue-cli安装

我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成
的,用于快速的生成一个Vue的项目模板。Vue-cli主要提供了
如下功能:

1.统一的目录结构    2.本地调试
3.热部署    4.单元测试
5.集成打包上线

我们需要运行Vue-cli,需要依赖NodeJS,NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS,然后才能安装Vue-cli

使用管理员身份运行命令行,在命令行中,执行如下指令:

npm install -g @vue/cli

这个过程中,会联网下载,可能会耗时几分钟,耐心等待。

二.Vue项目介绍

1 Vue项目-创建

进入文件夹,的地址目录,在地址栏输入cmd

通过命令先进入到图形化界面,然后再进行vue工程的创建

vue ui

选择创建按钮创建项目,如下图所示

然后预设模板选择手动,如下图所示

然后再功能页面开启路由功能,如下图所示:

然后再配置页面选择语言版本和语法检查规范,如下图所示

然后创建项目,进入如下界面:

最后我们只需要等待片刻,即可进入到创建创建成功的界面,如下图所示:

2 vue项目目录结构介绍

通过VS Code打开之前创建的vue文件夹,打开之后,呈现
如下图所示页面:

vue项目的标准目录结构以及目录对应的解释如下图所示:

  • public/ 目录:用于存放一些公共资源,如 HTML 文件、图像、字体等,这些资源会被直接复制到构建出的目标目录中。
  • src/ 目录:存放项目的源代码,包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中,这些文件会被 Vite 实时编译和处理,并在浏览器中进行实时预览和调试。以下是src内部划分建议:
  • assets/目录:用于存放一些项目中用到的静态资源,如
    图片、字体、样式文件等
  • components/ 目录:用于存放组件相关的文件。组件是代码复用的一种方式,用于抽象出一个可复用的 UI部件,方便在不同的场景中进行重复使用
  • router/ 目录:用于存放 Vue.js 的路由配置文件,负责管理视图和 URL 之间的映射关系,方便实现页面之间的跳转和数据传递。
  • vue.config.js 文件:Vite 的配置文件,可以通过该文件配置项目的参数、插件、打包优化等。该文件可以使用CommonJS 或 ES6 模块的语法进行配置。
  • package.json 文件:标准的 Node.js 项目配置文件,包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段定义几个命令,如 dev、build、serve 等,用于启动开
    发、构建和启动本地服务器等操作。

3 运行vue项目

第一种方式:通过VS Code提供的图形化界面 ,如下图所示

点击之后,我们等待片刻,即可运行,在终端界面中,我们发现项目是运行在本地服务的8080端口,我们直接通过浏览器打开地址

最终浏览器打开后,呈现如下界面,表示项目运行成功

对于8080端口,经常被占用,所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容,添加如下代码:

module.exports = defineConfig({
    transpileDependencies: true,
    devServer:{
        port: 9000
     }
})


第二种方式:命令行方式

直接基于cmd命令窗口,在vue目录下,执行输入命令npmrun serve即可,如下图所示:

补充:NPM脚本窗口调试出来

第一步:通过设置/用户设置/扩展/MPM更改NPM默认配置,如下图所示

然后重启VS Code,并且双击打开package.json文件,然后
点击资源管理器处的3个小点,勾选npm脚本选项,如图所示

然后就能都显示NPM脚本小窗口了。

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

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

相关文章

Linux学习,ssh 命令

SSH(Secure Shell)是一种网络协议,通过加密的方式在客户端和服务器之间建立安全的远程连接。Linux系统中的SSH命令是用于通过SSH协议远程登录和管理其他计算机的重要工具。SSH (Secure Shell) 是一种用于远程登录和其他网络服务之间的加密协议…

「Mac玩转仓颉内测版7」入门篇7 - Cangjie控制结构(下)

本篇继续深入介绍 for-in 循环的用法,并探讨 break 和 continue 控制结构的应用,帮助优化程序流程。 关键词 Cangjie控制结构Cangjie循环语句for-in控制转移程序优化 一、for-in 表达式 for-in 表达式用于遍历扩展了迭代器接口 Iterable 的类型实例。…

软件工程概论项目(二),node.js的配置,npm的使用与vue的安装

上一章我们配置了git仓库,这一章我们来配置项目需要用的一些其他的环境。 放一个思维导图在这里,可以参考一下,很不全面,没有参考价值,反正我先这样写吧。 参考了这个nodejs的配置,写的很好:https://blog.c…

什么是crm?3000字详细解析

在现代商业环境中,客户关系管理(CRM)已经成为企业驱动成功的关键工具。在复杂且竞争激烈的市场中,如何有效地管理客户关系、提升客户满意度,并增加客户忠诚度,越来越成为企业迫切关心的问题。而CRM系统&…

中心极限定理的三种形式

独立同分布的中心极限定理: 设 X 1 , X 2 , … , X n X_1, X_2, \ldots, X_n X1​,X2​,…,Xn​是独立同分布的随机变量序列,且 E ( X i ) μ E(X_i) \mu E(Xi​)μ, D ( X i ) σ 2 > 0 D(X_i) \sigma^2 > 0 D(Xi​)σ2>0存在…

3.1_文件上传漏洞

文件上传漏洞 文件上传漏洞原理:未对用户提交的文件进行严格校验,就将恶意文件解析执行,导致用户可以提交恶意的文件进行攻击; 利用方式(危害): 1). 上传 HTML/SVG 进行 XSS 攻击&…

C++入门基础知识140—【关于C++ 类构造函数 析构函数】

成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于C 类构造函数 & 析构函数的相关内容…

前端框架大比拼:React.js, Vue.js 及 Angular 的优势与适用场景探讨

文章目录 前言一、React.js特点使用方法适用场景 二、Vue.js特点使用方法适用场景 三、Angular特点使用方法适用场景 四、如何选择合适的前端框架五、前端框架对项目性能的影响结语 前言 随着互联网技术的飞速发展,前端开发已经从简单的页面展示演变为复杂的应用构…

Notepad++的完美替代

由于Notepad的作者曾发表过可能在开发者代码中植入恶意软件的言论,他备受指责。在此,我向大家推荐一个Notepad的完美替代品——NotepadNext和Notepad--。 1、NotepadNext NotepadNext的特点: 1、跨平台兼容性 NotepadNext基于Electron或Qt…

为什么RNN(循环神经网络)存在梯度消失和梯度爆炸?

1️⃣ 原理分析 RNN前向传播的公式为: x t x_t xt​是t时刻的输入 s t s_t st​是t时刻的记忆, s t f ( U ⋅ x t W ⋅ s t − 1 ) s_tf(U\cdot x_tW\cdot s_{t-1}) st​f(U⋅xt​W⋅st−1​),f表示激活函数, s t − 1 s_{t-1} …

NUXT3学习日记二(样式配置、引入组件库、区分在服务端还是在客户端渲染)

上一章已经给大家分享官网下载的nuxt3了,下面正式进入我所要说的内容吧 一、初始化样式 想必大家从我的git下载下来的nuxt3,能看到nuxt.config.ts这个文件了吧。 这里我们有两种css配置方式 1、css:[~/assets/base.scss] 这种方式不能在scss文件中定义…

2024AAAI | DiffRAW: 利用扩散模型从手机RAW图生成单反相机质量的RGB图像

文章标题:《DiffRAW: Leveraging Diffusion Model to Generate DSLR-Comparable Perceptual Quality sRGB from Smartphone RAW Images》 原文链接:DiffRAW 本文是清华大学深圳研究院联合华为发表在AAAI-2024上的论文(小声bb:华…

计算机视觉 ---图像模糊

1、图像模糊的作用: 减少噪声: 在图像获取过程中,例如通过相机拍摄或者传感器采集,可能会受到各种因素的干扰,从而引入噪声。这些噪声在图像上表现为一些孤立的、不符合图像主体内容的像素变化,如椒盐噪声&…

串口DMA接收不定长数据

STM32F767—>串口通信接收不定长数据的处理方法_stm32串口超时中断-CSDN博客 STM32-HAL库串口DMA空闲中断的正确使用方式解析SBUS信号_stm32 hal usart2 dma-CSDN博客 #define USART1_RxBuffSize 100 extern DMA_HandleTypeDef hdma_usart1_rx; //此处声明的变量在…

web实验3:虚拟主机基于不同端口、目录、IP、域名访问不同页面

创建配置文件: 创建那几个目录及文件,并且写内容: 为网卡ens160添加一个 IPv4 地址192.168.234.199/24: 再重新激活一下网卡ens160: 重启服务: 关闭防火墙、改宽松模式: 查看nginx端口监听情况:…

Jmeter中的监听器(二)

5--JSR223 Listener 用途 自定义数据处理:使用脚本语言处理测试结果,实现高度定制化的数据处理和分析。实时监控:实时处理和显示测试结果。集成外部系统:将测试结果发送到外部系统进行进一步处理和分析。日志记录:记…

DP动态规划基础题(Kadane算法)

动态规划(Dynamic Programming,简称DP)是一种在数学、管理科学、计算机科学、经济学和生物信息学等领域中使用的,通过把原问题分解为相对简单的子问题的方式求解复杂问题的方法。动态规划算法通常用于优化问题,特别是那…

计算机组成原理——进位计数制

1.认识不同进制 通常的我们日常生活中用到的都是十进制,比如买东西或者期末成绩等等,当然肯定不止这一种进制方法,相关的还有二进制、八进制、十六进制,还有古罗马数字,通常古罗马数字近似可以看作是五进制的数&#x…

《.addClass()》

《.addClass()》 .addClass() 是一个在网页设计和开发中常用的 jQuery 函数,用于向 HTML 元素添加一个或多个类名。这个函数在美化网页、实现动态效果以及改善用户体验方面发挥着重要作用。本文将详细介绍 .addClass() 函数的用法、优势以及在实际开发中的应用案例。 1. .ad…

function and task

任务和函数 在Verilog语言中提供了任务和函数,可以将较大的行为级设计划分为较小的代码段,允许设计者将需要在多个地方重复使用的相同代码提取出来,编写成任务和函数,这样可以使代码更加简洁和易懂。 1.1任务 任务的定义 任务定义…