ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【Vue教程】使用Vite快速搭建前端工程化项目 Vue3 Vite Node.js [打印本页]

---

作者: 立聪堂德州十三局店    时间: 2025-2-17 03:53
标题: 【Vue教程】使用Vite快速搭建前端工程化项目 Vue3 Vite Node.js

??各人好！我是毛毛张!
??个人首页：

   ??本日毛毛张分享的是关于怎样快速??♂搭建一个前端工程化的项目的环境搭建以及流程??
  文章目录

• 1.前端工程化环境搭建??
  
• 
  
  
  
  • 1.1 什么是前端工程化
    
  • 1.2 nodejs的简介和安装
    
  • 
    
    
    
    • 1.2.1 什么是Nodejs
      
    • 1.2.2 怎样安装nodejs
      
    
    
  • 3.2 npm 设置和使用
    
  • 
    
    
    
    • 3.2.1 npm 安装和设置
      
    • 3.2.2 npm 常用命令??
      
    
    
  
  
• 2.Vue3通过Vite实现工程化??
  
• 
  
  
  
  • 2.1 Vue3简介??
    
  • 2.2 Vite的介绍
    
  • 2.3 Vite创建Vue3工程化项目??
    
  • 
    
    
    
    • 2.3.1 Vite+Vue3项目的创建、启动、停止??
      
    • 2.3.2 Vite+Vue3项目的目录结构
      
    
    
  
  

1.前端工程化环境搭建??

1.1 什么是前端工程化

• 前端工程化是使用软件工程的方法来单独办理前端的开辟流程中模块化、组件化、规范化、主动化的题目,其紧张目的为了进步效率和降低成本。
  

1.2 nodejs的简介和安装

1.2.1 什么是Nodejs

• Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，可以使 JavaScript 运行在服务器端。使用 Node.js，可以方便地开辟服务器端应用程序，如 Web 应用、API、后端服务，还可以通过 Node.js 构建命令行工具等。相比于传统的服务器端语言（如 PHP、Java、Python 等），Node.js 具有以下特点：
  
  
  
  • 单线程，但是采用了事件驱动、异步 I/O 模型，可以处理高并发请求。
    
  • 轻量级，使用 C++ 编写的 V8 引擎让 Node.js 的运行速率很快。
    
  • 模块化，Node.js 内置了大量模块，同时也可以通过第三方模块扩展功能。
    
  • 跨平台，可以在 Windows、Linux、Mac 等多种平台下运行。
    
  
  
• Node.js 的核心是其管理事件和异步 I/O 的能力。Node.js 的异步 I/O 使其可以或许处理大量并发请求，而且可以或许避免在等待 I/O 资源时造成的壅闭。此外，Node.js 还拥有高性能网络库和文件体系库，可用于搭建 WebSocket 服务器、上传文件等。在 Node.js 中，我们可以使用 JavaScript 来编写服务器端程序，这也使得前端开辟职员可以使用自己已经熟悉的技能来开辟服务器端程序，同时也让 JavaScript 成为一种全栈语言。Node.js 受到了广泛的应用，包括了大型企业级应用、云计算、物联网、游戏开辟等领域。常用的 Node.js 框架包括 Express、Koa、Egg.js 等，它们可以或许显著进步开辟效率和代码质量。
  

1.2.2 怎样安装nodejs

• 直接打开官网下载对应操纵体系的LST版本
  
  
  
  • 官网链接：https://nodejs.org/en
    
  
  
