Vue打包工具(构建工具)和脚手架过程

一、什么是Vue打包工具(构建工具)

在学习之前请确保你已经安装了node.js,且你的node.js版本在20以上。

比如我们的代码有ES6高级语法，TS语法，Less语法，Sass语法。这些直接在浏览器中跑，浏览器不认识。我们的以前的解决办法就是通过插件(Less)或者包(TS)把这些语法转为JS语法解决浏览器不认识这些语法的问题。

比如：我们的使用TS,Less一起开发开发，Less通过Easy Less插件生成对应css样式，Ts通过安装ts-node包执行tsc --init 指令会生成对应js语法，然后我们需要把生成的js文件和css文件整和到html中进行使用。这太麻烦有没有一种方式我们只需要下载对应的包，然后直接帮我们生成html+Css+JS的工具呢。

答案当然是有的：Vue打包工具(Webpack,Vite)。

二、Webpack和vue-cli

一般Vue2项目常用Webpack作为打包工具,vue-cli作为其脚手架。成熟稳定，适合复杂场景，兼容Vue3

下面使用vue-cli创建Webpack项目

2.1 全局安装脚手架

使用npm安装

# 不加版本号时默认会安装最新稳定版本
​​npm install -g @vue/cli

# 安装 Vue CLI 3.x 及以上版本
npm install -g @vue/cli@5.0.8  # 示例

# 安装 Vue CLI 2.x 版本（如 2.9.6）
npm install -g vue-cli@2.9.6    # 注意包名区别

卸载

npm uninstall -g @vue/cli  # 卸载 Vue CLI 3.x+  
npm uninstall -g vue-cli   # 卸载 Vue CLI 2.x（旧版） [3,6](@ref)

查看vue-cli脚手架版本

vue --version
# 输出结果：@vue/cli 5.0.8

注意 不同版本的脚手架创建的项目目录可能不一样。可指定vue-cli脚手架版本之后，再去创建。

2.2 创建项目

2.2.1 指定目录创建项目

基于 vue-cli 快速生成工程化的 Vue 项目：vue create 项目的名称

注意：我是基础vue-cli脚手架为5.0.8创建的,你最好也是安装5.0.8 否则和我的安装步骤可能不一样。

• 第一步，打开你要创建的目录，比如打开day3_code文件夹
• 第二步，在文件上方搜索栏输入cmd 回车

2.2.2 选择自定安装

• 第三步 选择要安装哪些东西。

vue create demo-first 
// 使用上下箭头改变下面三个选项  回车表示选中
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)  //这个是安装Vue 3
  Default ([Vue 2] babel, eslint)  //这个是安装Vue 2
> Manually select features         //这个是手动选择你要安装那个功能，一般选这个

2.2.3 选择你要安装的功能

上下箭头代表移动，空格代表选中，回车代表继续。

这里选中Babel 和CSS Pre-processors就行。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel   //这是解决js兼容性，必须安装                
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support  // 渐进式的web
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors  //CSS预处理器  按下空格键前面小括号有个星号代表选中安装
 ( ) Linter / Formatter  // 先不选 这个是约束团队写代码的风格。如果不是规定风格就会报错
 ( ) Unit Testing
 ( ) E2E Testing

选项功能详解​​

Babel​​

• ​​作用​​：将 ES6+ 语法转换为浏览器兼容的 ES5 代码，支持现代 JavaScript 特性（如箭头函数、解构赋值）。
• ​​适用场景​​：需兼容旧浏览器（如 IE11）或使用实验性 JS 语法时必选。
• ​​默认启用​​：Vue CLI 预设模板已勾选。

​​TypeScript​​

• ​​作用​​：集成 TypeScript 支持，提供静态类型检查和增强代码可维护性。
• ​​启用后配置​​：需选择是否使用类风格组件语法、是否与 Babel 共存（推荐共存以支持 JSX 转译）。
• ​​适用场景​​：中大型项目或团队协作开发。

​​Progressive Web App (PWA) Support​​

• ​​作用​​：添加离线缓存、推送通知等 PWA 特性，提升 Web 应用原生体验。
• ​​启用后配置​​：自动生成 service-worker.js和 Web App Manifest 文件。
• ​​适用场景​​：需离线访问或安装到用户设备的应用（如移动端网页）。

​​Router​​

• ​​作用​​：集成 Vue Router 库，实现单页应用（SPA）的路由管理。
• ​​启用后配置​​：选择是否使用 History 模式（需服务器支持，否则默认 Hash 模式）。
• ​​适用场景​​：多页面跳转或需动态路由的项目。

Vuex​​

