好久不更帖子了，倒不是沒學新東西，是木有時間嗚嗚嗚。。。。。。這不最近得空，整理一下今日來的吐血經歷。其實上一年就接觸vue了，不過后來搞別的去了米有深入研究，現在又提槍殺了回來，，，步履維艱啊！！
雖說網上關於web開發的帖子浩如煙海，但天可憐見，對於我這樣的小白中的小白來說實在無從下手哇，，，遂把自己的血淚史記錄成冊，為天下各小小白提供一點幫助！加油加油沖沖沖！！！
一、環境
軟件安裝和環境配置可以參考網上各種資料，這里就不詳細展開了。只貼一下我的開發環境：
JDK：11
NodeJS：14.17.4
vue： 4.5.13
element-plus： 1.0.2-beta.70
springframework: 2.5.3
mybatis: 2.2.0
mysql: 8.0.26
IDE： vscode
首先的首先，要在電腦上安裝JDK（java運行環境）、vue、mysql，這沒毛病吧，其它的element-plus、spring、mybatis都是用npm安裝或者創建項目的時候配置的。
搭建好nodejs環境后，vue的安裝就一句話
npm install -g @vue/cli參考網頁
https://www.cnblogs.com/youqc/p/10898034.html
https://cli.vuejs.org/zh/guide/installation.html
二、概念
這個很重要，如果弄不明白這些東西是啥，那還搞啥？！網上各種關於spring、vue、mybatis概念的帖數不勝數，大家可以自己自行百度，人家那介紹的比我更詳細專業靠譜
所以我介紹啥，我介紹的是我自己的理解，從一個小小白角度出發對這些東西的摸索：
首先vue是前端開發框架，寫網頁界面的，element UI是一個框架/工具，包含了各種好看的圖標、組件，可以在vue中引用。spring是一個很diao的家族，可以干各種nb的事，springMVC是其名下的一個框架，springboot也是其下的一個框架/工具，mybatis是一個第三方的工具，用來跟各種數據庫通訊，可以方便地對各種數據庫對接。
首先vue是前端開發框架，寫網頁界面的，element UI是一個框架/工具，包含了各種好看的圖標、組件，可以在vue中引用。spring是一個很diao的家族，可以干各種nb的事，springMVC是其名下的一個框架，springboot也是其下的一個框架/工具，mybatis是一個第三方的工具，用來跟各種數據庫通訊，可以方便地對各種數據庫對接。
我要想實現的功能是這個樣子的，有一個頁面，然后點擊不同的按鈕實現不同的操作，如跳轉頁面、刷新表格、執行計算等等，還要能夠獲取數據庫的數據或者寫入數據。
功能划分是這樣：vue負責頁面的內容，即前端，它提出請求；spring那堆東西負責后台操作，即后端，它負責響應請求並作出反應。比如，vue里面一個按鈕點擊后向后台索要數據，后台spring那一套東西再從數據庫中取數據返給vue頁面，前端后端通過get或post方式完成交互。
對了，這里提一下，vue2中可以根據element文檔無縫調用，但是vue3中就不能直接用element了，需要用element-plus，然后某些語句要重新修改。這個很煩人，因為element還沒有針對vue3的文檔。你可能好奇為啥是vue3，我不是裝的vue4嗎，這個我也不知道，創建vue項目的時候，只有vue2和vue3這兩個選項。。。我選的當然是3，有新的為啥用舊的，唯一的問題就是vue2的帖子多，vue3的帖子少。。。
三、vscode
網上大多數教程都是用 IDEA、Eclipse 開發spring程序，然后用 webstorm 開發vue。我就不一樣了，我不想在電腦上裝兩個IDE，不是硬盤小，問就是不想，能用一個為啥要裝兩個！再三權衡后，我打算采用vscode開發這兩種項目，，，可是網上vscode的帖太少了。。。。
說一下vscode這個軟件，它不像是VS那種會自己建立一個完整的項目，你只需要選個文件夾就好了，vscode是一個輕量級的東西，啥意思，它依賴於各種插件，二者大概就是個組裝的與成品的區別，看一下你的組裝電腦和別人的成品電腦，，所以需要什么就裝什么插件，，
vue好像不用什么擴展，不過vscode右下角會提示一個vetur插件，我也不知道干啥的，裝就完事了；
用java寫程序，得裝個dextension pack for java；
開發springboot，得要個spring boot extension pack；
另外裝個 maven for java
springboot到底是干啥的呢，用它可以便捷的構建一個基於spring的程序，免去了自己從0開發spring程序的麻煩。maven又是啥呢，它可以便捷的構建和管理一個springboot項目，，，套娃嘛這不是，究極偷懶。你只需要知道，用springboot + vue就可以實現后端響應界面就行了，然后創建springboot項目用maven，就這樣
四、創建vue項目
vue項目可以直接用命令行創建，新建一個放項目的文件夾，然后命令行進去
vue create 項目名稱
就可以了，參考
https://cli.vuejs.org/zh/guide/creating-a-project.html。項目創建的時候有很多選項需要配置，其中包括要用的vue版本，我用的是vue3，其它配置就自行百度吧。創建的時候可以選擇幾個包，也可以不選，之后需要的話在vscode的命令行中直接用npm裝就行。
然后打開vscode，左上角 文件->打開文件夾，選擇剛才的項目文件夾就可以了（所以你看到了，
不是用vscode創建的vue項目，而vs是不會干這種事的），目錄大概長這樣
你的可能沒有 router、store這些個文件夾，其中router是跟路由相關的，store是跟vuex相關的。vue路由的概念很基礎很重要，自己查閱資料看一下，vuex可以理解為存儲全局變量的。
vue.config.js是自己添加的文件，用來進行一些配置，vue項目會自己讀取這個文件（一定要放對位置才行），並覆蓋默認網絡配置。這個文件怎么配置可以查到很多資料。
vue項目的創建還是比較簡單的，這里強調一下element-plus的引用，main.js內容如圖
注意第2行，你的項目中可能是 './App.vue'，這一句是調用初始vue頁面組件，我是自己寫了個App2組件
第5、6行引用的方式不用於vue2引用element；
另外，第13 14 15行是配置全局變量，vue3和vue2配置全局變量的方式不同，調用時也略有不同，vue3少了個 ‘$’ 符號;
你創建的main,js中，可能是 createApp(App).use().....mount('#app'); 這里可以看到我是創建了一個變量app去把createApp和use命令分開了，這是為了在中間定義全局變量。
全局變量在main.js中定義后，每個頁面都可以進行訪問。以 echarts 為例，頁面中創建圖表時，都要來一遍 import * as echarts from 'echarts' 的話就會很麻煩，定義了全局變量后就可以直接用 this.echarts，而不用每次都導入了。
五、創建springboot項目
創建springboot項目要比vue的復雜一些，主要是一些配置麻煩。前面說過了，用的是maven工具進行創建。
具體操作是在vscode的命令面板中搜索 spring，然后選擇 spring initializr : create a maven project，參考網頁
https://www.pianshen.com/article/6206135413/，同樣創建項目的時候也可以不選包，之后需要用的時候在 pom.xml 中進行配置（這次就不是用 npm裝了，跟vue不一樣），pom.xml 是maven用來管理項目依賴等的配置文件。
創建完成后的目錄大概長這樣
這個 servletInitializer.java是干啥的我也不知道，我創建項目的時候添加了 mybatis 和 spring boot devtools就有這個文件，一直沒動過這個文件。
你的項目可能沒有controller、config、dao、mapper、model這些東西，這些是我自己添加的。注意到左下角有個 MAVEN 選項卡，打開后就可以看到項目添加的依賴（與pom.xml中是一一對應的），在依賴上右鍵還可以更改版本，簡直不要太方便！
這樣項目就創建完成了，按F5就可以運行，好像沒什么東西，只有控制台打印了點東西是吧哈哈哈，因為啥也沒寫，當然沒東西。。。需要添加controller文件並編寫方法才可以，比如設定某個鏈接，然后返回“helloword”，
還是參考這個鏈接
https://www.pianshen.com/article/6206135413/，然后在瀏覽器輸入網址就可以看到 "Hello World" 啦
本篇到此結束，下面就記錄一些我遇到的坑啦~~