商丘做网站,如何用手机建网站,深圳设计网站开发,可以做设计兼职的网站有哪些工作室文章目录 搭建VUE前端项目流程Vue、Vite、Webpack、Yarn、Node.js 和 npm 的概念解释#xff0c;以及它们之间的关系#xff1a;搭建项目流程 搭建VUE前端项目流程
Vue、Vite、Webpack、Yarn、Node.js 和 npm 的概念解释#xff0c;以及它们之间的关系#xff1a; Node.js… 文章目录 搭建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 代码。 npmNode 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 yarnyarn create vite根据Vite的配置生成一个新的项目模板简单几个选项 cd 项目名
yarn # 安装项目所需的依赖根据package.json文件中列出的依赖项安装这些依赖到node_modules目录下
yarn dev # 启动Vite项目的开发服务器package.json文件中的一个脚本命运行项目 若有错误与不足请指出关注DPT一起进步吧
