结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

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

优点

• 方便复用
• 项目里需要用到的图表会有多个，实现少代码自动化导入，不需要一个个import
• 展示类的图表，数据与业务、样式分离，只传数据就行
• 图表可配置
• 本人图表用在大屏数据可视化的情况比较多，采用的是等比缩放的方式，所以图表也能根据界面缩放自动缩放，不需要手动调用

一、使用Vite创建Vue项目

1. 创建项目

接下啦就开始我们的学习吧！
1.首先创建一个文件夹，进入终端，一定要安装node ，查看我们的node版本

node -v

2.进入vite官网
☞Vite官方中文文档地址

点击开始就可以进入文档了

使用npm+vite

npm create vite@latest

使用yarn+vite

$ yarn create vite

2. 安装echarts

//npm 方式
 npm i echarts

二、创建echarts封装组件页面

1. 创建component/Charts.vue

<template>
  <div class="container" ref="container"></div>
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
import \* as echarts from 'echarts'
// 1.引入echarts
const container = ref(null);
const chart=ref(null)
// echarts实例保存在ref中


const props=defineProps({
 options:{
 // options是一个必须的属性
 required:true,
 type:Object,
 // 类型为对象
 default:{},
 // 默认值是空的对象
 }
})
// 4.这个时候chart组件虽然可以使用了，但是当options变化的时候图表不会刷新,我们这里可以watch对options进行监听，当options发生变化时，调用echarts.setoption更新配置，不过在watch不能访问onMounted中的echarts实例，这时候我们可以把echarts实例也保存ref中
onMounted(()=>{
 chart.value=echarts.init(container.value,"dark")
 chart.value.setOption(props.options);
 // dark深色主题
 // 2.定义一个ref来保存dom元素，ref中保存的元素到dom加载完成之后才会有值,所以需要在onMonMounted声明周期中获取它,因为这是dom已经加载完成了，获取到元素之后就可以以使用echarts.init进行初始化了，初始化之后会返回echarts实例
 // chart.setOption(props.options
 // )

 // 3.接着让Chart组件接受一个options属性，用于接收图表配置，在echarts初始化完成之后，把配置传给echarts实例
})

const{ options}= props
watch(options,(newOptions)=>{
 chart.value.setOption(newOptions)
},{
 deep:true
})
//5.watch中的代码很简单，就是调用echarts.setOption，把新的options的值传递进入就行了，watch第一个参数可以是一个ref，我们把options转成ref传递给它，第二个参数是处理函数，第二个参数接收俩个参数，分别是监听属性新变化的值和之前的值，我们把 新变化的值传递给echarts，这样就可以重新挥着图表了，第三个参数为是否深度对比，对于配置项这种嵌套比较多的对象需要设置爱喂喂喂true
</script>
<style scoped>
.container{
 width: 100%;
 height: 100%;
}
/\* css部分，给容器设置宽高为100% ，具体真水的宽高，让使用它的组件来设置，这里需要注意echarts要求必须使用宽高才能正常的绘制\*/
</style>

1. Charts作为基础组件，加载并初始化echarts的东西，并根据配置的变化更新图表
2. 在vue中获取dom元素需要使用template.ref’，在vue3中template.ref和响应ref合为了一体
3. 定义一个ref来保存dom元素，ref中保存的元素到dom加载完成之后才会有值,所以需要在onMonMounted声明周期中获取它,因为这是dom已经加载完成了，获取到元素之后就可以以使用echarts.init进行初始化了，初始化之后会返回echarts实例
4. 接着让Chart组件接受一个options属性，用于接收图表配置，在echarts初始化完成之后，把配置传给echarts实例
5. options是一个必须的属性,类型为对象 默认值是空的对象
6. 这个时候chart组件虽然可以使用了，但是当options变化的时候图表不会刷新,我们这里可以watch对options进行监听，当options发生变化时，调用echarts.setoption更新配置，不过在watch不能访问onMounted中的echarts实例，这时候我们可以把echarts实例也保存ref中
7. watch中的代码很简单，就是调用echarts.setOption，把新的options的值传递进入就行了，watch第一个参数可以是一个ref，我们把options转成ref传递给它，第二个参数是处理函数，第二个参数接收俩个参数，分别是监听属性新变化的值和之前的值，我们把 新变化的值传递给echarts，这样就可以重新挥着图表了，第三个参数为是否深度对比，对于配置项这种嵌套比较多的对象需要设置爱喂喂喂true
8. css部分，给容器设置宽高为100% ，具体真水的宽高，让使用它的组件来设置，这里需要注意echarts要求必须使用宽高才能正常的绘制
   存放数据

2. 创建图表配置文件(src/charts/xxxxOptions.js)

在src新建一个chars文件夹存放图表数据，在下方可以放一些柱状图折线图的配置js文件
**注意：**配置可以导出一个函数，以后可以传递参数和自定义的配置项
图表配置=>echarts官网找到

// 图表配置=>echarts官网找到
// 我们这里可以导出一个函数，以后可以通过传递参数和自定义的配置项
export default function LineChartOption(){
  return{
      title: {
        text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };


### 文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。



这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



**269页《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)

技术点。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)