• ​​作用​​：集成 Vuex 状态管理库，实现跨组件数据共享与响应式更新。
• ​​适用场景​​：复杂状态交互（如用户登录状态全局管理）。

​​CSS Pre-processors​​

• ​​作用​​：支持 Sass/SCSS、Less 或 Stylus 等 CSS 预处理器，增强样式编写效率。
• ​​启用后配置​​：选择具体预处理器（推荐 Sass/SCSS with dart-sass）。
• ​​适用场景​​：需嵌套语法、变量或 Mixin 等高级样式功能。

​​Linter / Formatter​​

• ​​作用​​：集成代码规范工具（默认 ESLint），强制统一代码风格并自动格式化。
• ​​启用后配置​​：
• 选择校验规则（如 ESLint + Prettier兼顾错误检查与自动格式化）。
• 选择触发时机（Lint on save保存时检查 / Lint and fix on commit提交时修复）。
• ​​适用场景​​：团队协作或需代码质量管控的项目（​​强烈建议启用​​）。

​​Unit Testing​​

• ​​作用​​：集成单元测试框架（默认 Jest 或 Mocha），验证组件/函数逻辑正确性。
• ​​启用后配置​​：选择测试框架（Vue CLI 推荐 Jest）。
• ​​适用场景​​：需高可靠性的核心功能模块。

​​E2E Testing​​

• ​​作用​​：集成端到端测试工具（如 Cypress），模拟用户操作验证完整业务流程。
• ​​适用场景​​：关键路径测试（如用户注册、支付流程）。

2.2.4 选择安装vue的版本

选择2.x版本

? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x

2.2.5 选择css预处理器

下面全是css预处理器，选择sass即可

Vue CLI v5.0.8
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Less
  Stylus

2.2.6 选择配置文件的存储位置

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files # 选这个独立配置
  In package.json

​​In dedicated config files（独立的配置文件）​​

​​含义​​：为每个工具（Babel、ESlint 等）创建单独的配置文件，例如：

• Babel → babel.config.js或 .babelrc
• ESLint → .eslintrc.js或 .eslintrc.json

​​特点​​：

• ​​清晰分离​​：每个工具的配置独立存放，结构清晰，便于维护。
• ​​功能完整​​：支持更复杂的配置（如条件判断、动态导入），适合中大型项目。
• ​​工具兼容性​​：部分工具（如编辑器插件）默认优先读取独立配置文件。

​​In package.json（集成到 package.json）​​

​​含义​​：将配置直接写入 package.json文件的特定字段中，例如：

• Babel → package.json中的 babel字段
• ESLint → package.json中的 eslintConfig字段

​​特点​​：

• ​​集中管理​​：所有配置集中在 package.json，减少文件数量，适合小型项目。
• ​​简化结构​​：避免项目根目录被大量配置文件占据，保持简洁。

2.2.7 是否保存上面选项

如果我们保存就说明下一次还是和上面一样的选择就可以直接创建不需要在选择了。这里选择N

? Save this as a preset for future projects? (y/N)

可以在C:\Users\86184\.vuerc查看你的预设。如果不想要可以删除这个

2.2.8总结

2.3 运行​​

• 第四步：使用VSCode或者Trae CN打开项目。不同版本Vue-Cli创建的目录可能不同但是大概都是一样的。

打开vscode的终端，执行一下指令

npm run serve   # 启动开发服务器（基于 webpack-dev-server）

2.4 打包

打包前在 vue.config.js中添加 publicPath: ‘./’，强制资源使用相对路径：

// vue.config.js
module.exports = {
  publicPath: './' // 关键配置
}

打开终端执行一下命令

npm run build   # 生产环境打包（输出到 dist/ 目录）

多了一个dist文件夹，这就是打包之后的东西。

我们双击index.html就可以运行了。

三、Vite和create-vue

一般Vue3项目常用Vite作为打包工具,create-vue作为其脚手架。开发体验快如闪电，配置更轻量，可兼容Vue2项目

下面使用create-vue创建Vite项目

3.1 一键创建项目​​（无需全局安装）

3.1.1 指定目录创建项目

基于 vue-cli 快速生成工程化的 Vue 项目：vue create 项目的名称

• 第一步，打开你要创建的目录，比如打开day3_code文件夹
• 第二步，在文件上方搜索栏输入cmd 回车

3.1.2执行指令

我使用的vite的7.0.6版本。

使用的create-vue脚手架版本是3.18.0。

可以通过指令npm view create-vue versions 查看create-vue脚手架有哪些版本

npm create vue # 等价于npm create vue@latest 显式指定最新版本
npm create vue@3.8.0 # @3.8.0明确指向的是 create-vue脚手架工具自身的版本

3.1.3 输入项目名称

