Vue.js 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，在目前的前端開放中比較流行的前端框架。
Vue 被設(shè)計(jì)成自底向上的逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層行楞，不僅易于上手，還便于與第三方庫或已有項(xiàng)目整合土匀。但是學(xué)習(xí) Vue.js 需要一定的 HTML子房、CSS、和 JavaScript 基礎(chǔ)恒削，所以本章節(jié)將不對(duì)這些基礎(chǔ)內(nèi)容進(jìn)行講解池颈。
Vue的組件化開發(fā)
目前的前端開發(fā)中組件化開發(fā)成為了潮流，而所謂的組件化開發(fā)就是把頁面拆分成多個(gè)組件钓丰，最后將每一個(gè)組件進(jìn)行羅列躯砰，形成我們看到的網(wǎng)頁。
例如：百度的首頁携丁，可以簡(jiǎn)單的分為以下圖中的四個(gè)組件
先將這四塊的組件開發(fā)完成之后琢歇，再將這些組件組裝成一個(gè)完整的頁面兰怠。
1.在維護(hù)網(wǎng)頁時(shí)，不需要在一個(gè)大的頁面中去修改李茫，而是去對(duì)應(yīng)的組件中去修改數(shù)據(jù)揭保。
2.組件的資源是獨(dú)立的，可以提高每個(gè)模塊的重用性魄宏。比如上圖的搜素框秸侣，在首頁使用到了，在其他的地方也要用到同樣的搜索框宠互，就可以原封不動(dòng)的將組件拿過來直接用味榛。
3.組件之間可以相互嵌套。
環(huán)境介紹和準(zhǔn)備
這里選用的是 vscode予跌，其他編譯器也可搏色，vscode 下載地址：https://code.visualstudio.com/。
vscode 插件的選擇：
- JavaScript (ES6) code snippets：包含 VSCode 的 ES6 語法中的 JavaScript 代碼段券册。
- Vetur：VSCode 支持 VUE 的工具频轿，有語法高亮、格式化烁焙、錯(cuò)誤檢查航邢、自動(dòng)完成等功能。
- （推薦）Auto Close Tag：自動(dòng)添加 HTML/XML 結(jié)束標(biāo)簽考阱。
- （推薦）Auto Rename Tag：自動(dòng)重命名對(duì)應(yīng)的 HTML/XML 標(biāo)簽翠忠。
- Highlight Matching Tag：突出顯示匹配的開始和結(jié)束標(biāo)簽鞠苟。
這些只是推薦需要用到的插件乞榨，可以根據(jù)自己的愛好進(jìn)行選擇，其他的插件也可以当娱。
組件庫
隨著 Vue 的流行吃既，其他公司也形成了自己獨(dú)有的組件庫，比如 ElementUI跨细、BootstrapVue鹦倚、Vuetify，這些組件可都是可以拿來直接使用的冀惭，這里體現(xiàn)出了 Vue 組件化開發(fā)的優(yōu)勢(shì)震叙。
- ElementUI：https://element.eleme.io/#/
- BootstrapVue：https://bootstrap-vue.org/
- Vuetify：https://vuetifyjs.com/zh-Hans/
這里主要使用的組件庫是 vuetify。
比如項(xiàng)目中需要一個(gè)按鈕時(shí)散休，就可以到對(duì)用的組件下面找到它媒楼，將代碼拿出來即可，里面有各式各樣風(fēng)格的組件：https://vuetifyjs.com/en/components/buttons/
Vue.js安裝
1戚丸、通過下載 Vue.js 包
使用 <script> 標(biāo)簽進(jìn)行引入划址， Vue 會(huì)被注冊(cè)為全局變量。
<script src="../vuejs/vue.js"></script>
2、在線引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
指定一個(gè)明確的版本進(jìn)行使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
這是一個(gè)更小的構(gòu)建夺颤，可以帶來比開發(fā)環(huán)境下更快的速度體驗(yàn)痢缎，但是在用 Vue 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用世澜。同時(shí) Vue 也提供配套工具來開發(fā)單文件組件独旷。
npm安裝Vue
環(huán)境準(zhǔn)備：本次使用的 node 和 npm 的版本是
C:\Users\16478>node -v
v12.15.0
C:\Users\16478>npm -v
6.13.4
安裝命令
npm install -g @vue/cli
C:\Users\16478>vue --version
@vue/cli 4.5.12
大家先把環(huán)境安裝好，有的環(huán)境后寥裂，下一篇我們接著說Vue.js框架的使用哦~
喜歡軟件測(cè)試的小伙伴們势告，如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容抚恒，請(qǐng) “點(diǎn)贊” “評(píng)論” “收藏” 一鍵三連哦咱台！
