Vue安装过程的困惑解答——nodejs和vue关系、webpack、vue-cli、vue的项目结构

文章目录

    • 1、为什么在使用vue前要下载nodejs?
    • 2、为什么安装nodejs后就能使用NPM包管理工具?
    • 3、为什么是V8引擎并且使用C++实现?
    • 4、为什么会安装淘宝镜像?
    • 5、什么是webpack模板?
    • 6、什么是脚手架 vue-cli?
      • 6.1 安装 Vue 3+版本 的 vue/cli
      • 6.2 vue create 创建Vue3应用项目
      • 6.2 vue build 打包
    • 7、通过vue-cli结合Webpack创建应用
      • 7.1 vue init 创建Vue2应用项目
    • 8、vue项目的目录解释
    • 9、package.json和package-lock.json对依赖包的版本控制

本文知识来源于《Vue.js+Node.js全站开发实战》,书籍下载地址:https://zlibrary-east.se/book/18202286/fed194(2023.8.31更新)

1、为什么在使用vue前要下载nodejs?

相信大家都看过下面的Vue安装教程,首先第一步都是安装nodejs,那么为什么要下载nodejs?https://blog.csdn.net/m0_57545353/article/details/124366678

——因为Node.js是JavaScript的运行时环境

Node.js是一个基于Google Chrome V8引擎设计实现的、跨平台兼容的、可以运行在服务器端的脚本开发语言。

例如,大多数读者耳熟能详的Angular、React和Vue.js这三大渐进式前端开发框架,均与Node.js有着密不可分的关联关系。

这里解释一下服务端:一般的JavaScript脚本语言需要在浏览器环境下才可以解释执行。而Node.js是服务器端的脚本语言,可以直接在后端解释执行。

Node.js组织架构如下:
在这里插入图片描述

2、为什么安装nodejs后就能使用NPM包管理工具?

Node.js发展初期的核心用户Isaac Z. Schlueter开发出奠定了Node.js如今地位的重要工具——NPM包管理工具。

之后ConnectExpressSocket.io等库的出现吸引了一大批爱好者加入到Node.js开发者的阵营中来。CoffeeScript的出现更是让不少Ruby和Python开发者找到了学习的理由。其间一大波以Node.js作为运行环境的CLI工具涌现,其中不乏用于加速前端开发的优秀工具,如Babel、Less、Sass、UglifyJS、Browserify、Grunt、Gulp等。

随着ECMAScript 6的发展和最终定稿,Node.js之父RyanDahl退出Node.js的核心开发,转而做其他的研究项目。Ryan Dahl的接任者Isaac Schlueter负责将Node.js一直开发下去并进行不断完善。

3、为什么是V8引擎并且使用C++实现?

选择C++和V8,而不是Ruby或者其他的虚拟机。Node.js在设计上以单进程、单线程模式运行。事件驱动机制是Node.js通过内部单线程高效率地维护事件循环队列来实现的,没有多线程的资源占用和上下文切换。这意味着面对大规模的HTTP请求,Node.js是凭借事件驱动来完成的。

例:
实时互动交互比较多的社交网站,像Twitter这样的公司,它必须接收tweets并将其写入数据库。实际上,每秒几乎有数千条tweet达到,数据库不可能及时处理高峰时段所需的写入数量。Node成为这个问题解决方案的重要一环。Node能处理数万条入站tweet。它能快速而又轻松地将它们写入一个内存排队机制(例如memcached),另一个单独进程可以从那里将它们写入数据库。Node能处理每个连接而不会阻塞通道,从而能够捕获尽可能多的tweets。

4、为什么会安装淘宝镜像?

国内的淘宝为Node.js搭建了国内的NPM(npmjs.org)镜像网站,可以用此代替官方版本,同步频率为每10分钟一次,以保证尽量与官方服务同步,方便国内的开发者下载各种开发包,这就是为什么需要配置Node.js淘宝镜像加速器。

npm config set registry https://registry.npm.taobao.org

5、什么是webpack模板?

Webpack模块打包器作为构建Node应用框架的工具以自动化方式构建Web前端应用,所谓“自动化”方式,其实就是通过一种或几种自动化工具来构建Web前端应用的开发框架,生成后的框架会包含大部分Web前端应用所需的基本类库、第三方插件和支撑配置文件,等等。可以说,这种全新的开发方式将Web前端应用开发提升到了一个全新的高度,并且符合将前后端分离开来进行独立设计的大趋势。

