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 ...
随机推荐
- Swift 细节
1.swift ?和 !的区别 1.1 Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值,也就是说变量不会有默认值,所以要求使用变量之前必须要对其初始化.如果在使 ...
- oracle 审计日志清理
--进入审计日志目录: cd $ORACLE_BASE/admin/$ORACLE_SID/adump --删除3个月前的审计文件: find ./ -type f -name "*.a ...
- python pygame--倒计时
import pygame,sys,time,datetime class decTime(object): #将秒转化为时分秒 def __init__(self,totalTime): self. ...
- akoj-1319-四方定理
四方定理 Time Limit:1000MS Memory Limit:65536K Total Submit:28 Accepted:11 Description 数论中著名的"四方定理 ...
- 关于他们回答的 "怎样在桌面建一个python GUI的快捷方式" 这个问题
在之前的2个随笔里面,有写过<找到可以解决问题的正确的人>.<如何提问>,说白了就是您需要帮助的时候,您得让对方100%懂你,否则没戏. 那么最近看到这样1个古老的问题,和一些 ...
- C++ Socket学习记录 -2
WinSock TCP 编程流程 TCP通信,就像是固定电话,首先是要安装基站,然后是将电话号绑定到电话,然后拨号,接通之后说事,完事之后还要挂电话(甭管谁先挂). 1.初始化环境 使用函数 int ...
- hashlib,configparser,logging模块
一.常用模块二 hashlib模块 hashlib提供了常见的摘要算法,如md5和sha1等等. 那么什么是摘要算法呢?摘要算法又称为哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度 ...
- Monad详解
最近几年,函数式编程变得越来越流程,其代码简洁.副作用小.维护成本低等特点,使得许多其它的语言也开始支持函数式编程,比如Java 和 C#等.本文主要介绍一下函数式编程中的一个重要概念:Monad. ...
- jaspersoft studio 的初级入门(一)
前言 最近的工作涉及到企业的报表生成功能,于是就想用此篇博客来记录我的学习历程.进入Jasperreport项目的官网发现有一个软件叫Jaspersoft studio的,它的版本也是6.3.1跟Ja ...
- 关于FPU
关于FPU,比较运算有几个地方需要关注,mark一下. he result of the comparison is reported in the condition codes field of ...