Kenis Blog

简体中文

English

简体中文

English

Appearance

标题备选 ​

  1. Vue 实战基础：前端实战：使用 eslint + prettier 清理 Vue 2 老项目的 💩 山，关键知识点一次梳理
  2. 手把手梳理 前端实战：使用 eslint + prettier 清理 Vue 2 老项目的 💩 山：从概念到项目使用
  3. 前端实战：使用 eslint + prettier 清理 Vue 2 老项目的 💩 山学不顺？先把这些基础点打通

摘要 ​

这篇文章适合 Vue 技术栈学习者，围绕「前端实战：使用 eslint + prettier 清理 Vue 2 老项目的 💩 山」整理关键概念、使用步骤和项目实践要点，方便复习和实战对照。

正文 ​

哈喽大家好👋 我是程序🦍kk。把复杂知识掰成大白话讲明白，是我一直以来的小追求✨；打好基础才能稳步进阶，是我始终秉持的学习理念～

📢 我搭建了5000人程序猿专属学习交流群 群内会同步前端开发/全栈开发/Web3开发/远程工作等干货资源 关注我并回复 加群 ，就能加入交流圈啦🚀

前言 ​

Vue 技术栈看起来上手快，但真正写项目时，基础概念一定要稳。

组件通信、状态管理、工程配置这些知识点，单独看都不复杂，串到项目里就很容易混。

这篇围绕「前端实战：使用 eslint + prettier 清理 Vue 2 老项目的 💩 山」做一次结构化整理，适合大家复习时对照查看。

知识点整理 ​

下面进入正文。建议大家边看边对照自己的项目结构，很多知识点放到组件里会更好理解。

如果你现在维护的是 Vue 项目，可以对照看一下组件通信和状态管理是否已经形成固定写法。

在维护老项目时，代码质量往往是一个令人头疼的问题。尤其是 Vue2 项目，随着时间推移，代码可能会变得越来越难以维护。本文将分享一个渐进式的迁移方法，结合 eslint 和 prettier，将老项目的 💩 山逐步清理干净。

为什么不直接在旧项目中配置？ ​

直接在旧项目中安装和配置 eslint + prettier 是一个非常麻烦的过程。老项目可能存在各种历史遗留问题，比如复杂的 webpack 配置、不规范的代码风格等，直接改动可能会导致项目无法运行。因此，我们采用一种更安全、渐进的方式来完成清理工作。这样也可以一边在老代码上进行开发任务，一边在另一个文件夹里清理 💩 山，最后再把代码合并。

迁移步骤 ​

1. 创建一个新的空项目 ​

使用 vue-cli 创建一个新的空项目。在创建项目时，根据老项目的实际情况手动选择配置，Vue2 + eslint + prettier 是必选项。这样可以确保新项目的代码规范和工具链是最新的。

bash
vue create new-project

2. 迁移核心文件 ​

将老项目中的以下核心文件复制到新项目中：

  • vue.config.js
  • main.js
  • App.vue

然后运行以下命令检查代码规范：

bash
npm run lint

这一步可以帮助我们快速发现核心文件中的代码问题。

3. 渐进式迁移组件和代码 ​

接下来，逐步将老项目中的组件和其他代码复制到新项目中。在每次迁移代码时，运行 npm run lint 对迁移的代码进行检查和修复。

这种渐进式的迁移方式可以有效避免一次性迁移带来的问题，同时确保迁移的代码符合 eslint 和 prettier 的规范。

4. 运行项目并根据需要配置 Webpack 和 Babel ​

在迁移过程中，可能会遇到一些运行时问题，比如：

  • 图片地址解析
  • URL 代理
  • 其他自定义 loader

此时可以结合 AI 工具（如 ChatGPT）来快速生成或调整 Webpack 和 Babel 的配置。例如，添加图片地址解析的配置：

js
// filepath: vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit: 10000,
        name: "img/[name].[hash:7].[ext]",
      });
  },
};

5. 完整迁移并整体检查 ​

当新项目可以正常运行后，将老项目的所有代码迁移到新项目中。为了避免不必要的代码干扰，可以通过配置 .eslintignore 忽略一些暂时不需要 lint 的文件：

plaintext
# filepath: .eslintignore
node_modules/
dist/

old_src/

然后运行以下命令对所有代码进行整体检查和修复：

bash
npm run lint

6. 迁移回老项目 ​

当新项目的代码清理完成后且运行没有报错后，将规范化的代码迁移回老项目中，覆盖原有的 💩 山。此时需要多次测试，确保功能正常。同时，根据项目需求调整 eslint 规则，进一步优化代码质量。

清理后的收益 ​

  • 代码更易维护：清理后的代码符合统一的规范，阅读和修改更加方便。
  • 包体积更小：通过清理无用代码和优化配置，打包后的文件体积可能会显著减少。
  • 团队协作更高效：统一的代码规范减少了团队协作中的摩擦。

总结 ​

通过以上步骤，我们可以在不影响老项目运行的情况下，逐步清理代码，最终将老项目的 💩 山变成一座整洁的花园。虽然这个过程需要一定的时间和耐心，但最终的收益是值得的。希望本文对你有所帮助！

写在最后 ​

好啦，今天的分享就到这里！

💬 互动时间：

你现在项目里更常用 Vue2 还是 Vue3？如果想看组件通信、Vuex/Pinia 或工程化配置的实战拆解，可以留言。

最后，感谢你看到这里👏

如果喜欢这篇内容，不妨顺手给小编安排一波👇 点赞👍｜转发📲｜推荐❤️｜评论📣

要是想第一时间蹲到新内容推送，记得给我点个星标⭐️

更多干货内容正在持续填坑中，咱们下期见👋

标签建议 ​

Vue、前端基础