搭建VUE前端项目流程——Node.js 、Yarn、npm、Vue、Vite、Webpack

文章目录

  • 搭建VUE前端项目流程
      • Vue、Vite、Webpack、Yarn、Node.js 和 npm 的概念解释,以及它们之间的关系:
      • 搭建项目流程

搭建VUE前端项目流程

Vue、Vite、Webpack、Yarn、Node.js 和 npm 的概念解释,以及它们之间的关系:

  1. Node.js

    • 一个开源、跨平台的 JavaScript 运行时环境,可以让 JavaScript 代码在服务器端运行。
    • 它提供了一个事件驱动、非阻塞的 I/O 模型,使得它非常适合构建高性能的网络应用。
    • Node.js 基于 Chrome V8 引擎构建,能够执行 JavaScript 代码。
  2. npm(Node Package Manager):

    • 随 Node.js 一起安装的包管理器,用于管理和安装 Node.js 项目的依赖。
    • 拥有一个庞大的在线库 npm Registry,开发者可以从中下载各种 JavaScript 库和工具。
    • 通过 package.json 文件来管理项目的依赖关系。
  3. Yarn

    • 由 Facebook 推出的一个现代包管理器,旨在解决 npm 在某些情况下的性能和安全性问题。
    • Yarn 也有自己的锁文件 yarn.lock,确保在不同环境中安装相同的依赖版本。
    • Yarn 的使用方式与 npm 类似,但通常提供更快的安装速度和更好的离线支持。
  4. Vue.js

    • 一个构建用户界面的渐进式 JavaScript 框架。
    • 它易于上手,灵活且高效,非常适合用来创建单页面应用(SPA)。
    • Vue.js 核心库只关注视图层,易于与其他库或已有项目整合。
  5. Webpack

    • 一个现代 JavaScript 应用程序的静态模块打包器(bundler)。
    • 它将项目中的所有依赖项(包括 JavaScript、图片、CSS 等)打包成一个或多个 bundle,以便浏览器加载。
    • Webpack 支持代码分割、模块热替换(HMR)、各种加载器(loaders)和插件(plugins),使得前端构建过程更加灵活和强大。
  6. Vite

    • 一个由 Vue.js 创始人尤雨溪与他人共同创建的新型前端构建工具。
    • Vite 利用现代浏览器支持 ES 模块的特性,提供了快速的冷启动和即时模块热更新。
    • Vite 在开发环境下使用原生 ES 模块导入,而在生产环境下使用 Rollup 进行打包,以保证生产代码的优化和压缩。

它们之间的关系如下:

  • Node.js 提供了 JavaScript 在服务器端运行的能力,并且是 npm 和 Yarn 的基础。
  • npmYarn 都是 Node.js 的包管理器,用于管理项目依赖,但它们之间是竞争关系,可以相互替代。
  • Vue.js 是一个前端框架,通常需要通过 npm 或 Yarn 来安装。
  • Webpack 是一个模块打包器,可以与 Vue.js 配合使用,处理项目构建和优化。
  • Vite 是一个现代前端构建工具,特别适合与 Vue.js 配合使用,提供了快速的开发服务器和构建过程。

在实际的项目开发中,你可能会使用 Vue.js 来构建前端界面,通过 npm 或 Yarn 来管理项目依赖,使用 Webpack 或 Vite 来处理项目的构建和优化。而 Node.js 作为这一切的基础,提供了必要的运行环境和生态支持。

搭建项目流程

  1. 安装node.js
sudo apt install nodejs  # 不推荐

关于nodejs的安装:
如果Ubuntu的apt直接安装(默认是较低的版本),在后面通过vite时创建项目时会版本过低。
可以通过nvm下载,或者手动下载。

  1. 安装npm
sudo apt install npm
  1. 安装yarn
sudo apt install yarn
yarn create vite

根据Vite的配置生成一个新的项目模板(简单几个选项)

cd 项目名
yarn # 安装项目所需的依赖,根据package.json文件中列出的依赖项,安装这些依赖到node_modules目录下
yarn dev # 启动Vite项目的开发服务器,package.json文件中的一个脚本命

