在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

一、引入jQuery

在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  这样就将jquery安装到了这个项目中。

然后修改webpack.base.conf.js(在build文件下)两个地方:

1:加入

var webpack=require('webpack');

2 在module.exports的里面加入

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]

最后在main.js中加入import $ from 'jquery',完成jquery的引入

二、引入 bootstrap.css文件:

修改webpack.base.conf.js

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'bootstrap':resolve('src/assets/bootstrap'),
  }
},

在main.js中import引入

import 'bootstrap/js/bootstrap.min.js'
import 'bootstrap/css/bootstrap.min.css'

三、引入bootstrap.min.js文件:

在main.js中import引入

import 'bootstrap/js/bootstrap.min.js'

来自:http://www.cnblogs.com/xiaofenguo/p/6605302.html

你们的支持,是我坚持的动力~

vue引入bootstrap、jquery的更多相关文章

  1. vue引入bootstrap——webpack

    想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行. 1.引入jquery 2.引入bootstrap   阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考 ...

  2. vue引入bootstrap和fontawesome

    npm install jquery npm install bootstrap npm install popper.js. import $ from 'jquery' import 'boots ...

  3. vue引入bootstrap.min.css报错:Cannot find module "./assets/css/bootstrap.min.css"

    问题如下图: 明明文件就在那里,就是报错说找不到模板,然后我就用了网上的方法,重新建立了一个项目,请参考如下: http://blog.csdn.net/ansu2009/article/detail ...

  4. 模块:(日期选择)jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  5. vue项目引入bootstrap、jquery

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  6. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  7. vue引入jQuery、bootstrap

    vue引入jQuery.bootstrap 1.使用vue-cli构建的vue项目 2.npm安装jquery.bootstrap npm install jquery 3.修改build/webpa ...

  8. Vue引入Jquery和Bootstrap

    一.引入jquery包 npm i jquery 二.配置jquery 在webpack.base.conf.js中加载juery插件  所以要配置该文件 三.引入Bootstrap npm i bo ...

  9. vue2.x利用脚手架快速构建项目并引入bootstrap、jquery

    要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. ...

随机推荐

  1. 【设计模式】Bridge

    前言 Bridge设计模式,将一个复杂类分成可以单独开发的部分.分成的两个部分,abstraction,implementation.字面上是抽象和实现,但不同于抽象方法及其实现.下面摘录Wiki的两 ...

  2. Linux性能调优 | 01 平均负载的理解和分析

    01 uptime命令 通常我们发现系统变慢时,我们都会执行top或者uptime命令,来查看当前系统的负载情况,比如像下面,我执行了uptime,系统返回的了结果. [root@lincoding ...

  3. 场sharepoint2016数据库恢复站点

    前不久公司support方,不小心把IIS的应用删除了,算是灼急了,不过有过原来恢复的经历,似乎有了心理准备,可是这次比上次严重些.技术操作复杂些,不过通过此事,也是进一步了解了SP2016数据库结构 ...

  4. php动态拼接变量名,可变变量,动态变量,使用花括号,使用两个$符

    php动态拼接变量名,可变变量,动态变量,使用花括号,使用两个$符方式一:使用花括号,前缀部分不需要用单引号$nums10 = 100;$xxx*${bcount.$nums10}['m54']/$n ...

  5. Oracle 11G空表无法导出处理

    通过exp进行数据导出的时候,如果表的数据为空,则会出现警告,并且表也不会导出,不利于数据恢复. 可以通过以下方法进行解决: 一.使用ALLOCATE EXTENT,可以导出之前已经存在的空表 --查 ...

  6. Promise的三兄弟:all(), race()以及allSettled()

    摘要: 玩转Promise. 原文:Promise 中的三兄弟 .all(), .race(), .allSettled() 译者:前端小智 Fundebug经授权转载,版权归原作者所有. 从ES6 ...

  7. IBM LOTUS DOMINO 9 部署SSL证书

    前言 随着SHA1算法在2016年12月31日以后,将被强制淘汰,所有新的SSL证书都必须支持SHA256算法,所以我们必须将IBM Domino Server升级到9.0以上才可以支持SHA256算 ...

  8. Debian x7中如何添加永久环境变量

    一.进入/etc/bash.bashrc(使用文本编辑器打开) 二.在最后面添加新的环境变量 export PATH=usr/...(路径):$PATH 三.保存后,打开终端,输入source ~/. ...

  9. C语言之double

    #include<stdio.h> int main(void) { printf("请分别输入身高的英尺和英寸,""如输入\"5 7\" ...

  10. MySQL数据库练习

    1.数据准备 以下为db文件,通过Navicat Premium导入数据库 /* 数据导入: Navicat Premium Data Transfer Source Server : localho ...