vue引入引导的案例

　　介绍

这篇文章将为大家详细讲解有关vue引入引导的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

步骤:

<强> 1,安装jquery

npm安装jquery美元——save-dev

<强> 2,在webpack.config。js添加内容

+ const webpack=要求(“webpack"); 　　模块。出口={ 　　条目:& # 39;。/index.js& # 39; 　　输出:{ 　　路径:路径。加入(__dirname & # 39;。/dist # 39;), 　　publicPath: & # 39;/dist/& # 39; 　　文件名:& # 39;index.js& # 39; 　　}, 　　+插件:[ 　　新webpack.ProvidePlugin ({ 　　jQuery: & # 39; jQuery # 39; 　　美元:& # 39;jquery # 39; 　　}) 　　] 　　}

<强> 

进口$ & # 39;jquery # 39;;

<>强4、测试一下是否安装成功,看看能否弹出& # 39;123 & # 39;

& lt; template> 　　& lt; div> 　　你好世界! 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　$(函数(){ 　　警报(123); 　　}); 　　出口默认{ 　　}； 　　& lt;/script> 　　& lt; style> 　　& lt;/style>


<强> 1,安装引导 

 npm美元安装——save-dev引导

<强> 2,在入口文件索引。js里引入相关

进口& # 39;。/node_modules/引导/dist/css/bootstrap.min.css& # 39;; 　　& # 39;进口。/node_modules/引导/dist/js/bootstrap.min.js& # 39;;

<强> 3,添加一段引导代码

& lt; div类=癰tn-group"角色=癵roup"aria-label=啊霸? 　　& lt;按钮类型=癰utton"类=癰tn btn-default"祝辞Left 　　& lt;按钮类型=癰utton"类=癰tn btn-default"祝辞Middle 　　& lt;按钮类型=癰utton"类=癰tn btn-default"祝辞Right 　　& lt;/div>

<强> 4。运行,查看效果,这些按钮已经变成引导按钮组了

vue引入引导的案例

关于vue引入引导的案例就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

vue引入引导的案例