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/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. ...
随机推荐
- Java获取客户端真实IP地址
Java代码 import javax.servlet.http.HttpServletRequest; /** * 获取对象的IP地址等信息 */ public class IPUtil { /** ...
- jQuery 选择器有61种你都知道了多少
下面列举了61种jQuery 选择器 参考 选择器 语句 描述 * $("*") 选择所有元素 #id $("#lastname") id=“lastname” ...
- SQLi-LABS Page-2 (Adv Injections) Less23-Less26
Less-23 GET - Error based - strip comments http://10.10.202.112/sqli/Less-23?id=1' Warning: mysql_fe ...
- install和cp
在Makefile里会用到install,其他地方会用cp命令 主要区别: 如果目标文件存在,cp会先清空文件后往里写入新文件,而install则会先删除掉原先的文件然后写入新文件.这是因为往正在 使 ...
- 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数
1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...
- Android 项目主要文件
1.manifests下的AndroidManifest.xml是Andriod程序的清单文件,该文件是整个项目的配置文件,Android四大组件Activity.BroadcastReceiver. ...
- Nginx配置实验反向代理
l 实验要求 浏览器访问 8083.mine.com:8081 地址,(Nginx端口是8081)通过Nginx服务器反向代理监听请求,将请求转发到tomcat服务器上,实现真正内容的访问. l ...
- echarts之--柱状图-%显示
测试地址 https://www.echartsjs.com/examples/zh/editor.html?c=bar-tick-align var option = { title: { text ...
- 8-剑指offer: 替换空格
题目描述 请实现一个函数,将一个字符串中的每个空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 代码: c ...
- pdfium舍弃v8依赖
Step 3 去除v8依赖 用文本编辑器打开pdfium根目录下的pdfium.gyp文件,找到'javascript'及'jsapi'依赖(47行左右): 'dependencies': [ 'sa ...