在进行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. Uva140 Bandwidth 全排列+生成测试法+剪枝

    参考过仰望高端玩家的小清新的代码... 思路:1.按字典序对输入的字符串抽取字符,id[字母]=编号,id[编号]=字母,形成双射       2.邻接表用两个vector存储,存储相邻关系     ...

  2. 在myeclipse的jsp编辑器中怎么把Source/Preview调出来的方法步骤

    1.点击要打开的jsp 文件. 右键.选择 open with -->  MyEclipse Visual JSP Designer 就好了. 2. 如果想所有的jsp  都默认使用 这个可视化 ...

  3. [BZOJ3038]上帝造题的七分钟2 树状数组+并查集

    考试的时候用了两个树状数组去优化,暴力修改,树状数组维护修改后区间差值还有最终求和,最后骗了40分.. 这道题有好多种做法,求和好说,最主要的是开方.这道题过的关键就是掌握一点:在数据范围内,最多开方 ...

  4. Linux操作系统-命令-vmstat

    叨叨两句 涉及监控服务器性能的命令,除了有vmstat之外,还有top.iostat.netstat.本文只是介绍一下这4个命令中的1个.剩下的3个命令可以参考以下网上的资料就差不多能会了. 推荐to ...

  5. Oracle execute and call

    --execute和call的区别 -------------------------2014/01/14 EXEC is a sqlplus command that put its argumen ...

  6. init.ora, pfile, spfile

    实例启动时,查找初始化参数文件的顺序为: spfile<sid>.oraspfile.orainit<sid>.ora 如果以上3个文件都不存在,则实例无法启动. init.o ...

  7. 关于JS中利用for循环解决实际问题的逻辑操作

    第一部分 <script>        //        <!--折纸:折多少次和珠穆朗玛峰一样高//1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度884 ...

  8. WAV文件格式

    作者:阿宝 更新:2016-09-21 来源:彩色世界(https://blog.hz601.org/2016/09/21/waveform-audio-file-format/index.html) ...

  9. fs模块(二)

    1. renameSync 01. 重命名 02. 移动文件夹,相当于剪切作用 var fs = require('fs'); // 01 文件重命名 var renameFile = (oldFil ...

  10. AT24C02使用详解

    ---恢复内容开始--- 这篇文章是写给一个学弟看的,关于IIC,关于24C02的单字节写入\读取..页写入和读取,,学弟总是害怕协议,,,我总是对人家说,本来就这样的,协议就是人家这样规定的,,,如 ...