文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

  HTML 和静态资源

  HTML

  Index 文件

  public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。

  插值

  因为 index 文件被用作模板，所以你可以使用 lodash template 语法插入内容：

  • <%= VALUE %> 用来做不转义插值；
  • <%- VALUE %> 用来做 HTML 转义插值；
  • <% expression %> 用来描述 JavaScript 流程控制。

    除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。例如，BASE_URL 的用法：

    处理静态资源

    静态资源可以通过两种方式进行处理：

    • 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
    • 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

      从相对路径导入

      当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

      例如，url(./image.png) 会被翻译为 require('./image.png')，而：

      将会被编译到：

      h('img', { attrs: { src: require('./image.png') }})
      

      在其内部，我们通过 webpack 的 Assets Modules 配置，用版本哈希值和正确的公共基础路径来决定最终的文件路径，并将小于 8KiB 的资源内联，以减少 HTTP 请求的数量。

      URL 转换规则

      • 如果 URL 是一个绝对路径 (例如 /images/foo.png)，会原样保留。
      • 如果 URL 以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
      • 如果 URL 以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源：
        • 如果 URL 以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src。 (仅作用于模版中)

          public 文件夹

          任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。

          注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：

          • 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
          • 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
          • 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。

            public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：

            • 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：
              • 在模板中，你首先需要向你的组件传入基础 URL：

                data () {
                  return {
                    publicPath: process.env.BASE\_URL
                  }
                }
                

                然后：

                何时使用 public 文件夹

                • 你需要在构建输出中指定一个文件的名字。
                • 你有上千个图片，需要动态引用它们的路径。
                • 有些库可能和 webpack 不兼容，这时你除了将其用一个独立的

                  放在assets中

                  assets中，打包的时候会把图片经过webpack处理，把图片当做一个模块

                  • 在