實習一年后,想做一個屬於自己的博客網站,准備用core api去搭建服務端接口,前端准備采用vue這樣的一個框架。本身時一個服務端程序員,所以來學習記錄一些vue的知識點,有什么不足的希望大家指正,謝謝!
這里關於vue的指令、組件、插槽一些基礎就不一一細細記錄了。
先從vue cli搭建開始吧。。。
vue cli:是vue的一款ui界面搭建的工具,簡單的來說就是通過腳手架去搭建一個正規的vue項目。在以往對前端打包工具中通常可以使用webpack進行模塊化打包,但是在這期間對前端打包過程中出現的問題可能是沒辦法預估的。
特別是在大型項目配置中,可能會出現許多的問題。那么vue cli幫助我們更好的去實習和創建vue的項目,至於怎么去打包目前這一塊正在學習中,先不做闡述。。。
vue cli:包括vue cli2以及vue cli3。這兩種在通過npm安裝的過程中命令有些不一樣。不過他們都是基於node以及webpack的,所以在安裝之前,需要確保本機以及成功安裝node以及webpack。
測試node是否安裝成功:node --v
測試webpack是否安裝成功:webpack --version
打開命令行界面(最好通過管理員身份打開,后續安裝vue cli的時候也是一樣,否則在安裝過程可能會報出一些文件權限的問題使得腳手架安裝不成功。)
安裝vue cli:npm install -g @vue/cli,安裝教程在官網也有:安裝 | Vue CLI (vuejs.org)
-g的意思是進行一個全局的安裝。
測試vue cli是否安裝成功:vue --version
由於此時安裝的vue cli是>3.x版本以上的,所以新版本覆蓋了vue cli2舊版的vue cli命令。當你想使用舊版本,也就是使用vue cli2的時候還需要安裝一個橋接工具。
安裝方法:npm install -g @vue/cli-init
當你安裝完成之后創建第一個vue項目可以通過命令:vue init webpack 項目名稱(自定義)
創建過程中需要選擇配置的東西
配置完成后通過:npm run dev 去進行啟動服務。
那這里是怎么去啟動服務的呢?
看到一個文件:
這里就通過dev里面的一個配置,然后去啟動一個本地的server服務,而當我們去執行一個編譯指令,就去通過build去打包一個build.js文件
這個就是通過我們腳手架去搭建了一個vue項目,這里是個默認的vue項目。
接下來我們去看看他是怎么去形成這樣一個界面的。。。
看到我們的入口文件,也就是main.js那個文件
這里的這個vue實際上是在我們創建vue項目的時候已經給我們配置好了,所以這里才能通過import進行一個導入的操作
所謂開發時依賴:就是在開發的過程需要依賴的一些配置 。。。運行時依賴則是在程序編譯運行的時候去依賴的配置。。。
既然存在vue依賴,所以我們就可以通過import進行導入,導入后就可以進行new vue操作。實際上el掛載的就是index.html里面的app div
還有個template的作用會將原來div app這一整個元素進行一個替換操作。
那這個<App/>來自哪里呢?
就是來自我們注冊的一個子組件:App中
注意:我在搭建vue項目過程中安裝了 ESLint 代碼檢測的配置,如果想要關掉它:
關於后再去測試也是可以正常編譯的