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正确姿势
vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...
- vue 项目引入字体报错
vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url
- Vue中引入bootstrap导致的CSS问题
最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
- vue项目引入element
前提工作-安装并配置好以下环境: 1.安装node 2.安装git 1.初始化项目 vue init webpack vue-elementui npm run dev 2.安装element np ...
- 【vue】vue项目引入 Element-UI
根据vue项目的搭建教程,接下来记录下如何在Vue-cli创建的项目中引入Element-UI. 1.安装直接用命令 (推荐) npm install element-ui 2.直接在根目录下的pac ...
- 如何在vue里引入Bootstrap
一.引入jquery 步骤: 1. 安装jquery $ npm install jquery --save-dev 2.在webpack.config.js 添加内容 + const webpack ...
- vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../as ...
- vue项目 引入js文件
例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...
随机推荐
- 使用Node.js搭建静态资源服务器
对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...
- spring实现文件上传(图片解析)
合抱之木,生于毫末,千里之行,始于足下,要想了解spring的文件上传功能,首先要知道spring是通过流的方式将文件进行解析,然后上传.那么是不是所有需要用的文件上传的地方都要写一遍文件解析器呢? ...
- 方伯伯的玉米田[SCOI2014]
题目描述 方伯伯在自己的农田边散步,他突然发现田里的一排玉米非常的不美.这排玉米一共有N株,它们的高度参差不齐.方伯伯认为单调不下降序列很美,所以他决定先把一些玉米拔高,再把破坏美感的玉米拔除掉,使得 ...
- 日常API之QQ登录
这次的QQ登录我研究了好久惹,今天终于可以和大家分享啦! 大家都知道,QQ登录有很多方法,例如使用账号密码登录,手机版企鹅扫码登录等等(这些方法只能验证QQ是否成功登录,并没有聊天等功能) 首先就来使 ...
- Python 协程总结
Python 协程总结 理解 协程,又称为微线程,看上去像是子程序,但是它和子程序又不太一样,它在执行的过程中,可以在中断当前的子程序后去执行别的子程序,再返回来执行之前的子程序,但是它的相关信息还是 ...
- WAS ND V6下配置IHS V6
记录在同一台机器上进行WebSphere Application Server Network Deployment V6和IBM HTTP Server V6的配置情况. 配置的步骤如下: 一. 在 ...
- while补充,字符串和数字的内置方法
一.while循环的补充 while True: name=input('please input your name: ') password=input('please input your pa ...
- c# 函数简述
函数是具有独立功能,并且能够重复使用的代码块.函数必须先声明后调用,使用函数使代码更简洁易读. 一.函数的声明与调用 1.声明格式: static 返回类型 函数名(参数类型 参数名称,参数类型 参数 ...
- maven3自定义archetype
maven使用起来还是很方便,但默认自带的archetype配置junit版本比较老.每次创建新项目都要手动修改junit版本,所以就想着能不能自己建一个新版本出来,省得每次手动修改的麻烦. 网上找了 ...
- Centos定时任务
安装crontab:yum install crontabs说明:/sbin/service crond start //启动服务/sbin/service crond stop //关闭服务/sbi ...