vue引入bootstrap、jquery
在进行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的更多相关文章
- vue引入bootstrap——webpack
想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行. 1.引入jquery 2.引入bootstrap 阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考 ...
- vue引入bootstrap和fontawesome
npm install jquery npm install bootstrap npm install popper.js. import $ from 'jquery' import 'boots ...
- vue引入bootstrap.min.css报错:Cannot find module "./assets/css/bootstrap.min.css"
问题如下图: 明明文件就在那里,就是报错说找不到模板,然后我就用了网上的方法,重新建立了一个项目,请参考如下: http://blog.csdn.net/ansu2009/article/detail ...
- 模块:(日期选择)jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器
一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...
- vue项目引入bootstrap、jquery
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- vue引入jQuery、bootstrap
vue引入jQuery.bootstrap 1.使用vue-cli构建的vue项目 2.npm安装jquery.bootstrap npm install jquery 3.修改build/webpa ...
- Vue引入Jquery和Bootstrap
一.引入jquery包 npm i jquery 二.配置jquery 在webpack.base.conf.js中加载juery插件 所以要配置该文件 三.引入Bootstrap npm i bo ...
- vue2.x利用脚手架快速构建项目并引入bootstrap、jquery
要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. ...
随机推荐
- 家电制造业中MES系统发挥的作用
人们对MES系统在家电生产领域的应用并不陌生,这是离散型MES应用的一个重要领域. 如空调.冰箱.电视.洗衣机等生产加工中均具有批量制造.多品种小批量.单件生产的等特点,很多企业也是以以订单.合同为核 ...
- PHP开发之--安装composer
composer是一个很好用的工具,类似于iOS开发项目中所用的cocopods,所以就想着安装下,过程也很简单: 1.切换到如下目录(在很多博客中都是这样写的,先安装,然后mv到/usr/local ...
- undefined reference to `BN_new'
出现如下错误 undefined reference to `BN_CTX_new' undefined reference to `BN_new' undefined reference to `B ...
- Qt url中获取文件名
QString filename = reply->rawHeader("Content-Disposition"); filename = filename.mid(QSt ...
- liteos信号量(八)
1. 概述 1.1 基本概念 信号量(Semaphore)是一种实现任务间通信的机制,实现任务之间同步或临界资源的互斥访问.常用于协助一组相互竞争的任务来访问临界资源. 在多任务系统中,各任务之间需要 ...
- HTTPS中的加密验证部分理论
为了加深自己对于https加密这一块的映象,决定写出来试试 就是在http层下面加了一个ssl层, 服务器将自己的公钥发送给证书机构,申请证书,证书机构首先会验证个服务器是否合法,线上或者线下,然后用 ...
- Centos 7 修改网卡名称、静态IP
修改内核选项 # vim /etc/sysconfig/grub GRUB_TIMEOUT= GRUB_DISTRIBUTOR="$(sed 's, release .*$,,g' /etc ...
- 01-Redis 简单介绍
Redis 简单介绍 1.Redis 是什么 Redis 是一种基于键值对的 NoSQL 数据库,与很多键值对数据库不同, redis 中的值可以有 string, hash , list , set ...
- 201871010102-常龙龙《面向对象程序设计(java)》第十周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- Sublime Text 3安装GoSublime
GoLand IDE工具虽然在编程时很好用,但是在使用中也有个问题,有时我们可能只是写一个简单的脚本来测试,对于我而言在打开IDE太重量级了,所以捣鼓了GoSublime工具来满足平时最基本的需求 ...