大数据毕业设计之前端01：我的前端之路

ゞ浴缸里的玫瑰 2024-02-18 11:46 55阅读 0赞

![ee094b5a9fcc7b97d37e473bd9c51fe6.jpeg][]

### 初遇前端 ###

初次接触前端还是2016年，那一年暑假心血来潮，在网易云课堂上学着前端三剑客（html、js、css）。18年毕业，把用各色水笔手写的花花绿绿笔记寄回家里，投身奔赴后端与大数据开发的征程。

遥记18年的毕业设计，是在网上找了个模板，用bootstrap和jQuery改造了几个前台展示页面，这也是唯一曾经“上过台面”的前端项目。

### 纸上得来终觉浅 ###

工作之后学完大数据开始学习vue，看完视频教程、做完笔记，自我感觉笑问天下谁敌手，什么都会了。直到有一天，真的想要做一个前端项目的时候，想改一下从网上找的模板，才发现无从下手。

还记得在javaweb接触项目的时候，前端和Java后端代码放在了一个项目里。后来再学前端，已经走上了**前后端分离**的道路。又开始学Node，Vue、Vue-Router，笔记依旧记得满当。当真的去开发一个项目的时候，这些组件该怎么用，用在什么地方都不知道。

有一天，在ElementUI的网站上，看到了*BuildAdmin*开源项目，于是开始打算从项目入手。先了解项目中的技术，然后通过官网深入学习。

在拆解还原BuildAdmin的过程中，虽然很多地方都是用了项目中的代码，但是我都是研究学习并了解其中含义之后才会使用。包括这块代码属于哪个模块，哪里引用了这些代码，实现原理是什么等等，我在文章中都有体现。

![a9ad5d9862d6eb56b3955c87f96636ca.png][]

这是我从BuildAdmin学习前端中做过的笔记，包括项目中用到的技术栈、对各个模块实现的拆解，以及开发中遇到的问题等等，在走走停停的学习过程中，回头看有些许收获。

### BuildAdmin ###

#### 1. 项目文档 ####

项目文档：[https://wonderful-code.gitee.io][https_wonderful-code.gitee.io]

代码仓库地址：[https://gitee.com/wonderful-code/buildadmin][https_gitee.com_wonderful-code_buildadmin]

先看BuildAdmin的源代码和文档。同时在项目文档中，可以直接跳转到演示网站。

![afbd35716f491e9cbc60ce0a3756fa4c.png][]

从gitee上的源代码看，整个项目分为前端和后端，前端用的Node和Vue的技术栈，后端使用的*PHP*吧你，后端打算用Java或者Node替换掉，这里只关注一下前端技术。

#### 2. 前端技术选型 ####

BuildAdmin基于Node，项目使用了vite构建工具，我用的是webpack。主要使用的技术如下，可以进入各自的官网直接学习。

###### 1. [Vue3][] ######

好久之前学的是Vue2，现在Vue3提供了很多简便的语法糖，例如setup等，同时提供了组合式API的开发模式，省去了很多代码。

###### 2. [Element Plus][] ######

UI框架使用Element Plus，布局、菜单、icons等都囊括其中，官方文档提供了完整样例代码。

###### 3. [Vue-router][] ######

路由使用Vue-router，实现菜单的动态路由等功能

###### 4. [pinia][] ######

BuildAdmin用pinia来实现状态管理，本来打算使用*VueX*，后来换成Pinia，其实大同小异。

###### 5. [TypeScript][] ######

JS语言，而且ES语法要用*babel*编译器。

###### 6. [Axios][] ######

向后台发起异步请求，例如菜单列表、权限等数据。

###### 7. [SCSS][] ######

CSS预处理器，这里选择**Sass**,我刚开始使用的Less，后来又学的Sass，与原生css不同的是，可以定义变量、逻辑运算等。

### 结语 ###

作为前端之路的开篇，主要讲了自己学习前端的一些经历，以及后面的学习思路和技术选型。其中涉及的前端技术，在项目开始之前可以去官网，了解一下基本功能，后面可以跟着项目的实践来深入学习。

下一篇开始讲BuildAdmin的项目架构以及代码开发。

![20210519233121183.png][]

[ee094b5a9fcc7b97d37e473bd9c51fe6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/ac4e64dd48bf47158b1c270c2a0572b9.png
[a9ad5d9862d6eb56b3955c87f96636ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/1d4962a605a0407e8789499840a3f1e1.png
[https_wonderful-code.gitee.io]: https://wonderful-code.gitee.io
[https_gitee.com_wonderful-code_buildadmin]: https://gitee.com/wonderful-code/buildadmin
[afbd35716f491e9cbc60ce0a3756fa4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/c3ef3c2e97b34c7fa2844e07f0d01ba0.png
[Vue3]: https://cn.vuejs.org
[Element Plus]: https://element-plus.org/zh-CN
[Vue-router]: https://router.vuejs.org/zh
[pinia]: https://pinia.vuejs.org/zh
[TypeScript]: https://www.tslang.cn/docs/home.html
[Axios]: http://www.axios-js.com/zh-cn/docs
[SCSS]: https://www.sass.hk/docs
[20210519233121183.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/5efdefabd6454048984268e04ee707d7.png