在进行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. [转]awsome c++

    原文链接 Awesome C++ A curated list of awesome C++ (or C) frameworks, libraries, resources, and shiny th ...

  2. 物联网通信 - RESTDemo示例程序(Java版本)

    源码下载  -> 提取码  QQ:505645074 Netty的Restful API实现 Get: http://127.0.0.1:8662/test Post http://127.0. ...

  3. failed to map segment from shared object: Permission denied(error while loading shared libraries: libz.so.1)

    centos 6.3 服务器重启后,sshd 竟然连接不上了,防火墙也没有限制,重启sshd 服务报以下错误: 于是到/lib64 目录下找,库文件并没有少,仔细想后面的报错信息是权限被拒绝了,百度了 ...

  4. jenkins使用小技巧:jenkins构建出来的war/jar包如何带上SVN号?

    在实际使用过程中,一般会这样比如说打出来的包是 mypackage.jar, 但是每次打出来都是固定的 mypackage.jar如何来区分和上一个包的区别呢? 一般来说,会把打出来的包带上个 svn ...

  5. 2.1 Scala语言概述

    一.编程范式 命令式编程没有办法充分利用多核CPU: 函数式编程很多变量是不可修改的. 二.Scala简介 特点 scala运行在JVM上,兼容现有的Java程序: 面向对象的编程语言: 一门函数式语 ...

  6. LG2530 「SHOI2001」化工厂装箱员 高维DP+记忆化搜索

    问题描述 LG2530 题解 设\(opt[i][a][b][c][d]\)代表装到第\(i\)个后,第\(1,2,3\)手上分别还剩\(a,b,c\)个的最小操作数. 记忆化搜索即可. 启示:如果状 ...

  7. Scrapy框架详解

    Python网络爬虫Scrapy框架研究 Scrapy1.0教程 Scrapy笔记(1)- 入门篇 Scrapy笔记(2)- 完整示例 Scrapy笔记(3)- Spider详解 Scrapy笔记(4 ...

  8. 学习-velocity

    Velocity是什么?  Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来引用由java代码 ...

  9. [随笔]冲NOIP一等奖。。

    唉不想多说了. 真是一段“传奇”的经历啊. 还是那句话..“是的我上次什么都没说就走了...”这次也一样. 我还是太单纯的以为我们是肯定能够参加北大的夏令营的..然而结果真是意料之外啊. 本来我以为我 ...

  10. zr2019暑期高端峰会AB组十测

    郑睿round 1 代码真的好写,还是太笨了,爆零了. 郑睿round_2 好失败,A题真的是日狗了,第一发就可以A的,忘记费用流的反向边也要加一发流量了.哎,我注定是要爆零. 正睿round_3 日 ...