0


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

文章目录

搭建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一起进步吧!!!

标签: node.js 前端 npm

本文转载自: https://blog.csdn.net/m0_66925868/article/details/142184813
版权归原作者 叫我DPT 所有, 如有侵权,请联系我们删除。

“搭建VUE前端项目流程——Node.js 、Yarn、npm、Vue、Vite、Webpack”的评论:

还没有评论