当前位置：首页 > news >正文

前端-项目工程化（快速理解并会用）

news 2025/4/18 7:54:21

先理解

项目工程化= 用系统化的方法和工具，把代码变成一个可维护、可协作、可上线的完整项目。

项目工程化的目标：把“写页面”变成“做产品”。

项目工程化包括：

①模块化

②自动化：自动构建、打包、热更新

③规范化：eslint代码规范等

会用

理解脚手架：一个可以快速创建vue项目的架子，集成了webpack配置，可以开箱即用、零配置。

安装脚手架的命令： npm install -g @vue/cli

以下是使用vue create project-name命令方式创建一个项目的步骤，详细介绍了各种配置选择说明与推荐。

1. 执行命令

vue create my-vue-project

首次运行，会提示你：

Please pick a preset:
❯ default (Vue 3) ([Vue 3] babel, eslint)default (Vue 2) ([Vue 2] babel, eslint)Manually select features

2. 选项详解（逐步讲解你该怎么选）

1. 选择预设（Preset）

你有三个选择：

选项	说明	适合情况
default (Vue 3)	快速创建 Vue 3 项目	想尝试 Vue 3，功能需求不多
default (Vue 2)	快速创建 Vue 2 项目	要用 Vue 2，如 Element UI 项目
Manually select features	自定义配置	想选择 TypeScript、Vuex、Router 等

👉推荐：选择 Manually select features，更有掌控感，适合长期项目。

2. 选择功能模块（features）

接下来会弹出类似这样的多选菜单：

Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

各项说明

功能模块	说明	是否建议勾选
Babel	转译 ES6+ 语法，兼容旧浏览器	✅ 必选（默认）
TypeScript	使用 TS 写 Vue	视你需求而定
PWA Support	支持离线缓存、安装成 App 的功能	❌ 初期可跳过
Router	Vue Router 路由功能	✅ 建议勾选
Vuex	状态管理工具（Vue3 可用 Pinia 替代）	✅ Vue 2 项目建议勾选
CSS Pre-processors	是否使用 SCSS / Less 等	✅ 建议勾选（选 SCSS）
Linter / Formatter	ESLint + Prettier，强制代码风格统一	✅ 建议勾选
Unit Testing	单元测试（Jest）	❌ 初学者可跳过
E2E Testing	端到端测试（Cypress）	❌ 可跳过

👉 常见选择组合：

✔ Babel
✔ Router
✔ Vuex
✔ CSS Pre-processors
✔ Linter / Formatter

3. 选择 Vue 版本

  3.x
> 2.x

是否使用history模式

Use history mode for router? (Requires proper server setup for index fallback in production)

这个是问你是否用 history 模式：

Yes：URL 比较干净（推荐）
No：URL 带 #

👉 一般选 Yes（除非你部署在不支持 history 的服务器）

选n代表使用hash模式

接着会问：

Pick a CSS pre-processor
❯ Sass/SCSS (with dart-sass)LessStylus

👉 推荐选：Sass/SCSS

4. 选择 Linter（代码规范）

Pick a linter / formatter config:
❯ ESLint with error prevention onlyESLint + Airbnb configESLint + Standard configESLint + Prettier

👉 推荐选：Standard config标准风格

然后它会问你保存时自动格式化吗：

Pick additional lint features:
(*) Lint on save
(*) Lint and fix on commit

👉 默认勾选即可，帮助你统一风格。

5. 配置保存

最后它会问你：

Where do you prefer placing config for Babel, ESLint, etc.?
❯ In dedicated config filesIn package.json

👉 推荐选：In dedicated config files，把配置文件生成到单独的文件中，更清晰易管理。

然后：

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

👉 选 N 即可（也可以保存为自己的一套模板）。

另外总结

从0创建一个前端项目，记住以下创建方式就ok了

命令	框架版本	构建工具	配置丰富	适合谁
`vue create <project-name>`	Vue 2 / 3	webpack	✅ 丰富	要求全套功能、传统项目
`npm create vue@latest`	Vue 3	Vite	✅ 适中	官方推荐方式，主流 Vue 3 项目
`npm init vue@latest`	Vue 3	Vite	✅ 适中	和上面 `npm create` 等价，只是更传统，适配npm 6+
`npm create vite@latest`	Vue 3 / React等	Vite	❌ 精简	轻量项目、探索性项目、非 Vue 专属