本文共 1691 字,大约阅读时间需要 5 分钟。
来源 | https://xueyuanjun.com/post/21941
开始之前,需要添加 Bootstrap 到 Vue CLI 项目,由于目前所有前端资源都已经通过 NPM 进行管理,所以需要安装对应的依赖包:
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'...
接下来,就可以正式编写单文件组件了。
我们将 vue_learning/component/slot.html 中的 modal-example 组件拆分出来,在 vue_learning/demo-project/src/components 目录下新建一个单文件组件 ModalExample.vue,将 modal-example 组件代码按照 Vue Loader 指定的格式填充到对应位置:
除了父级作用域传入的 languages 数据结构有所调整外,其他都保持一致,相信有了前面的铺垫,看懂上面的组件代码对你而言已经不是什么难事。
接下来,我们在 App.vue 中引入 ModalExample 组件:
...
{ { this.title }} { { bodyProps.language.name }} ☑️
我们将之前的 HelloWorld 组件调整为 ModalExample 组件,可以看到,这里只是按照 Vue Loader 单文件组件规范重新编排了代码,主体逻辑和之前混合在 HTML 文档中的组件注册并没有什么差别。
需要指出的是,Vue CLI 项目在通过 npm run serve 命令启动服务时,会附带开箱即用的模块热重载(Hot Module Replacement),所以 src/main.js 及其依赖的任意 JavaScript 代码(包括单文件 Vue 组件)调整并保存后,会自动进行重新编译打包。
因此,在浏览器刷新 http://localhost:8080 页面,就可以看到如下页面渲染结果:
点击「模态框」按钮,可以看到弹出的模态框如下,和之前渲染的效果完全一致:
这同时也验证了 Bootstrap 框架已经成功引入。
当然,这只是一个功能非常简单的单文件 Vue 组件,接下来,学院君会陆续基于 Vue 组件实现一些更加复杂的功能,比如交互表单、单页面应用等。
本文完~
推荐阅读
转载地址:http://hdbpi.baihongyu.com/