运行项目

若有错误与不足请指出,关注DPT一起进步吧!!!

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

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

相关文章

Python酷库之旅-第三方库Pandas(117)

目录 一、用法精讲 516、pandas.DataFrame.add_suffix方法 516-1、语法 516-2、参数 516-3、功能 516-4、返回值 516-5、说明 516-6、用法 516-6-1、数据准备 516-6-2、代码示例 516-6-3、结果输出 517、pandas.DataFrame.align方法 517-1、语法 517-2、参数 51…

12. DataLoader的基本使用

DataLoader的基本使用 1. 为什么要使用DataLoader DataLoader对创建好的DataSet的样本取样进行了集成操作,非常方便对于后续网络训练、测试的数据集的选择和使用 DataLoader可以集成了数据批量加载的方法,可以使用 batch_size 设置批量大小,DataLoader就会自动处理批量数据…

adb install失败: INSTALL_PARSE_FAILED_NO_CERTIFICATES

这个错误表明在尝试安装 APK 文件时出现了问题,原因是 APK 文件中的 AndroidManifest.xml 没有签名证书。在 Android 系统中,所有的应用都必须经过签名才能安装到设备上。以下是解决此问题的方法: 方法一:使用 Android Studio 或命…

Go语言基本语法

Go语言(通常称为Golang)是由Google开发的一种静态类型、编译型语言,它旨在简化系统编程、网络编程和并发编程的复杂性。 Go语言以其简洁、高效和易于理解的语法而受到开发者的喜爱。 Go语言的一些基本语法元素: 1. 包&#xff…

protobuf中c、c++、python使用

文章目录 protobuf实例:例题1:[CISCN 2023 初赛]StrangeTalkBot分析:思路:利用: 例题2:[CISCN 2024]protoverflow分析: protobuf Protocol Buffers,是Google公司开发的一种数据描述语…

python提取pdf表格到excel:拆分、提取、合并

本文介绍使用python提取pdf中的表格到excel中,包含pdf的拆分、pdf提取到excel、合并excel。 一、拆分pdf 将一个大的pdf按页数拆分为多个小的pdf: # pip install PyPDF2import os, pdfplumber, PyPDF2# 分割pdf def split_pdf(input_pdf_path, num_splits):# Create a PDF…

数学学习记录

9月14日 1.映射: 2.函数: 9月15日 3.反函数: 4.收敛数列的性质 5.反三角函数: 9月16日 6.函数的极限: 7.无穷小和无穷大 极限运算法则:

MySQL里面的日期字符串如何转成日期做比较运算,获取两个日期之间的所有日期(包括起始日期)

SELECTSUM( current_in_amt ) AS total_in_amt FROMt_ads_spare_store_in_contrast WHERESTR_TO_DATE( etl_date, %Y-%m-%d ) > STR_TO_DATE( 2024-01-01, %Y-%m-%d ) AND STR_TO_DATE( etl_date, %Y-%m-%d ) < STR_TO_DATE( 2024-01-04, %Y-%m-%d ); 比如日期格式是 …

远程Linux网络连接( Linux 网络操作系统 04)

接下来我们准备开始进入Linux操作系统的第二个模块的学习&#xff0c;不过在学习之前我们需要对如下进行简单的配置&#xff0c;通过外接辅助软件MobaXterm来进行虚拟操作系统的访问。接下来的课程我们会一直在MobaXterm中进行命令和相关知识的学习。 一、准备阶段 1.1 软件 …

第R3周:LSTM-火灾温度预测:3. nn.LSTM() 函数详解

nn.LSTM 是 PyTorch 中用于创建长短期记忆&#xff08;Long Short-Term Memory&#xff0c;LSTM&#xff09;模型的类。LSTM 是一种循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;的变体&#xff0c;用于处理序列数据&#xff0c;能够有效地捕捉…

骑砍2霸主MOD开发(26)-使用TrfExporterBlender制作TRF文件

