以下操作以正常安装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. 201521123107 《Java程序设计》第9周学习总结

    第9周作业-异常 1.本周学习总结 2.书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什 ...

  2. 201521123030《Java程序设计》第6周学习总结

    1. 本周学习总结 2. 书面作业 1.clone方法 1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 覆盖clone的方法,声 ...

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

    1. 本周学习总结 1. 学习了类的创建: 2. 学会利用快捷方式完成变量的getter和setter的设定: 3. 学会了静态变量和非静态变量的区别和定义: 4. 学习了构造函数的基本编写方法. 大 ...

  4. 201521123057 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 常用异常 1.题目5-1 1.1 截图你的提交结果(出现学号) 答: 1.2 自己以前编写的代码中经 ...

  5. 201521123045 《JAVA程序设计》 第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  6. Spring第五篇【cglib、手动实现AOP编程】

    前言 到目前为止,已经简单学习了Spring的Core模块.也会怎么与Struts2框架进行整合了-.于是我们就开启了Spring的AOP模块了-在讲解AOP模块之前,首先我们来讲解一下cglib代理 ...

  7. java-annotation的简单介绍

    package com.yangwei.shop.entity; /** * annotation作用 一是进行标识,二是进行约束 * *///必须让它在运行时能够执行@Retention(Reten ...

  8. dotnet core 2.0在ubuntu下安装失败

    在ubuntu下安装.net core2.0失败了,不知道是什么原因.按照微软官方的步骤.似乎走不通.偶然翻到debian的安装方法,发现debian系统居然是直接下载包安装的.没经过apt.尝试一把 ...

  9. EntityFramework 6.x多个上下文迁移实现分布式事务

    前言 自从项目上了.NET Core平台用上了EntityFramework Core就再没碰过EntityFramework 6.x版本,目前而言EntityFramework 6.x是用的最多,无 ...

  10. 绘制QQ圆形图像

    思路:这里用到的是图像求交.现在画布上画上圆形,即所需要的圆形头像,然后设置paint的属性设置为求交集,再将bitmap划到canvas上面就好了. 代码如下: private static Bit ...