BuildAdmin01：我和前端

初遇前端

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

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

纸上得来终觉浅

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

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

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

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

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

BuildAdmin

1. 项目文档

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

代码仓库地址：https://gitee.com/wonderful-code/buildadmin

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

从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的项目架构以及代码开发。