前言
作為Java程序員，vue3還是有必要學的，畢竟是國內最受歡迎的前端JS框架，你現在接手的項目，前端部分幾乎都會和vue沾邊，尤其是中小企業。
vue3作為新的大版本，相較于vue2改動還是很多的，目前企業中很多新項目的前端實際上已經是以vue3為主了。
比如我所在的互聯網公司，前端人員均已經在用vue3來搭建所有的新項目。
vue3中的 Composition Api 實際上很多地方可以用Java的思維來理解，所以Java程序員學習vue3還是挺適合的。
我推薦學會了vue3基礎的Java工程師，嘗試搭建自己的后臺管理模板，這是提高vue3熟練度最快的方式。
正文
1、學TypeScript？
為什么單獨講下這個，主要是我自己作為多年的Java工程師，學習TypeScript的一點感受，不吐不快。
這語言看著真的很難受，就像是刻意拼湊的四不像語言，也許前端人員看著挺好，但作為Java工程師，實在是學的如鯁在喉。
另外，我們公司的前端今年也沒有在新項目中使用TS了，用他的話說，一些中小項目用了反而添麻煩，不如不用。
所以純粹是我個人對Java工程師的建議，TypeScript就先別花那么多時間學了，了解下就好，姑且學學vue3就夠了。
2、搭建后臺架子
我去年學習vue3，在學會了基礎語法后，就嘗試搭建一個后臺管理模板，選用的是Naive-UI。
因為公司本身前端用的都是ElementPlus，所以自己學習就想換個口味。
我把模板大體分為幾個部分：外層架子，菜單組件，頭部組件，標簽頁組件。
后臺模板的架子大概是這樣，包含了菜單、頭部、主體內容，這就是架子的基本結構，主體內容也就是根據路由動態加載的頁面。
3、菜單組件
左側菜單組件，使用 Composition Api 的方式來搭建，其實沒那么難，按照Java的方式來理解就行。
如圖所示，那么組件中引入的類又是長什么樣呢？
其實拆解來看，就是Java類一樣，包含變量、方法、初始化操作等等。
最后，把獲取的結果return出去，是不是理解起來清晰多了。
4、頭部組件
頭部組件，其實和菜單組件的做法沒啥區別了，直接往里套就行。
頭部組件，主要實現了面包屑功能，以及路由跳轉。
5、標簽頁組件
標簽頁是屬于頭部組件的一部分，但是也拆解為一個小組件。
這里面，實現了用cookie來緩存標簽頁列表。
實現了新增標簽的方法
實現了關閉標簽的方法
實現了選中標簽的觸發事件，以及選中菜單后路由的監聽事件，目的是切換菜單時標簽跟著變化，切換標簽時菜單也跟著變化的效果。
6、全局守衛
這個是我覺得挺常用的功能，前置守衛和后置守衛。
用Spring的方式理解，就是AOP里面的切面。
7、router-view
一開始搭的架子里面，主體內容的router-view中其實就是要加載的頁面，如圖所示。
8、最終效果
總結
其實我就是單純搭建了一個后臺管理的模板，很多功能都沒有實現。
比如退出、表單表格等常用組件的展示、標簽頁的優化等等，都沒做，因為我覺得單純學習vue3，到這一步也就夠了。
至于做的更完美，那就純看個人興趣了。
我主要想以Java工程師的角度來講述如何學習前端的一些東西，希望對后端程序員尤其是Java程序員學習前端有所啟發。
至于模板的代碼，都在git上，直接去下載了自己練習即可，想繼續完善也可以。
Gitee：https://gitee.com/fangfuji/java-share
如果喜歡，↓↓↓可以點贊關注下哦，持續分享干貨！
