前端知识点汇总（持续更新自用）-优快云博客

本文链接：https://blog.youkuaiyun.com/bslydhs/article/details/118333546

本文深入介绍了前端开发中的HTML、CSS和JavaScript基础知识，包括flex布局、渐变背景、数组方法及Promise的使用。此外，还探讨了Vue框架中的vue.config.js配置，提供了一站式前端技术学习资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、html类

二、css类

flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

渐变色背景

线性渐变：

background-image: linear-gradient(to right , #7A88FF, #7AFFAF);

to后面可跟，top、bottom、left、bottom right

background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);

角度的值按顺时针方向旋转，因此，90deg 表示元素的右边（与 to right 相同），180deg 表示元素的底边（与 to bottom 相同），270deg 表示元素的左边（与 to left 相同）。

background-image: linear-gradient(to right, #E94E65, #15A892 20%, #A89215 80%, #1574A8);

色标的位置不一定要用百分比，也可以用像素或者em值。不过百分比是最灵活的，会随着元素的宽度或高度而变化

平铺的线性渐变

这种就是一根一根的线条交错

 background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 30px, #66CC99 40px);

径向渐变

径向渐变就是沿着圆周或者椭圆周向外扩散的渐变

background-image: radial-gradient(#99CCCC, #7171B7);

默认是椭圆的，如果加上circle就是按照圆形发散，关键字 at 后面加上 background-position 属性支持的定位关键字和数值，指定渐变中心的位置

 background-image: radial-gradient(circle,#99CCCC, #7171B7);
 background-image: radial-gradient(circle at 20% 20%, #99CCCC, #7171B7);

更多css渐变效果可以查看链接https://www.jianshu.com/p/58b340a037ea

三、js类

数组方法

reduce

array.reduce((accumulator, currentValue) => {
    accumulator + currentValue;
    return accumulator
}, {})

reduce的第一个参数为回调函数，第二个参数为第一个回调函数的accumulator参数的初始值。每个元素执行一个回调函数(升序执行)，将其结果汇总为单个返回值。

resove（）

反转整个数组，该方法修改原数组

shift（）

删除第一个元素并返回第一个元素的值，该方法修改原数组

`unshift()`

方法将一个或多个元素添加到数组的开头，多个元素用逗号隔开，并返回该数组的新长度，该方法修改原数组

`pop()`

方法从数组中删除最后一个元素，并返回该元素的值，该方法修改原数组

关于数组方法的更详细使用请查看https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

promise的理解与使用

promise是异步编程的一种解决方案，可以理解为一个容器，里面包含着一个未来才会结束的事件的结果。从js角度来说就是一个对象，从promise中获取异步操作的消息。

特点：（1）对象的状态不受外界影响，一共有三种状态【pending（进行中）、fulfilled（已成功）和rejected（已失败）】，只有异步操作的结果可以决定当前是哪一种状态

（2）一旦状态改变就不会再变，任何时候都可以得到这个结果，这个时候就是resolved（已定型），如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。

缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

先看一个例子：

四、vue相关

vue.config.js的编写

详情可进入https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE查看

module.exports = {
  publicPath: '/', // 当设置为./时，所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
  outputDir: 'dist', // 生产环境构建文件的目录
  indexPath: 'index.html', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  filenameHashing: true, // 如果无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希
  pages: {
    index: {
      entry: 'src/index/main.js', // page 的入口
      template: 'public/index.html',  // 模板来源
      filename: 'index.html',  // 在 dist/index.html 的输出
      title: 'Index Page',  // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ['chunk-vendors', 'chunk-common', 'index'],  // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk。
      tools: process.env.VAE_APP_TOOL_ENV === 'pre' ? '<script src="//baidu.com/index.min.js"></script>' : ''
    },
    subpage: 'src/subpage/main.js'  // 当使用只有入口的字符串格式时，模板会被推导为 `public/subpage.html`,并且如果找不到的话，就回退到 `public/index.html`,输出文件名会被推导为 `subpage.html`。
  },
  lintOnSave: 'default', //boolean | 'warning' | 'default' | 'error' 设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
  runtimeCompiler: false // Vue 组件中有 template 选项时如（new Vue({template: '<div>{{ hi }}</div>'})），但是这会让你的应用额外增加 10kb 左右
  transpileDependencies: [] //默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
  productionSourceMap: true //如果你不需要生产环境的 source map（记录转换后的代码的每一个位置，所对应的转换前的位置），可以将其设置为 false 以加速生产环境构建。
  crossorigin: undefined, // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。\
  configureWebpack: [], //webpack设置，详情可见https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
  chainWebpack: function, //是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
  devServer: {
    // open: true, // 是否自动打开浏览器页面
    // host: 'localhost',    // 指定使用一个 host，默认是 localhost
    // port: 8080,         // 端口地址
    proxy: {
      '^/baidu': {
        target: 'http://0.0.0.0:8088',
        changeOrigin: true,
        pathRewrite: {
          '^/baidu': ''
        }
      }
    }
  }
}