3.1.4选择功能

*  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
|  [ ] TypeScript
|  [ ] JSX 支持
|  [+] Router（单页面应用开发）
|  [ ] Pinia（状态管理）
|  [ ] Vitest（单元测试）
|  [ ] 端到端测试
|  [ ] ESLint（错误预防）
|  [ ] Prettier（代码格式化）

JSX 支持​​

• ​​作用​​：允许在 Vue 组件中使用 JSX 语法（类 React 的 JavaScript 语法扩展）。
• ​​​​适用场景​​：​​需要高度动态的模板逻辑（如复杂条件渲染）。​​团队有 React 开发背景，习惯 JSX 风格。​​​​注意​​：Vue 默认推荐模板语法，JSX 需手动配置 Babel 插件。

​​TypeScript​​

• ​​​​作用​​：集成 TypeScript 静态类型检查，提升代码健壮性。
• ​​​​推荐场景​​：​​中大型项目、团队协作开发。​​需要严格类型约束的公共组件库。
• ​​​​成本​​：需学习 TS 语法，增加初期配置复杂度。

Router（单页面应用开发）​​

• ​​​​作用​​：集成 Vue Router，实现 SPA 路由管理（动态路由、导航守卫等）。
• ​​​​必选场景​​：​​多页面应用（如后台管理系统、电商网站）。​​需实现页面跳转、路由懒加载等功能。​​​​替代方案​​：若项目仅单页可跳过（如纯展示页）。

​​Pinia（状态管理）​​

• ​​​​作用​​：轻量级状态管理库（替代 Vuex），支持响应式数据共享。
• ​​​​推荐场景​​：​​跨组件状态共享（如用户登录信息、全局主题）。​​复杂数据流管理（如购物车、实时数据看板）。
• ​​​​注意​​：小型项目（无共享状态需求）可不选。

​​Vitest（单元测试）​​

• ​​​​作用​​：基于 Vite 的极速单元测试框架（兼容 Jest API）。
• ​​​​推荐场景​​：​​核心工具函数/组件逻辑需高覆盖率验证。​​开源项目或企业级应用。
• ​​​​成本​​：需编写测试用例，增加开发时间。

​​端到端测试​​

• ​​​​作用​​：集成 Cypress 或 Playwright，模拟用户操作验证全流程。
• ​​​​适用场景​​：​​关键业务流程测试（如用户注册、支付流程）。​​对稳定性要求极高的生产系统。
• ​​成本​​：配置复杂，适合中后期项目追加。

ESLint（错误预防）​​

• ​​​​作用​​：代码质量检查（如变量未使用、隐式类型转换）。
• ​​​​强烈推荐​​：所有项目均应启用，避免低级错误。
• ​​​​典型规则​​：no-unused-vars, no-console。

​​Prettier（代码格式化）​​

• ​​​​作用​​：自动格式化代码（缩进、引号、分号等），统一团队风格。
• ​​​​推荐组合​​：​​与 ESLint 搭配使用（选 ESLint + Prettier配置）。​​避免手动调整代码格式冲突。

3.1.5 选择试验

截止到2025年8.11日 尤玉溪团队刚刚推出他们公司(voidzero)新推出的技术Oxlint和Rolldown-Vite。

这里可以不选直接回车。

• Oxlint：极速代码检查（替代 ESLint）快 50–100 倍
• ​​Rolldown-Vite​：极速生产构建（替代 Rollup）快 3–16 倍

​​3.2 安装依赖与启动​​

剩下的这些就是上面的vue2的一样了。

cd my-vite-project
npm install
npm run dev  # 冷启动 <1 秒（原生 ESM 按需加载）
npm run build  # 生产构建（Rollup 优化，输出 dist/）

四、总结

• Webpack 使用的脚手架是vue-cli 需要全局安装。
• Vite 使用的脚手架是create-vue 不需要全局安装。

这两个工程化开发首选Vite，因为vite​​按需编译​​速度快。

未来趋势已明显倾向于 Vite 为核心的 create-vue。

大家想要自己从0-1搭建Webpack，请看我发的文章：从0-1搭建webpack的前端工程化项目

学习了Webpack从0-1的构建可以类比Vite

其实这一块从0-1的构建可以学也可以不学，只要会用就行。学完这个有助于你更加深刻的理解底层原理。

现在2024年10月份尤雨溪创建了公司voidZero，这个公司旨在解决前端开发中的碎片化和配置复杂以及性能问题。VoidZero的技术布局是分为底层工具链(Oxc_parser、oxLint、OxcFormatter等等)和上层应用工具(RollDown打包工具用于替代esbuild)。预计2025年下半年可以提供给用户使用。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论