Vue+ElementUI+Springboot的基礎知識是什麼

一、舊世界的Web

後端

（1）剛開始，web後端基本上都是php寫的，腳本化的語言，嵌入到HTML裡面很方便。

（2）然後Java開始發力，JSP Servlet成為主流。

（3）發現Java又臭又長，開始把一些常用的思路封裝成類，於是Spring成長了起來，且具有兩個核心概念AOP切面、IoC控制反轉。這兩個思想簡直無敵。

AOP：例如，我們程式的每個地方都可能拋異常，以前每個地方都要try、catch十分繁瑣，且catch後的處理大同小異。如果有一個切面，把Web的出口攔截了，所有流量都會經過這個切面，一旦攔截到異常拋出，則返回對應的錯誤碼，這樣很多地方都只需要拋異常，不需要catch了，少些好多程式碼不說，還統一了異常處理的方式。這只是AOP最簡單的應用。

IoC：Spring提供了一個容器的概念，把所有需要實例化的類別都new出來一個對象，稱為Bean（類似豌豆裡面的本站），當類別A需要類別B的時候，就把管理的類B物件像擠本站一樣注入到類A裡面去。這樣解開了類別之間的耦合，想要什麼就拿什麼，彼此之間沒有前置的依賴關係，我獲得類A的時候不需要去管類A的建構方法裡面還需要先實例化一個類B、一個類別C…當然實際上類別之間有很多複雜的引用關係，實例化的先後順序以及依賴循環異常交給Spring來管理就好。

（4）由於人繼續變懶，Spring的XML也不想寫了，於是出了Springboot這種東西，口號是“約定大於配置”，把一些基本的參數都設定好了，如果不需要改的話直接引用pom就可以使用了，如果要改的話，只需要配置application.yml檔案裡面的可選參數就可以了，如果還想更深地自訂的話，就寫一個config bean就好了，所有的config bean和application.yml都會自動注入，不需要再寫XML說哪個bean所在的類別叫什麼名字，id是什麼，怎麼初始化等等。使用Jetbrains的IDEA整合開發環境，同寫Java會變得極為簡單，編碼量減少且易於維護。

（5）未來：肯定是Go的天下呀。

前端

（1）最開始：HTML CSS JS三大金剛

（2）發現JS滿足不了慾望了，想發展更方便腳本，於是Jquery出來了。

由於HTML含有太多重複的語句，因此JSP等前後端結合語言得以出現。 Thymeleaf現在仍可用於Springboot，它為後端開發者提供了專門向前端小白介紹的工具。

前端專家發現前端門檻太低，於是他們透過「元件」思維來管理重複的程式碼，提高門檻。例如我好不容易用HTML CSS JS寫了一個非常漂亮的Table，但是每次使用我都要複製所有的程式碼過去，有一點點改動就要改所有複製的地方。如果這個Table是一個元件，我只需要引用它，然後把資料傳給它，它就可以自動渲染成HTML，並引用相關CSS和JS，該有多好。另外，每次都要去考慮要相容什麼瀏覽器，多麻煩，如果有個腳本，輸入要支援哪些版本的哪些瀏覽器，用一種高階點的語言寫，然後編譯的時候會自動轉換成相容各種瀏覽器的原生HTML CSS JS，這樣不香嗎。這就出來了現代前端語言。現代前端語言的基礎是React，用JS編織一切。 React還是比較原生，所以在其之上衍生出了各種框架，出名的有Vue和Ant Design，它們封裝好了一些常用的思路，以及JS生成HTML這種基本操作。我真的想說，入門難度太高了…

二、打開新世界Vue的大門

#1、基本概念

• Node .js是一種JavaScript運行環境，旨在專門用於執行JavaScript程式碼。類似java -jar xxx.jar的指令，例如執行node xxx.js

• npm：node.js套件管理。類似Java的Maven和Gradle，JavaScript也有npm，用於版本控制和引用已經寫入的JavaScript程式碼。

• ES6：ECMAScript 6，就是javascript的新版本，比原生javascript更好寫。

• Babel：用來將ES6、ES7等進階版本js轉換為低階版本js語言，方便與各種運作平台相容的腳本

• vue-cli：就是vue的命令列工具

• vue-router：前端有個重要的概念叫做“路由”，其實就是管頁面URL怎麼跳轉的，這是vue的路由組件。

• webpack：將所有的前端專案程式碼打包和壓縮在一起，可以編譯高階語言（例如CSS的高階語言SCSS、LESS）、降低程式碼冗餘、按需載入文件，還可以區分多個環境配置，還可以壓縮圖片、字體等文件，還能熱加載（保存程式碼後立刻顯示到瀏覽器而無需重啟服務）

2, npm

##Configuration file content......Packaging generated directory disttarget

Comparison item	npm	maven
Warehouse name	registry	repository
Official warehouse	http://registry.npmjs.org	https://mvnrepository.com
domestic warehouse	https: //registry.npm.taobao.org	http://maven.aliyun.com/nexus/content/groups/public
Configuration File	package.json	pom.xml
	"dependencies" : {"vue": "^1.0.0"}

Because npm is very popular, npm

3 and Vue have been integrated in higher versions of node.js

Get a rough idea of ​​what vue is.

• Syntax: Vue is syntactically similar to the tag version of the JSP dynamic web page language, or very similar to themeleaf.

• Components: Everything in Vue is a component. You can encapsulate HTML CSS JS to customize a component.

• Routing: The essence is, what URL is given, what component should be returned.

• Some functions are encapsulated: for example, mounted can process content when the web page is loaded, data can define some variables and automatically render local components when they change, methods can define some js functions, etc. Wait

CSS can be written in languages ​​such as SCSS. You can add the scope keyword to limit the scope of css, and you only need to import to reference any other component. Defined Components can be written directly in the form of HTML tags, and parameters are passed through data, for example:

<mytitle></mytitle>

The core is to use high-level languages ​​to write HTML CSS JS more lazily...

4. element -ui

element-ui is a front-end UI produced by Ele.me. It has already set up some exquisite components. You only need to piece these components together into web pages without having to create one from scratch. One goes to write components.

These components, such as radio buttons, tables, progress bars, etc., are very beautifully designed and can be rendered simply by passing in data. If you think there is something unsightly, you can overwrite the CSS and replace it yourself. This is very convenient for mid-end pages and back-end pages that have strong functional requirements and do not care about interface design.

5. Why not use layui

Since I came into contact with the front-end, I have always used layui. Later I found that it is more suitable for optimizing the page display effect based on native HTML CSS JS/Jquery, but is not very compatible with the ideas of modern front-end languages. It comes with some preset jQuery initialization and event triggering methods, which are not compatible with Vue's writing method. In addition, some components such as tooltip and popover are not included.

以上是Vue+ElementUI+Springboot的基礎知識是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！