搭建VUE前端项目流程——Node.js 、Yarn、npm、Vue、Vite、Webpack
文章目录
- 搭建VUE前端项目流程
- Vue、Vite、Webpack、Yarn、Node.js 和 npm 的概念解释，以及它们之间的关系：
- 搭建项目流程
搭建VUE前端项目流程
Vue、Vite、Webpack、Yarn、Node.js 和 npm 的概念解释，以及它们之间的关系：
-
Node.js：
- 一个开源、跨平台的 JavaScript 运行时环境，可以让 JavaScript 代码在服务器端运行。
- 它提供了一个事件驱动、非阻塞的 I/O 模型，使得它非常适合构建高性能的网络应用。
- Node.js 基于 Chrome V8 引擎构建，能够执行 JavaScript 代码。
-
npm（Node Package Manager）：
- 随 Node.js 一起安装的包管理器，用于管理和安装 Node.js 项目的依赖。
- 拥有一个庞大的在线库 npm Registry，开发者可以从中下载各种 JavaScript 库和工具。
- 通过
package.json文件来管理项目的依赖关系。
-
Yarn：
- 由 Facebook 推出的一个现代包管理器，旨在解决 npm 在某些情况下的性能和安全性问题。
- Yarn 也有自己的锁文件
yarn.lock，确保在不同环境中安装相同的依赖版本。 - Yarn 的使用方式与 npm 类似，但通常提供更快的安装速度和更好的离线支持。
-
Vue.js：
- 一个构建用户界面的渐进式 JavaScript 框架。
- 它易于上手，灵活且高效，非常适合用来创建单页面应用（SPA）。
- Vue.js 核心库只关注视图层，易于与其他库或已有项目整合。
-
Webpack：
- 一个现代 JavaScript 应用程序的静态模块打包器（bundler）。
- 它将项目中的所有依赖项（包括 JavaScript、图片、CSS 等）打包成一个或多个 bundle，以便浏览器加载。
- Webpack 支持代码分割、模块热替换（HMR）、各种加载器（loaders）和插件（plugins），使得前端构建过程更加灵活和强大。
-
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 作为这一切的基础，提供了必要的运行环境和生态支持。
搭建项目流程
- 安装node.js
sudo apt install nodejs # 不推荐
关于nodejs的安装：
如果Ubuntu的apt直接安装（默认是较低的版本），在后面通过vite时创建项目时会版本过低。
可以通过nvm下载，或者手动下载。
- 安装npm
sudo apt install npm
- 安装yarn
sudo apt install yarn
yarn create vite
根据Vite的配置生成一个新的项目模板（简单几个选项）
cd 项目名
yarn # 安装项目所需的依赖，根据package.json文件中列出的依赖项，安装这些依赖到node_modules目录下
yarn dev # 启动Vite项目的开发服务器，package.json文件中的一个脚本命
运行项目
若有错误与不足请指出，关注DPT一起进步吧！！！