一.Blender导入TRF文件 import bpytrf_meshes = []trf_contents = []trf_import_path = D:\pt_ladder.trftrf_export_path = D:\pt_ladder_morph_keys.trfclass TrfMesh:def __init__(self):self.mesh_name = self.mesh_materials = []self.vertex_cnt = 0self.vertex_fvf_cnt…

2848. 与车相交的点(24.9.19)

祝各位中秋节快乐&#xff01; 题目 问题描述&#xff1a; 给你一个下标从 0 开始的二维整数数组 nums 表示汽车停放在数轴上的坐标。对于任意下标 i&#xff0c;nums [i] [start_i, end_i]&#xff1a;其中 start_i 是第 i 辆车的起点&#xff0c;end_i 是第 i 辆车的终点。…

学习笔记JVM篇(三)

一、垃圾回收机制 垃圾回收&#xff08;Garbage Collection&#xff09;机制&#xff0c;是自动回收无用对象从而释放内存的一种机制。Java之所以相对简单&#xff0c;很大程度是归功于垃圾回收机制。&#xff08;例如C语言申请内存后要手动的释放&#xff09; 优点&#xff…

数据清洗-缺失值填充-K-NN算法(K-Nearest Neighbors, K-NN算法)

目录 一、安装所需的python包二、采用K-NN算法进行缺失值填充2.1可直接运行代码2.2以某个缺失值数据进行实战2.2.1代码运行过程截屏&#xff1a;2.2.2填充后的数据截屏&#xff1a; 三、K 近邻算法 (K-Nearest Neighbors, KNN) 介绍3.1 K 近邻算法定义3.2 K 近邻算法的基本思想…

福建科立讯通信 指挥调度管理平台 SQL注入漏洞

北峰通信-福建科立讯通信 指挥调度管理平台 SQL注入漏洞 厂商域名和信息收集 域名&#xff1a; 工具sqlmap python sqlmap.py -u "http://ip:端口/api/client/down_file.php?uuid1" --batch 数据包 GET /api/client/down_file.php?uuid1%27%20AND%20(SELECT%20…

替换 Oracle ,江河信息用 TDengine 解决高基数查询写入问题

在数字经济快速发展的背景下&#xff0c;智慧水利作为重要的基础设施之一&#xff0c;正逐步成为提升水资源管理效率、优化生态环境的重要力量。江西省水投江河信息技术有限公司&#xff08;以下简称“江河信息”&#xff09;作为高新技术国有企业&#xff0c;坚定致力于打造数…

Leetcode 每日一题:Longest Increasing Path in a Matrix

写在前面&#xff1a; 今天我们继续看一道 图论和遍历 相关的题目。这道题目的背景是在一个矩阵当中找寻最长的递增数列长度。思路上非常好想&#xff0c;绝对和 DFS 相关&#xff0c;但是题目的优化要求非常高&#xff0c;对于语言和内存特性的考察特别丰富&#xff0c;如果是…

15. Springboot集成Redis

目录 1、前言 2、为什么选择Spring Boot集成Redis&#xff1f; 3、快速上手 3.1、引入依赖 3.2、 配置连接信息 3.3、自定义配置类 4、RedisTemplate的使用 4.1、String类型操作 4.2、 Hash类型操作 4.3、List类型操作 4.4、Set类型操作 4.5、SortedSet类型操作 4…

第十一章 【后端】商品分类管理微服务(11.2)——Lombok

11.2 Lombok 官网:https://projectlombok.org/ 较新版本的 idea 已默认安装 lombok 插件 Lombok 工具提供一系列的注解,使用这些注解可以不用定义 getter、setter、equals、constructor 等,可以消除 java 代码的臃肿,编译时它会在字节码文件中自动生成这些通用的方法,简…

ElK 8 收集 Nginx 日志

1. 说明 elk 版本&#xff1a;8.15.0 2. 启个 nginx 有 nginx 可以直接使用。我这里是在之前环境下 docker-compose.yml 中启动了个 nginx&#xff1a; nginx:restart: alwaysimage: nginx:1.26.1ports:- "80:80"- "443:443"volumes:#- ./nginx/html:/…