cdd（component-driven development）：元件驅動開發
cdd 的好處：
視覺化測試
vue cli 提供的 快速原型開發
開發元件庫的最佳實踐方式：
monorepo
plop
lerna + yarn workspaces 的工作方式
jest
rollup
vue 中用於處理元件邊界情況的api（官方文件）：
$parent 獲取父元件
$children 獲取所有子元件
$refs 通過 ref 訪問特定元件
依賴注入 provide / inject
開發自定義元件時可能會用到這兩個屬性。
父元件給子元件設定的非 prop 屬性（沒有被props接收），缺省會繫結到子元件的根元素上。
如果是class或style，vue 會將其與子元件中原有的值合併。（props中也不允許設定這兩個屬性）
這些屬性中除了class和style，可以用 $attrs 獲取。
可以通過設定選項inheritattrs為false，取消這個預設繼承的行為（class和style還是會正常繼承合併）。
然後手動通過 $attrs 繫結屬性。
// 父元件
type
="text"
required
placeholder
="enter your name"
>
child
>
// 子元件
>
v-bind
="$attrs"
/>
或者:type
="$attrs.type"
:required
="$attrs.required"
:placeholder
="$attrs.placeholder"
/>
div>
它不會預設繫結到子元件的根元素，可以通過 $listeners 向內部元件傳遞。
// 父元件
@input
="oninput"
@change
="onchange"
@myevent
="onmyevent"
>
child
>
// 子元件
>
v-on
="$listeners"
/>
@onchange
="$listeners.change"
>
comp
>
div>
這個外掛程式必須全域性安裝，所以沒***所有機器上的版本一致（後面有其他的工具替換）
開發完元件後，使用vue serve快速檢視元件的執行效果
也可以指定要載入的入口檔案（元件）
除了從零開始開發自定義元件外，還可以在第三方元件的基礎上進行二次開發，例如基於element-ui 開發自己的元件。
# 如何匯入 elementui
? how do you want to import element? (use arrow keys)
import on demand # 按需匯入
# 選擇本地語言
? choose the locale you want to load (use arrow keys)
zh-cn
// /main.js
import vue from
'vue'
import elementui from
'element-ui'
import
'element-ui/lib/theme-chalk/index.css'
// login.vue中使用了elementui中的元件
import login from
'./src/login.vue'
vue.
use(elementui)
newvue
()
vue serve會自動生成index.html引入main.js。
基礎元件
業務元件
封裝vue元件庫，發布npm
元件庫的開發和平時專案中元件的開發過程是一樣的，不同的是元件庫作為乙個外掛程式使用，使用vue.use 註冊外掛程式。vue.use方法可以接收乙個函式，如果是函式會直接呼叫這個函式 可以傳入物件，傳入物件，會呼叫這個物件的install方法。vue規定外掛程式應該暴露乙個install方法。這個方...
vue如何封裝乙個元件
1.新增子元件 在工程src components目錄下新建乙個資料夾用於存放元件。我封裝了乙個樹元件，資料夾名稱為va tree,裡面有乙個va tree.vue檔案，寫了樹元件的具體內容，包括元件樣式 元件處理邏輯 元件模板等等 子元件中定義的props是父元件需要傳給子元件的資料，在子元件中p...
vue封裝乙個彈框元件
這是乙個提示框和對話方塊，例 取消 div div class kz btn click took 確定 div div div div template script export default took function script style scoped kz cont kz cont ...