一、初步遇见项目

  • 确定项目目标：项目需求

  • 掌握技术要点(技术设计) | 技术 | 说明 | | —- | —- | | webpack | 项目编译器 | | babel | ES语法转换，兼容低版本 | | eslint | 代码质量检查 | | post-css | 压缩样式，样式浏览器兼容性处理 | | sass | 样式语法 | | 各种loader | 文件加载器 | | html-webpack-plugin | 自动注入打包后的资源文件到入口模板 | | eslint-plugin-vue | Vue官方提供的eslint插件 | | webpack-chain | webpack配置语法糖 |

  • 按照指定的计划一步一步实现

  • PRD（Product Requirement Document）

    • PRD文档中文意思是：产品需求文档

      二、从0搭建前端项目

  • 项目初始化

    • npm init -y 执行完命令之后会生成一个package.json文件

  • webpack配置

    • 是JavaScript应用程序的静态模块打包器

    • 安装Webpack依赖 | webpack | webpack核心库 | | —- | —- | | webpack-cli | webpack指令库 | | webpack-dev-server | webpack开发者服务框架 | | webpack-chain | webpack配置工具 |

    • 安装命令

      1. npm install -D webpack@5.11.0 webpack-cli@3.3.12 webpack-chain@6.5.1 webpack-dev-server@3.11.0 --legacy-peer-deps

    • 安装完成需要进行相关配置

      • 在package.json中声明dev和build脚本
      • 配置webpack的入口和出口【webpack.config.js】

  • Vue相关配置

    • 安装Vue相关依赖 | vue | vue源码 | | —- | —- | | vue-loader | .vue文件加载器 | | @vue/compiler-sfc | vue-loader用来解析sfc(Single-File-Component)的插件 |

    • 安装命令

      1. npm install vue && npm install -D vue-loader @vue/compiler-sfc

    • 安装完成需要进行相关配置

      • 修改webpack.config.js配置文件，让webpack支持编译解析.vue文件
      • 在src目录下创建App.vue文件
      • 修改src/main.js引入App.vue组件创建根组件并渲染
  • 解析CSS语法相关配置
    • 安装依赖
      • sass、sass-loader、postcss-loader、cssnano、autoprefixer、css-loader、mini-css-extract-plugin、url-loader、file-loader
    • 修改webpack.config.js脚本
    • 为了让postcss起作用，需要对postcss做配置
      • 项目根目录下创建postcss.config.js作为postcss的配置文件
        • 添加 autoprefixer 插件做自动添加样式前缀
        • 添加 cssnano 插件做 css 代码压缩
    • 为了让postcss的autoprefixer起作用，还需要创建.browserslistrc文件，告诉autoprefix插件，针对当前配置的浏览器需不需要添加适配前缀
  • babel配置
    • 安装依赖
      • @babel/core、@babel/preset-env、@babel/plugin-transform-runtime、babel-loader、core-js、@vue-bebel-plugin-jsx
    • 修改webpack.config.js脚本
    • 在项目根目录下创建babel.config.js配置文件，使得babel生效
  • eslint配置
    • eslint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。
    • 安装依赖
      • eslint、eslint-loader、eslint-plugin-vue
    • 修改webpack.config.js脚本
    • 要让eslint起作用，还需要给eslint添加配置文件.eslintrc.js，设置代码校验标准，创建.eslintignore文件，列出不需要校验的文件列表