Web前端的自动化构建工具有很多种,其中著名的就是Webpack模块化打包器工具,其也是目前Web前端开发中流行的工具之一。Webpack的功能十分强大,设计了入口(entry)、输出(output)、加载器(loader)和插件(plugins这四个概念,以递归方式构建出一个应用程序主要资源的依赖关系图,并最终完成将JavaScript模块打包成一个或多个“包(bundle)”。

6、什么是脚手架 vue-cli?

所谓“脚手架”就是为了快速搭建应用程序开发框架而设计开发的自动构建工具。在当前各种Web开发框架流行的今天,大部分前端开发工具和框架都设计了自己的“脚手架”工具,而Vue.js框架的脚手架就是vue-cli命令行工具

6.1 安装 Vue 3+版本 的 vue/cli

npm install -g @vue/cli 

安装 Vue 2+版本 的 vue/cli

npm install -g vue/cli 

如果想验证一下vue-cli命令行工具是否安装成功了,可以通过“vue-V”命令查看vue-cli命令行工具的版本号来验证。

6.2 vue create 创建Vue3应用项目

ue.js脚手架功能十分强大,通过vue-cli命令行工具的“vue create xxx”命令,可以直接创建Vue.js应用项目,该应用项目会自动生成若干必要的框架文件,以及一个默认的Vue单文件页面。同时,这个默认的Vue单文件页面已经是一个最基本的Vue.js应用了,通过“npm run serve”命令就可以直接运行测试该应用项目。

6.2 vue build 打包

除了通过使用“vue serve”命令直接启动HTTP服务测试Vue.js单页面文件应用的方式,还支持使用“vue build”命令进行打包并测试的方式。将通过生产模式对Vue.js文件进行打包,打包成功后的文件均输出到“dist”目录下。在dist目录中,自动生成了一个index.html页面文件和一组js文件和map文件(js子目录内)。最后,就可以将dist目录中的文件直接部署到服务器中去测试了。

7、通过vue-cli结合Webpack创建应用

通过vue-cli命令行工具还可以结合Webpack工具创建Vue.js项目应用。严格来讲,这其实是Vue 2版本下的操作方式,所结合的Webpack工具其实是Vue.js官方所推荐的模板。

7.1 vue init 创建Vue2应用项目

在Vue 2版本下创建应用项目同样会自动生成若干必要的框架文件,以及一个默认的Vue单文件页面。不过,该项目内生成的文件和目录与Vue3版本下生成的略有不同,对于Vue 2版本下vue-cli命令行工具,就不是通过“vue create”命令创建应用项目了,而是通过“vue init”命令来实现的:

在使用“vue init”命令之前需要先安装该命令扩展工具,具体命令如下:

npm install –g @vue/cli-init

创建一个项目:

vue init webpack your-project-name

其中,webpack是指定的模板名称(webpack是官方推荐的默认模板工具,当然也可以指定其他模板工具)

输入“npm run dev”命令就可以启动运行项目。
输入 “npm run build” 对项目进行打包发布操作。

8、vue项目的目录解释

node_modules目录存放了通过npm命令安装的各种开发包,里面不仅仅是刚刚安装的webpack和webpack_cli开发包,还包括了整个Node生态系统必要的依赖项。
在这里插入图片描述

9、package.json和package-lock.json对依赖包的版本控制

package-lock.json文件是在NPM v5版本以后新增加的功能。
在这里插入图片描述
但若用户真想升级到最新版本或某个指定版本,则必须在开发包名称后使用“@latest”或“@版本号”来执行指定版本号的升级。

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

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

相关文章

9.1 消息 字体 颜色 文件对话框 发布软件

保存 void Widget::on_savebtn_clicked() {QString filename QFileDialog::getSaveFileName(this, "保存", "C:/Users/yc/Desktop/", "图片 (*.png *.xpm *.jpg);;文本 (*.txt);;所有文件 (*.*)");if(filename.isNull()){QMessageBox::informa…

window下jdk安装及更换jdk版本的一些问题。

目录 jdk安装jdk的选择。oracle的jdk怎么安装。openjdk怎么安装。 jdk的版本控制。更换jdk的一些问题。 jdk安装 jdk的选择。 目前有两种可选的jdk,oracle的和开源的Openjdk,这两种jdk的区别可以自行查阅,就结果而言,openjdk开源…

包含文心一言在内的首批国产大模型 全面开放

8月31起,国内 11 家通过《生成式人工智能服务管理暂行办法》备案的 AI 大模型产品将陆续上线,面向全社会开放。北京 5 家大模型产品分别是百度的 “文心一言”、抖音的 “云雀”、百川智能的 “百川大模型”、清华系 AI 公司智谱华章旗下的 “智谱清言”…

【解决】idea启动spring MVC报错:一个或多个listeners启动失败Listener ClassNotFoundException

idea配置教程。tomcat调试报错Artifact :war exploded: Error during artifact deployment。 修改代码后,启动不生效,仍是旧代码。 根本原因是: Modules output path和Artifacts output directory不匹配 Modules output path一定要等于Ar…

JavaScript Web APIs - 06 正则表达式

Web APIs - 06 文章目录 Web APIs - 06正则表达式正则基本使用元字符边界符量词范围字符类 替换和修饰符正则插件change 事件判断是否有类 目标:能够利用正则表达式完成小兔鲜注册页面的表单验证,具备常见的表单验证能力 正则表达式综合案例阶段案例 正…

Docker harbor私有仓库部署与管理

一、搭建本地私有仓库二、Harbor私有仓库部署与管理1、Harbor概述2、Harbor的特性3、Harbor的核心组件3.1 Proxy3.2 Registry3.3 Core services3.3.1 UI(harbor-ui)3.3.2 WebHook3.3.3 Token 服务 3.4 Database(harbor-db)3.5 Log…

C++ 学习系列 -- const 关键字

C 中引入了 const 关键字,被 const 关键字修饰的变量其值不能修改,是只读的。 一 const 变量的初始化与存储 1. const 变量初始化时就需要赋初值,否则无法编译通过 二 const 与指针 指针常量: 指针所指向的值不可改变&…

Python程序化交易接口批量获取数据源码

小编举例下面是一个简单的示例代码,展示如何使用Python的程序化交易接口批量获取数据,例如开发文档参考:MetaTradeAPI (metatradeapi) - Gitee.com 签名 int Init(); 功能 API 初始化 参数 无 返回值 授权成功的交易账户数量 返回值 &…

一百六十六、MySQL——systemctl stop mysqld无法停止MySQL8.0服务

一、目的 为了解决MySQL的中文乱码问题,需要对/etc/my.cnf文件进行参数配置。 而对/etc/my.cnf文件进行配置参数之前,需要先停止MySQL服务 二、错误命令语句示范 (一)错误的命令语句 # systemctl stop mysqld (…

C++进阶之多态

多态 多态的概念多态的定义及实现1.多态的构成条件2.虚函数3.虚函数的重写4.虚函数重写的两个例外5.C11 override 和 final6.重载、覆盖(重写)、隐藏(重定义)的对比 抽象类1.概念2.接口继承和实现继承 多态的原理1.虚函数表2.多态的原理3.动态绑定与静态绑定 单继承和多继承关系…

SQL高阶语句

目录 1、概念 1.1、概述 1.2、常见的MySQL高阶语句的概念: 1.3、 SQL高阶语句的作用 2、常用查询 2.1、按关键字排序 2.1.1、概述和作用 2.1.2、 (1)语法 2.1.3、模板表:ky30 ​编辑2.1.4、分数按降序排列 2.1.5、ORDER…

Kubernetes技术--使用kubeadm搭建高可用的K8s集群(贴近实际环境)

1.高可用k8s集群架构(多master) 2.安装硬件要求 一台或多台机器,操作系统 CentOS7.x-86_x64 硬件配置:2GB或更多RAM,2个CPU或更多CPU,硬盘30GB或更多 注: 这里属于教学环境,所以使用三台虚拟机模拟实现。 3.部署规划 4.部署前准备 (1).关闭防火墙 systemctl stop fi…

《Go 语言第一课》课程学习笔记(十二)

函数 Go 函数与函数声明 在 Go 语言中,函数是唯一一种基于特定输入,实现特定任务并可返回任务执行结果的代码块(Go 语言中的方法本质上也是函数)。在 Go 中,我们定义一个函数的最常用方式就是使用函数声明。 第一部…

重新理解百度智能云:写在大模型开放后的24小时

在这些回答背后共同折射出的一个现实是——大模型不再是一个单选题,而更是一个综合题。在这个新的时代帆船上,产品、服务、安全、开放等全部都需要成为必需品,甚至是从企业的落地层面来看,这些更是刚需品。 作者| 皮爷 出品|产…

在Nodejs中使用JWT进行鉴权

什么是 JSON Web Token(JWT)? JSON Web Token(JWT)是一种用于在web上传递信息的标准,它以JSON格式表示信息,通常用于身份验证和授权。 JWT由三个部分组成:Header(头部&…

软件测试Day4|软件测试理论02

目录 6. 测试用例基础6.1 测试用例的定义6.2 测试用例要素6.3 测试用例设计和编写的作用 7. 黑盒测试用例设计方法7.1 用例设计方法分类7.2 测试数据选择7.2.1 等价类划分(1)等价类划分原理(2)确定等价类的原则(3&…

摆动序列【贪心算法】

摆动序列 如果连续数字之间的差严格地在正数和负数之间交替,则数字序列称为 摆动序列 。第一个差(如果存在的话)可能是正数或负数。仅有一个元素或者含两个不等元素的序列也视作摆动序列。 class Solution {public int wiggleMaxLength(int…

zabbix安装部署

前期准备:安装mysql数据库和nginx 一、下载zabbix rpm -Uvh https://repo.zabbix.com/zabbix/4.4/rhel/7/x86_64/zabbix-release-4.4-1.el7.noarch.rpm yum-config-manager --enable rhel-7-server-optional-rpms yum install epel-release numactl yum install…

Spring Cloud Gateway的快速使用

环境前置搭建Nacos&#xff1a;点击跳转 Spring Cloud Gateway Docs 新建gateway网关模块 pom.xml导入依赖 <!-- 网关 --> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifact…

Spring MVC 学习总结

学习目标 了解 Spring MVC 是什么&#xff0c;为什么要使用它或者说它能解决什么问题&#xff0c;其与 Spring 是什么关系。理解为什么配置 Spring MVC 的前端控制器的映射路径为 “/” 会导致静态资源访问不了&#xff0c;掌握怎么处理这个问题。掌握基于注解方式使用 Spring…