.net工程師學習vue的心路歷程(一)

CR7Ronaldo發表於2021-11-19

實習一年後,想做一個屬於自己的部落格網站,準備用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 程式碼檢測的配置,如果想要關掉它:

關於後再去測試也是可以正常編譯的

相關文章