在进行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正确姿势

    vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...

  2. vue 项目引入字体报错

    vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url

  3. Vue中引入bootstrap导致的CSS问题

    最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...

  4. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  5. vue项目引入element

    前提工作-安装并配置好以下环境: 1.安装node  2.安装git 1.初始化项目 vue init webpack vue-elementui npm run dev 2.安装element np ...

  6. 【vue】vue项目引入 Element-UI

    根据vue项目的搭建教程,接下来记录下如何在Vue-cli创建的项目中引入Element-UI. 1.安装直接用命令 (推荐) npm install element-ui 2.直接在根目录下的pac ...

  7. 如何在vue里引入Bootstrap

    一.引入jquery 步骤: 1. 安装jquery $ npm install jquery --save-dev 2.在webpack.config.js 添加内容 + const webpack ...

  8. vue项目引入自定义.css的样式文件

    ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../as ...

  9. vue项目 引入js文件

    例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...

随机推荐

  1. [补档][COGS 2434]暗之链锁

    [COGS 2434]暗之链锁 题目 传说中的暗之连锁被人们称为Dark.<!--more-->Dark是人类内心的黑暗的产物,古今中外的勇者们都试图打倒它.经过研究,你发现Dark呈现无 ...

  2. CODE大全告诉你java是否开始没落了

    CODE大全告诉你java是否开始没落了! 22 岁,对于一个技术人来说可谓正当壮年.但对于一门编程语言来说,情况可能又有不同.各类编程语言横空出世,纷战不休,然而 TIOBE 的语言排行榜上,Jav ...

  3. HPU--1091 N!的位数

    1091: N!的位数 [数学] 时间限制: 1 Sec 内存限制: 128 MB提交: 97 解决: 12 统计 题目描述 我们知道n!=n*(n-1)*(n-2)*-*2*1. 那么给定一个n,n ...

  4. [STL] day 1~2 Problem Set

    Q#1 #include <cmath> #include <cstdio> #include <vector> #include <iostream> ...

  5. Luogu P2807 三角形计数

    题目背景 三角形计数(triangle) 递推 题目描述 把大三角形的每条边n等分,将对应的等分点连接起来(连接线分别平行于三条边),这样一共会有多少三角形呢?编程来解决这个问题. 输入输出格式 输入 ...

  6. python标准数据类型

    Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Sets(集合) Dictionary(字典) Python 中的变量不需 ...

  7. SQL优化二(Sql性能调优)

    一·.前言:这篇博文内容非原创,是我们公司的架构师给我们做技术培训的时候讲的内容,我稍微整理了下,借花献佛.这篇博文只是做一个大概的科普介绍,毕竟SQL优化的知识太大了,几乎可以用一本书来介绍.另外, ...

  8. IOS中的单例设计模式

    单例设计模式是IOS开发中一种很重要很常用的一种设计模式.它的设计原理是无论请求多少次,始终返回一个实例,也就是一个类只有一个实例.下面是苹果官方文档中关于单例模式的图片: 如图所示,左边的图是默认的 ...

  9. HTML的第一课

    今天是第一天学习HTML,老师讲的内容不是很多,内容也比较简单.但是标签的数量很多,在做作业时十分不熟练,很多标签需要重新看它的意思.而且有很多标签在一起用的时候容易搞混.学的标签中有很多地方是通用的 ...

  10. ionic项目上划刷新和下拉刷新

    我们想要一块区域实现上划刷新时. 首先需要一块滚动视图:ionCintent 或者 ionScroll 把ion-infinite-scroll当作滚动视图的最后一个子元素,他的on-infinite ...