vue-cli怎么引入bootstrap工具的方法

2021-02-22 07:36:36 180 0
tangjin

小编给大家分享一下vue-cli怎么引入bootstrap工具的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

以下操作以正常安装node环境为前提。

1.引入jq:

在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用cnpm下载速度更快)。

2.修改build目录下的webpack.base.conf.js配置文件:

1)加入webpack对象:var webpack=require('webpack');

2)在module.exports里面加入以下配置:

plugins:[

    newwebpack.ProvidePlugin({

      $:"jquery",

      jQuery:"jquery",

      "windows.jQuery":"jquery"

    })

  ]

3)在入口文件main.js中加入:import jquery from 'jquery'

3.引入bootstrap:

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各种文件:

vue-cli怎么引入bootstrap工具的方法

看完了这篇文章,相信你对“vue-cli怎么引入bootstrap工具的方法”有了一定的了解,如果想了解更多相关知识,欢迎关注恰卡编程网行业资讯频道,感谢各位的阅读!

收藏
分享
海报
0 条评论
180
上一篇:怎样抽象一个Vue公共组件 下一篇:怎样使用webpack在vue项目中写jsx语法

本站已关闭游客评论,请登录或者注册后再评论吧~

忘记密码?

图形验证码