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

 更新时间:2017年10月19日 10:01:41   作者:子墨言凉  
本篇文章主要介绍了vue-cli如何引入bootstrap工具的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了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: [ 

     new webpack.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+Django项目部署详解

    Vue+Django项目部署详解

    这篇文章主要介绍了Vue+Django项目部署详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 脚手架vue-cli工程webpack的作用和特点

    脚手架vue-cli工程webpack的作用和特点

    webpack是一个模块打包的工具,它的作用是把互相依赖的模块处理成静态资源。这篇文章主要介绍了vue-cli工程webpack的作用和特点,需要的朋友可以参考下
    2018-09-09
  • 一文搞懂Vue3中toRef和toRefs的区别

    一文搞懂Vue3中toRef和toRefs的区别

    toRef 和 toRefs都是Vue3 中的响应式转换工具函数,换句话说,toRef 和 toRefs 就是用来创建响应式的引用的,主要用来取出响应式对象里的属性,或者解构响应式对象,本文小编就来带大家搞清楚Vue3中toRef和toRefs的区别,需要的朋友可以参考下
    2023-09-09
  • vue 指定文字高亮的实现示例

    vue 指定文字高亮的实现示例

    在做文字处理的项目时经常会遇到搜索文字并高亮的需求,本文就来介绍vue 指定文字高亮的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • vite2.0 踩坑实录

    vite2.0 踩坑实录

    本文主要介绍了vite2.0 踩坑,记录了一些在配置项目中遇到的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • VUE-ElementUI 自定义Loading图操作

    VUE-ElementUI 自定义Loading图操作

    这篇文章主要介绍了VUE-ElementUI 自定义Loading图操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue预览 pdf、word、xls、ppt、txt文件的实现方法

    vue预览 pdf、word、xls、ppt、txt文件的实现方法

    这篇文章主要介绍了vue预览 pdf、word、xls、ppt、txt文件的实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue.js中的computed工作原理

    Vue.js中的computed工作原理

    这篇文章,我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。对Vue.js中的computed工作原理感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-03-03
  • Vue项目使用svg图标实践

    Vue项目使用svg图标实践

    这篇文章主要介绍了Vue项目使用svg图标实践,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 记一次vue去除#问题处理经过小结

    记一次vue去除#问题处理经过小结

    这篇文章主要介绍了vue去除#问题处理经过,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论