• 双击安装包进行安装，安装过程中遵循默认选项即可(大概参照https://www.runoob.com/nodejs/nodejs-install-setup.html )。安装完成后，可以在命令行终端输入 node -v 和 npm -v 检察 Node.js 和 npm 的版本号。
  
  
  
  
• 界说一个app.js文件,cmd到该文件所在目录,然后在dos上通过node app.js命令即可运行
  function sum(a,b){
  return a+b;
  }
  function main(){
  console.log(sum(10,20))
  }
  main()
  

3.2 npm 设置和使用

• NPM全称Node Package Manager，是Node.js包管理工具，是环球最大的模块生态体系，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven
  

3.2.1 npm 安装和设置

   1.安装
  

• 安装node，主动安装npm包管理工具！
  

   2.设置依赖下载使用阿里镜像
  

• npm 安装依赖包时默认使用的是官方源，由于国内网络环境的原因，偶然会出现下载速率过慢的环境。为了办理这个题目，可以设置使用阿里镜像来加速 npm 的下载速率，详细操纵如下：
  
• 打开命令行终端，实行以下命令，设置使用阿里镜像：
  npm config set registry https://registry.npm.taobao.org
  npm config set registry https://registry.npmmirror.com # 推荐
  
• 确认设置已收效，可以使用以下命令检察当前 registry 的设置：如果输出结果为 https://registry.npmmirror.com，说明设置已乐成收效。
  npm config get registry
  
• 如果需要规复默认的官方源，可以实行以下命令：
  npm config set registry https://registry.npmjs.org/
  

   3.设置全局依赖下载后存储位置
  

• 在 Windows 体系上，npm 的全局依赖默认安装在 <用户目录>AppDataRoaming pm 目录下。如果需要修改全局依赖的安装路径，可以按照以下步骤操纵：
  
  
  • 创建一个新的全局依赖存储目录，例如 D:GlobalNodeModules。
    
  • 打开命令行终端，实行以下命令来设置新的全局依赖存储路径：
    
    1. npm config set prefix "D:GlobalNodeModules"

    复制代码
  • 确认设置已收效，可以使用以下命令检察当前的全局依赖存储路径：
    
    1. npm config get prefix

    复制代码
  
  

   4.升级npm版本
  

• cmd 输入npm -v 检察版本
  
• 如果node中自带的npm版本过低！则需要升级至9.6.6！
  
  1. npm install -g npm@9.6.6

  复制代码

3.2.2 npm 常用命令??

   1.项目初始化
  

• npm init
  
  
  
  • 进入一个vscode创建好的项目中, 实行 npm init 命令后，npm 会引导您在命令行界面上答复一些题目,例如项目名称、版本号、作者、许可证等信息，并最终生成一个package.json 文件。package.json信息会包含项目基本信息！类似maven的pom.xml
    
  
  
• npm init -y
  
  
  
  • 实行，-y yes的意思，所有信息使用当前文件夹的默认值！不用挨个填写！
    
  
  

   2.安装依赖 (检察所有依赖地点 https://www.npmjs.com )
  

• npm install 包名 大概 npm install 包名@版本号
  
  
  
  • 安装包大概指定版本的依赖包(安装到当前项目中)
    
  
  
• npm install -g 包名
  
  
  
  • 安装全局依赖包(安装到d:/GlobalNodeModules)则可以在任何项目中使用它，而无需在每个项目中独立安装该包。
    
  
  
• npm install
  
  
  
  • 安装package.json中的所有记载的依赖
    
  
  

   3.升级依赖
  

• npm update 包名
  
  
  
  • 将依赖升级到最新版本
    
  
  

   4.卸载依赖
  

• npm uninstall 包名
  

   5.检察依赖
  

• npm ls
  
  
  
  • 检察项目依赖
    
  
  
• npm list -g
  
  
  
  • 检察全局依赖
    
  
  

   6.运行命令
  

• npm run 命令是在实行 npm 脚本时使用的命令。npm 脚本是一组在 package.json 文件中界说的可实行命令。npm 脚本可用于启动应用程序，运行测试，生成文档等，还可以自界说命令以及设置需要运行的脚本。
  
• 在 package.json 文件中，scripts 字段是一个对象，其中包含一组键值对，键是要运行的脚本的名称，值是要实行的命令。例如，以下是一个简单的 package.json 文件：
  
  1. {
  2.         "name": "my-app",
  3.           "version": "1.0.0",
  4.     "scripts": {
  5.         "start": "node index.js",
  6.         "test": "jest",
  7.         "build": "webpack"
  8.     },
  9.     "dependencies": {
  10.         "express": "^4.17.1",
  11.         "jest": "^27.1.0",
  12.         "webpack": "^5.39.0"
  13.     }
  14. }

  复制代码
• scripts 对象包含 start、test 和 build 三个脚本：
  
  
  
  • 当您运行npm run start时，将运行node index.js，并启动应用程序
    
  • 运行npm run test时，将运行 Jest 测试套件
    
  • npm run build将运行webpack 命令以生成最终的构建输出
    
  
  
• 总之，npm run 命令为您提供了一种在package.json文件中界说和管理一组指令的方法，可以在项目中快速且机动地运行各种操纵
  

2.Vue3通过Vite实现工程化??

2.1 Vue3简介??

   Vue (发音为 /vju/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于尺度 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开辟用户界面。无论是简单照旧复杂的界面，Vue 都可以胜任。官网为:https://cn.vuejs.org/
Vue的两个核心功能：
  

• 声明式渲染：Vue 基于尺度 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  
• 响应性：Vue 会主动跟踪JavaScript状态并在其发生变化时响应式地更新DOM
  

   VUE作者:尤雨溪
  

• 尤雨溪（Evan You），毕业于科尔盖特大学，前端框架Vue.js的作者、HTML5版Clear的打造人、独立开源开辟者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量打仗开源的JavaScript项目，最后自己也走上了开源之路，现全职开辟和维护Vue.js
  
• 尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院得到Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。
  
• 尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，厥后读了美术设计和技术的硕士，正是在读硕士期间，他偶然打仗到了JavaScript，今后被这门编程语言深深吸引，开启了自己的前端生涯。
  

2.2 Vite的介绍

   在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开辟者以模块化的方式进行开辟。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开辟者的开辟体验
  

• 当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。
  
• 包含数千个模块的大型项目相当广泛。基于 JavaScript 开辟的工具就会开始遇到性能瓶颈：通常需要很长时间（以致是几分钟！）才能启动开辟服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，痴钝的反馈会极大地影响开辟者的开辟效率和幸福感。
  

   Vite 旨在使用生态体系中的新进展办理上述题目：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。https://cn.vitejs.dev/guide/why.html前端工程化的作用包括但不限于以下几个方面：
  

• 快速创建项目：使用脚手架可以快速搭建项目基本框架，避免从零开始搭建项目的重复劳动和繁琐操纵，从而节省时间和精力。
  
• 统一的工程化规范：前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范，让差异开辟者在同一个项目上编写出风格一致的代码，进步协作效率和质量。
  
• 代码模板和组件库：前端脚手架可以包含一些常用的代码模板和组件库，使开辟者在实现常见功能时不再重复造轮子，避免由于轮子质量不高带来的贫苦，可以或许更加专注于项目的业务逻辑。
  
• 主动化构建和部署：前端脚手架可以主动进行代码打包、压缩、归并、编译等常见的构建工作，可以通过集成主动化部署脚本，主动将代码部署到测试、生产环境等。
  

2.3 Vite创建Vue3工程化项目??

2.3.1 Vite+Vue3项目的创建、启动、停止??

   1 使用命令行创建工程
  

• 在磁盘的合适位置上,创建一个空目录用于存储多个前端项目
  
• 用vscode打开该目录
  
• 在vscode中打开命令行运行如下命令
  npm create vite@latest
  
• 第一次使用vite时会提示下载vite，输入y回车即可，下次使用vite就不会出现了
  
  
  
  
• 留意： 选择vue+JavaScript选项即可
  

   2 安装项目所需依赖
  

• cd进入刚刚创建的项目目录
  
• npm install命令安装基础依赖
  cd ./vue3-demo1
  npm install
  

   3 启动项目
  

• 检察项目下的package.json
  {
  “name”: “vue3-demo1”,
  “private”: true,
  “version”: “0.0.0”,
  “type”: “module”,
  “scripts”: {
  “dev”: “vite”,
  “build”: “vite build”,
  “preview”: “vite preview”
  },
  “dependencies”: {
  “bootstrap”: “^5.2.3”,
  “sass”: “^1.62.1”,
  “vue”: “^3.2.47”
  },
  “devDependencies”: {
  “@vitejs/plugin-vue”: “^4.1.0”,
  “vite”: “^4.3.2”
  }
  }
  npm run dev
  

> 5 停止项目 + 命令行上 ctrl+c
2.3.2 Vite+Vue3项目的目录结构

   1.下面是 Vite 项目结构和入口的详细说明：
  

• public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。
  
• src/ 目录：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开辟过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。以下是src内部划分建议：
  
  
  • assets/ 目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。
    
  • components/ 目录：用于存放组件相干的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在差异的场景中进行重复使用。
    
  • layouts/ 目录：用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等。
    
  • pages/ 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储差异的页面组件。
    
  • plugins/ 目录：用于存放 Vite 插件相干的文件，可以按需加载差异的插件来实现差异的功能，如主动化测试、代码压缩等。
    
  • router/ 目录：用于存放 Vue.js 的路由设置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据通报。
    
  • store/ 目录：用于存放 Vuex 状态管理相干的文件，负责管理应用程序中的数据和状态，方便统一管理和共享数据，进步开辟效率。
    
  • utils/ 目录：用于存放一些通用的工具函数，如日期处理函数、字符串操纵函数等。
    
  
  
• vite.config.js 文件：Vite 的设置文件，可以通过该文件设置项目的参数、插件、打包优化等。该文件可以使用 CommonJS 或 ES6 模块的语法进行设置。
  
• package.json 文件：尺度的 Node.js 项目设置文件，包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段界说几个命令，如 dev、build、serve 等，用于启动开辟、构建和启动本地服务器等操纵。
  
• Vite 项目的入口为 src/main.js 文件，这是 Vue.js 应用程序的启动文件，也是整个前端应用程序的入口文件。在该文件中，通常会引入 Vue.js 及其相干插件和组件，同时会创建 Vue 实例，挂载到 HTML 页面上指定的 DOM 元素中。
  

   2.vite的运行界面
  

• 在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可实行文件，大概直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：(package.json)
  {
  “scripts”: {
  “dev”: “vite”, // 启动开辟服务器，别名：vite dev，vite serve
  “build”: “vite build”, // 为生产环境构建产物
  “preview”: “vite preview” // 本地预览生产构建产物
  }
  }
  
• 运行设置端口号：(vite.config.js)
  //修改vite项目设置文件 vite.config.js
  export default defineConfig({
  plugins: [vue()],
  server:{
  port:3000
  }
  })
  

---

都看到这了，不妨一键三连再走吧！

**??欢迎和毛毛张一起探究和交流！
联系方式点击下方个人名片
**

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4