以下操作以正常安装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文件:

     '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工具的更多相关文章

  1. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  2. 每天一点点之vue框架开发 - 引入bootstrap

    只使用css样式   如果在你的项目中只是使用css样式,那就不需要安装,直接全局引入样式就好 <link rel="stylesheet" href="https ...

  3. vue项目中引入bootstrap

    (1)引入Jquery文件,需要在bootstrap.min.js 之前引入. 1.npm install jquery --save-dev 2. plugins: [ new webpack.Pr ...

  4. vue中全局引入bootstrap.css

    1.首先在官网上下载bootstrap的压缩包(必须是官网上下载的) 将压缩包解压后引入在项目文件夹下面.如下图所示: 2.在main.js中引入 import './assets/bootstrap ...

  5. vue系列之vue cli 3引入ts

    插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ...

  6. vue/cli 3 引入 使用jQuery

    注意这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.一般安装成功后在packa ...

  7. 每天一点点之vue框架开发 - 引入Jquery

    1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...

  8. 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

    Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...

  9. Vue CLI 是如何实现的 -- 终端命令行工具篇

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...

随机推荐

  1. 团队作业9——展示博客(Beta版本)

    展示博客 1.团队成员的简介和个人博客地址,团队的源码仓库地址. 何琴琴(http://www.cnblogs.com/vviane/): 领导项目进行,协调各队员之间的矛盾合作,负责测试与需求分析. ...

  2. 201521123037 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结上课内容. 1.识别类.对于一个系统中,对于名词大多为类或属性,对于动词大多为方法. 2.注释.类注释.方法 ...

  3. 201521123038 《Java程序设计》 第二周学习总结

    201521123038 <Java程序设计> 第二周学习总结 1.本章学习总结 学会在Java程序中使用函数,使程序层次更清晰 使用StringBuilder编写代码,减少内存空间的占用 ...

  4. 201521123044 《Java程序设计》第12周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  5. thymeleaf模板引擎调用java类中的方法(附源码)

    前言 <Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦> 由于开源了项目的缘故,很多使用了My Blog项目的朋友遇到问题也都会联系我去解决 ...

  6. Sping IOC

    这2天学习了Spring的AOP  其中包括注解式和非注解式的配置  个人感觉注解式的配置非常好用.具体内容如下: 1.    AOP 面向切面编程 个人理解就是在一个写好的方法上增加一些新的功能   ...

  7. Java学习笔记三---unable to launch

    环境配置好后,在eclipse下编写HelloWorld程序: ①创建新工程 ②创建.java文件,命名为HelloWorld ③在源文件中添加main方法,代码如下: public void mai ...

  8. MapReduce中Combiner规约的作用以及不能作为MR标配的原因

    作用:在Mapper端对数据进行Combine归约处理,Combine业务逻辑与Reducer端做的完全相同.处理后的数据再传送到Reducer端,再做一次归约.这样的好处是减少了网络传输的数量.在M ...

  9. PeopleRank

    PeopleRank:基于PageRank的理论,以每个微博账户的“关注”为链出链接,“粉丝”为链入链接的这种以人为核心的关系. PeopleRank假设条件:– 数量假设:如果一个用户节点接收到的其 ...

  10. AngularJS [ 快速入门教程 ]

      前  序 S    N AngularJS是什么? 我想既然大家查找AngularJS就证明大家多多少少对AngularJS都会有了解. AngularJS就是,使用JavaScript编写的客户 ...