目录1:基于vite创建vue3工程1.1:什么是vite前端构建工具脚手架1.2:什么是npm包管理器1.3:什么是node.js能让 JavaScript 脱离浏览器运行的运行环境1.4:查看node和npm版本2:Vite构建项目2.1构建项目2.2进入项目、安装依赖、启动开发服务2.3项目打包上线2.4项目目录结构1:基于vite创建vue3工程1.1:什么是vite前端构建工具脚手架Vite法语原意快速读音 /viːt/是 Vue 作者尤雨溪开发的新一代前端构建工具专门用来开发 Vue、React、TS 网页项目解决旧工具Webpack启动慢、改代码刷新慢的痛点它由两大部分组成开发服务器dev本地写代码、实时预览页面速度极快打包工具build项目做完后压缩、优化代码输出上线文件对比项ViteWebpack项目启动毫秒级超大项目也快几秒几分钟文件越多越慢代码热更新极速局部刷新慢需重新构建模块配置极简开箱即用复杂需大量 loader 插件适用场景新项目、Vue/React 现代框架老旧项目、高度定制化工程比如我们写的person.vue浏览器执行不了ESModule import 导入各种库scss、ts 等等就需要vite构建工具转换成html、css和js。而 Vite 本身就是用 JavaScript 写的程序只能跑在 Node.js 环境里不能跑在浏览器。形象比喻.vue源码 原始手稿普通人浏览器读不懂。Node Vite 翻译官只能在电脑 (Node 环境) 工作把手稿翻译成普通人看得懂文字dist 里的 js/html。开发的时候翻译官实时翻译一边写一边看效果。打包翻译官一次性全部翻译完成输出成品 (dist)。上线直接把成品给用户看不再需要翻译官 (Node)。关键区分非常容易混淆开发阶段电脑本地运行 Vite✅必须 Node.js线上部署阶段服务器放 dist 静态资源❌不需要 Node.js用 Nginx 即可1.2:什么是npm包管理器npm node package manager中文Node.js 包管理器它是 JavaScript / 前端 的软件工具商店 安装管理工具专门用来下载、管理别人写好的代码库包。和 Node.js 的关系Node.js让 JS 能脱离浏览器、在电脑服务器运行的环境npm配套 Node.js 自带不用单独安装装 Node 就有 npm1.3:什么是node.js能让 JavaScript 脱离浏览器运行的运行环境Node.js 是一个能让 JavaScript 脱离浏览器运行的运行环境。以前 JS 只能在哪跑只能在浏览器里Chrome、Edge用来做页面交互、按钮点击、动画等前端页面功能。有了 Node.js 之后JS 可以直接跑在电脑、服务器上能做后端接口、文件读写、命令行工具、爬虫、小程序后端等。底层基于 Chrome 的 V8 引擎就是浏览器跑 JS 的内核外加一套操作系统底层 API文件、网络、进程。和 npm、Vite 的关系串联前面Node.js底层运行环境基础npm安装 Node 时自带的包管理器用来下载代码工具Vite、Vue、Axios 等Vite用 Node.js 写的前端构建工具必须装 Node 才能执行npm run dev启动项目1.4:查看node和npm版本node -v. npm -v 查看版本# 列出当前生效全部配置 npm config list # 查看完整默认配置非常多 npm config ls -l # 查看当前下载源镜像地址 npm config get registry # 全局设置淘宝镜像npmmirror npm config set registry https://registry.npmmirror.com # 切回官方源 npm config set registry https://registry.npmjs.org2:Vite构建项目2.1构建项目# 进入工作目录构建项目 npm create vitelatest2.2进入项目、安装依赖、启动开发服务# 进入项目文件夹 cd vue3demo1 # 安装所有依赖下载vue3、vite等包 npm install # 启动本地开发服务器 npm run dev启动成功后终端会给出地址http://localhost:5173/浏览器打开即可预览页面。2.3项目打包上线# 项目打包出现dist目录 npm run build # 打包完成可本地预览打包产物 npm run preview2.4项目目录结构