VUE集成Bootstrap开发

Bootstrap是丰富展现能力的前端框架,Bootstrap与JQuery集成非常成熟和易用,VUE DOM数据操作框架是几年推出的,其数据模式与Dom组件双向绑定为开发者提供很大便利性,Bootstrap与VUE的集成框架bootstrap-vue,其官网是https://bootstrap-vue.js.org/,但从功能丰富性方面考察,bootstrap-vue相对Bootstrap+JQuery来说,前台展示功能并不太丰富,我猜测可能是bootstrap很多功能还没有完全移植到bootstrap-vue上面,伴随bootstrap-vue版本升级,功能会日臻完善的。

学习任何框架,最佳实践是首选搭建开发和调试环境,在不断研究在线文档和自己推断中摸索学习。下面首先搭建开发环境

1、搭建Eclipse开发环境

下载最新Eclispe开发工具
VUE集成Bootstrap开发_第1张图片

2、在Eclipse上安装CodeMix插件,用于开发VUE工程

VUE集成Bootstrap开发_第2张图片

3、安装NodeJS

下载并按照NodeJS工具
https://nodejs.org/en/

VUE集成Bootstrap开发_第3张图片
将npm命令所在目录设置到PATH环境变量中

4、使用Eclipse 新建CodeMix VUE Project

VUE集成Bootstrap开发_第4张图片

新建OrderVue工程目录结构为
VUE集成Bootstrap开发_第5张图片

5、启动命令行,安装VUE依赖

将当前目录转移到新建OrderVue工程目录下
VUE集成Bootstrap开发_第6张图片

安装vue bootstrap-vue bootstrap

npm i vue bootstrap-vue bootstrap

安装vue-cli

npm i @vue/cli

6、使用Eclipse IDE工具,修改默认生成VUE模板文件HelloWorld.vue

打开Bootstrap-vue官网,复制Form代码到HelloWorld.vue中
https://bootstrap-vue.js.org/docs/components/alert




7、运行前端项目

VUE集成Bootstrap开发_第7张图片

8、使用浏览器测试

VUE集成Bootstrap开发_第8张图片

你可能感兴趣的:(VUE)