一、單頁面應(yīng)用程序

單頁面應(yīng)用程序（英文名：Single?Page?Application）簡?稱 SPA，顧名思義，指的是一個 Web?網(wǎng)站中只有唯一的?一個 HTML?頁面，所有的功能與交互都在這唯一的一個頁面內(nèi)完成。

二、vue-cli?腳手架

什么是腳手架

vue?-cli?是 Vue.js?開發(fā)的標(biāo)準(zhǔn)工具。它簡化了程序員基于webpack?創(chuàng)建工程化的 Vue?項目的過程

引用自 vue?-cli?官網(wǎng)上的一句話：程序員可以專注在撰寫應(yīng)用上，而不必花好幾天去糾webpack?配置的問題

?安裝和使用

1、腳手架基于?node?下才可安裝

node?-v???檢測?node?版本（安裝成功，?自帶?npm?工具）

npm??install ??-g cnpm

-?-registry=https://registry.npm.taobao.org

注意：npm?安裝失敗建議先用?npm?安裝一下?cnpm?用淘寶鏡像安裝

2、安裝腳手架

vue?-cli2.x

np?m?i vue?-cli?-g

vue?-cli3.x

npm?install?-g?@vue/cli

注： 兩個版本不能同時存在

卸載：

np?m un?vue?-cli?或?@vue/cli

驗證：vue?-cli?安裝成功 vue???-V

3、利用?vue?-cli?搭建項目

Vue??in?it???模板名稱 項目名稱（1.x ???2.x）

Vue??create??項目名稱 ?（3.x??4.x）

4、啟動開發(fā)環(huán)境 ???Npm????serve

vue?項目的運行流程

在工程化的項目中，vue?要做的事情很單純：通過 main.js把 App.vue?渲染到 index.html?的指定區(qū)域中。

其中：

①?App.vue?用來編寫待渲染的模板結(jié)構(gòu)

② index.html?中需要預(yù)留一個 el?區(qū)域

③ main.js?把 App.vue?渲染到了 index.html?所預(yù)留的區(qū)域中

三、組件化開發(fā)

> 什么是組件化

組件化開發(fā)指的是：根據(jù)封裝的思想，把頁面上可重用的 UI

結(jié)構(gòu)封裝為組件，從而方便項目的開發(fā)和維護。

vue?是一個支持組件化開發(fā)的前端框架。

vue?中規(guī)定：組件的后綴名是 .vue。之前接觸到的

App.vue?文件本質(zhì)上就是一個 vue?的組件

使用組件

.?組件開發(fā)三步曲：聲明、注冊、使用（不搭腳手架）

組件的使用事項：

1.組件必須要有一個根元素

2.當(dāng)組件在使用中，標(biāo)簽中不需要嵌套東西可以使用單標(biāo)簽

3.在組件復(fù)用的時候，就使用雙標(biāo)簽

組件開發(fā)三步曲：聲明、注冊、使用

①?vue?組件的三個組成部分：（搭腳手架）

每個 .vue?組件都由 3?部分構(gòu)成，分別是：

template?->?組件的模板結(jié)構(gòu)

script?->?組件的 JavaScript?行為

style?->?組件的樣式

其中，每個組件中必須包含 template?模板結(jié)構(gòu)，而 script行為和 style?樣式是可選的組成部分。

②?vue?組件的使用

聲明組件、注冊組件、使用組件

③?通過?components?注冊的是私有組件

通過?components?注冊的是私有子組件

④?全局組件

在vue項目的main.js入口文件中，通過vue.component()方法，可以注冊全局組件

組件中的?props

①?什么是?props

props是組件的自定義屬性，在封裝通用組件的時候，合理地使用props可以極大的提高組件的復(fù)用性!

②?prop?是只讀屬性

要想修改props的值，可以把props的值轉(zhuǎn)存到data中，因為data中的數(shù)據(jù)都是可遺可寫的!

③?prop?的默認(rèn)值?default

在聲明自定義屬性時，可以通過defau性來定義屬性的默認(rèn)值。

④?prop?的?type?值類型

在聲明自定義屬性時，可以通過1ype來定義屬性的值類型

Required?的意思時誰用我這個組件就必須要傳遞?init?的值，如果不傳就會報錯