2024年最新Vue2 项目重构为 nuxt(1)，前端高级工程师必备知识

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

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

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

此处需要注意，nuxt2 中使用的 less 和 less-loader 版本不能太高，高版本会直接报错。建议使用

• “less”: “^3.8.1”
• “less-loader”: “^4.1.0”

npm install less@3.8.1 less-loader@4.1.0 --sava-dev

1.2 使用 安装 @nuxtjs/style-resources 配置

同样，过高的版本会直接报错，建议安装

• “@nuxtjs/style-resources”: “^1.2.0”

在 assets/css 下定义 全局的 less 文件 common-style.less，定义了全局的主题色。

在 nuxt.config.js 中配置 modules 和 styleResources。完成以下配置之后，在common-style中定义的样式变量就可以在任何地方使用了

{
  modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    less: [
      './assets/css/common-style.less'
    ]
  }
}

1.3 变量定义和使用

在 assets/css 下定义 全局的 less 文件，定义了全局的主题色

@main-color: #278688;
@assist-color: #56b3c2;
@border: #d5d5d5;
@title-bg: #dedede;
@font: #333;

.common-drawer-header {
    padding: 15px;
    margin-bottom: 0;
    border-bottom: 1px solid @border;
    background-color: @main-color;
    color: #fff;
}

.common-dialog-header {
    padding: 15px;
**总结**:

*   函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

*   它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

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

> Tips:

> 其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

> 

> 我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 **优劣势**。

> 

> 理解和学习它们的理念与优势，合理地 **设计融合**，将优秀的软件编程思想用于提升我们应用；

> 所有设计思想，最终的目标一定是使我们的应用更加 **解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全**；