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

文章目录

• 搭建VUE前端项目流程
• • • [Vue、Vite、Webpack、Yarn、Node.js 和 npm 的概念解释，以及它们之间的关系：](#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 的基础。
• npm 和 Yarn 都是 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下载，或者手动下载。

2. 安装npm

sudo apt install npm

3. 安装yarn

sudo apt install yarn

yarn create vite

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

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

运行项目

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