源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

vue-cli如何引入bootstrap工具的方法

  • 时间:2021-08-23 11:37 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:vue-cli如何引入bootstrap工具的方法
本文介绍了vue-cli如何引入bootstrap工具的方法,分享给大家,也给自己留个笔记。 以下操作以正常安装node环境为前提。 [b]1.引入jq:[/b] 在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用cnpm下载速度更快)。 [b]2.修改build目录下的webpack.base.conf.js配置文件:[/b]   1)加入webpack对象:var webpack=require('webpack');   2)在module.exports里面加入以下配置:
plugins: [ 

     new webpack.ProvidePlugin({ 

       $:"jquery", 

       jQuery:"jquery", 

       "windows.jQuery":"jquery" 

     }) 

  ] 

3)在入口文件main.js中加入:import jquery from 'jquery' [b]3.引入bootstrap:[/b]   1)修改webpack.base.conf.js文件:
alias: { 

     'vue$': 'vue/dist/vue.esm.js', 

     '@': resolve('src'), 

     'assets': path.resolve(__dirname, '../src/assets'), 

     'jquery': "jquery/src/jquery" 

   } 

2)在入口文件main.js中加入:
  import './assets/css/bootstrap.min.css' 
  import './assets/js/bootstrap.min' 
 3)在assets文件目录中拷贝bootstrap各种文件: [img]http://files.jb51.net/file_images/article/201710/20171019100313043.png?201791910328[/img]         以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部