【Vue.js入門(mén)到實(shí)戰(zhàn)教程】11-Vue Loader（下）| 編寫(xiě)一個(gè)單文件 Vue 組件

來(lái)源 |?https://xueyuanjun.com/post/21941

引入 Bootstrap 框架

npm install bootstrap jquery popper.js

然后在 src/main.js 中引入 Bootstrap 的腳本和樣式文件：

import Vue from 'vue'import App from './App.vue'import 'bootstrap'import 'bootstrap/dist/css/bootstrap.min.css'
...

接下來(lái)，就可以正式編寫(xiě)單文件組件了。

編寫(xiě) ModalExample 組件

我們將 vue_learning/component/slot.html 中的 modal-example 組件拆分出來(lái)，在 vue_learning/demo-project/src/components 目錄下新建一個(gè)單文件組件 ModalExample.vue，將 modal-example 組件代碼按照 Vue Loader 指定的格式填充到對(duì)應(yīng)位置：

除了父級(jí)作用域傳入的 languages 數(shù)據(jù)結(jié)構(gòu)有所調(diào)整外，其他都保持一致，相信有了前面的鋪墊，看懂上面的組件代碼對(duì)你而言已經(jīng)不是什么難事。

注冊(cè) ModalExample 組件

接下來(lái)，我們?cè)?App.vue 中引入 ModalExample 組件：

...

我們將之前的 HelloWorld 組件調(diào)整為 ModalExample 組件，可以看到，這里只是按照 Vue Loader 單文件組件規(guī)范重新編排了代碼，主體邏輯和之前混合在 HTML 文檔中的組件注冊(cè)并沒(méi)有什么差別。

驗(yàn)證單文件組件渲染

需要指出的是，Vue CLI 項(xiàng)目在通過(guò) npm run serve 命令啟動(dòng)服務(wù)時(shí)，會(huì)附帶開(kāi)箱即用的模塊熱重載（Hot Module Replacement），所以 src/main.js 及其依賴(lài)的任意 JavaScript 代碼（包括單文件 Vue 組件）調(diào)整并保存后，會(huì)自動(dòng)進(jìn)行重新編譯打包。

因此，在瀏覽器刷新 http://localhost:8080?頁(yè)面，就可以看到如下頁(yè)面渲染結(jié)果：

點(diǎn)擊「模態(tài)框」按鈕，可以看到彈出的模態(tài)框如下，和之前渲染的效果完全一致：

這同時(shí)也驗(yàn)證了 Bootstrap 框架已經(jīng)成功引入。

當(dāng)然，這只是一個(gè)功能非常簡(jiǎn)單的單文件 Vue 組件，接下來(lái)，學(xué)院君會(huì)陸續(xù)基于 Vue 組件實(shí)現(xiàn)一些更加復(fù)雜的功能，比如交互表單、單頁(yè)面應(yīng)用等。

本文完~

推薦閱讀

【Vue.js 入門(mén)到實(shí)戰(zhàn)教程】10-Vue Loader （上）| 基于 Vue CLI 初始化原型項(xiàng)目

【Vue.js 入門(mén)到實(shí)戰(zhàn)教程】09-Vue 組件插槽 | 父子組件間的內(nèi)容分發(fā)和插槽作用域

【Vue.js 入門(mén)到實(shí)戰(zhàn)教程】08-Vue 組件通信 | 父子組件之間的數(shù)據(jù)傳遞和事件監(jiān)聽(tīng)

【Vue.js 入門(mén)到實(shí)戰(zhàn)教程】07-Vue 組件注冊(cè) | 基本使用和組件嵌套