Vue 项目开发环境与辅助工具部署
13010
画布
|大纲
内容详情
Node.js 基础
概念速览
- 定义
- JavaScript 运行时
- 基于 Chrome V8 引擎
- 脱离浏览器即可执行 JS
- 统一前后端语言栈
- 脱离浏览器即可执行 JS
- 基于 Chrome V8 引擎
- JavaScript 运行时
- 核心能力
- 事件驱动
- 非阻塞 I/O
- 单线程 + 工作线程池
- 高并发场景优势
- 适合 I/O 密集型而非 CPU 密集型
- 高并发场景优势
部署流程
- 版本选择
- LTS（长期支持版）
- Current（最新特性版）
- 推荐生产环境使用 LTS
- 稳定性 + 社区维护周期长
- 推荐生产环境使用 LTS
- 安装方式
- 官方安装包（Windows/macOS）
- 包管理器（Homebrew、Chocolatey）
- 版本管理器（nvm、fnm）
- 多版本共存切换
- 避免全局冲突
- 多版本共存切换
- 验证安装
- node -v
- npm -v
- 输出版本号即成功
- 若失败检查环境变量 PATH
- 输出版本号即成功
模块系统
- CommonJS 规范
- require() 导入
- module.exports 导出
- 同步加载适合服务端
- 缓存机制提升性能
- 同步加载适合服务端
- ES Module 支持
- type: "module"
- import/export 语法
- 官方实验特性 → 正式稳定
- 与前端构建工具无缝衔接
- 官方实验特性 → 正式稳定
- 核心模块
- fs、path、http、events…
- 无需安装直接引用
- 提供底层系统能力
- 无需安装直接引用
- fs、path、http、events…
创建首个应用
- 步骤 1：初始化项目
- npm init -y
- 生成 package.json
- 记录依赖与脚本
- 生成 package.json
- npm init -y
- 步骤 2：编写入口文件
- app.js
- 示例：启动 HTTP 服务
- 监听 3000 端口返回 Hello Vue
- 示例：启动 HTTP 服务
- app.js
- 步骤 3：运行
- node app.js
- 访问 http://localhost:3000
- 验证环境正常
- 访问 http://localhost:3000
- node app.js
npm 包管理器
- 角色定位
- 官方默认仓库
- 全球最大开源库生态
- 超 200 万包
- 前端工程化基石
- 超 200 万包
- 镜像加速
- 淘宝/腾讯云镜像
- nrm 一键切换
- 解决国内下载慢
- 安装后测速选最优源
- 解决国内下载慢
npm 进阶
常用命令速查
- 依赖管理
- npm install
- npm i -D
- npm uninstall
- npm update
- –save / –save-dev 已默认
- 锁定版本用 package-lock.json
- –save / –save-dev 已默认
- 脚本执行
- npm run
- npm start / test
- 自定义脚本提升效率
- 串行 & 并行：npm-run-all
- 自定义脚本提升效率
- 发布包
- npm login
- npm publish
- npm version patch
- 语义化版本规范
- 2.1.3 → major.minor.patch
- 语义化版本规范
Node.js 环境配置
- 全局路径
- npm config set prefix
- 将全局模块 bin 加入系统 PATH
- 避免 sudo 安装
- macOS/Linux 推荐 ~/.npm-global
- 避免 sudo 安装
- 环境变量
- NODE_ENV=production
- 区分开发与生产
- webpack/Vite 读取优化
- 压缩、源映射、调试开关
- webpack/Vite 读取优化
- .nvmrc
- 项目级版本锁定
- nvm use 自动切换
- 团队协作统一
- CI/CD 镜像直接复现
- 团队协作统一
webpack 打包体系
定位与演进
- 模块打包器鼻祖
- 2012 年发布
- 解决浏览器不支持模块化
- 当下仍是企业级首选
- 生态成熟插件丰富
- 当下仍是企业级首选
- 现代替代品
- Vite（开发阶段 ESM + esbuild）
- Turbopack（Rust 重构）
- webpack 5 引入持久化缓存
- 缩短冷启动追赶竞品
- webpack 5 引入持久化缓存
使用与基本配置
- 核心概念
- 入口 entry
- 输出 output
- 加载器 loader
- 插件 plugin
- 模式 mode
- 最小可运行配置 10 行
- 默认支持 JS/JSON
- 最小可运行配置 10 行
- 配置方式
- webpack.config.js
- 导出对象或函数
- 环境函数可返回差异化配置
- 合并策略 webpack-merge
- 环境函数可返回差异化配置
配置加载器
- 处理 CSS
- style-loader + css-loader
- MiniCssExtractPlugin 抽离
- 生产环境独立文件
- 并行加载提升渲染
- 生产环境独立文件
- 处理 Vue
- vue-loader
- @vue/compiler-sfc
- 单文件组件热重载
- 搭配 Vue3 ＜script setup＞
- 单文件组件热重载
- 处理 TypeScript
- ts-loader / babel-loader
- fork-ts-checker-webpack-plugin
- 类型检查并行
- 避免编译速度拖累
- 类型检查并行
配置插件
- 资源优化
- HtmlWebpackPlugin
- TerserWebpackPlugin
- CssMinimizerWebpackPlugin
- 自动注入哈希
- 长效缓存策略
- 自动注入哈希
- 分析工具
- webpack-bundle-analyzer
- speed-measure-webpack-plugin
- 可视化体积与耗时
- 定位冗余依赖
- 可视化体积与耗时
配置开发服务器
- webpack-dev-server
- 热模块替换 HMR
- 代理转发 devServer.proxy
- 无刷新更新样式/组件
- 解决本地跨域
- 无刷新更新样式/组件
- 进阶方案
- webpack serve + middleware
- 结合 Express 自定义路由
- 模拟后端接口
- 提升联调效率
- 模拟后端接口
Vue CLI 脚手架
安装与升级
- 全局安装
- npm i -g @vue/cli
- 检查 vue –version
- 要求 Node.js ≥ 12
- 4.x 对应 Vue3 默认
- 要求 Node.js ≥ 12
- 升级策略
- npm update -g @vue/cli
- 项目内升级 vue upgrade
- 提供交互式差异对比
- 自动改写配置文件
- 提供交互式差异对比
创建 Vue 项目
- 命令行模式
- vue create my-app
- 预设 Default / Manually
- 可选 Babel、TS、Router、Vuex、ESLint
- 保存预设供后续复用
- 可选 Babel、TS、Router、Vuex、ESLint
- 目录结构
- public/ 静态资源
- src/ 源码
- tests/ 单元测试
- 零配置即可运行
- 隐藏 webpack 细节
- 零配置即可运行
可视化创建
- Vue UI
- 终端输入 vue ui
- 图形化依赖管理
- 拖拽安装插件
- 实时查看脚本日志
- 拖拽安装插件
- 功能面板
- 仪表盘：构建速度、包体积
- 配置：webpack 链式修改
- 任务：serve/build/lint
- 新手友好
- 一键导出性能报告
- 新手友好
插件生态
- 官方插件
- @vue/cli-plugin-pwa
- @vue/cli-plugin-e2e-cypress
- 零代码集成工作箱
- 自动生成 manifest、service-worker
- 零代码集成工作箱
- 社区插件
- vue-cli-plugin-element-plus
- vue-cli-plugin-vite (实验)
- 无缝切换构建引擎
- 渐进迁移降风险
- 无缝切换构建引擎
环境模式
- 默认模式
- development
- production
- test
- 对应 .env.* 文件
- 仅 VUE_APP_ 前缀暴露
- 对应 .env.* 文件
- 自定义模式
- staging
- electron
- 通过 –mode 指定
- 合并基础配置覆盖
- 通过 –mode 指定
构建优化
- 拆包策略
- splitChunks
- runtimeChunk
- 第三方库长效缓存
- 避免重复打包
- 第三方库长效缓存
- 体积分析
- vue-cli-service build –report
- 生成 stats.json
- 配合 webpack-analyzer
- 精准删除未用依赖
- 配合 webpack-analyzer