在进行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——webpack

    想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行. 1.引入jquery 2.引入bootstrap   阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考 ...

  2. vue引入bootstrap和fontawesome

    npm install jquery npm install bootstrap npm install popper.js. import $ from 'jquery' import 'boots ...

  3. vue引入bootstrap.min.css报错:Cannot find module "./assets/css/bootstrap.min.css"

    问题如下图: 明明文件就在那里,就是报错说找不到模板,然后我就用了网上的方法,重新建立了一个项目,请参考如下: http://blog.csdn.net/ansu2009/article/detail ...

  4. 模块:(日期选择)jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  5. vue项目引入bootstrap、jquery

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  6. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  7. vue引入jQuery、bootstrap

    vue引入jQuery.bootstrap 1.使用vue-cli构建的vue项目 2.npm安装jquery.bootstrap npm install jquery 3.修改build/webpa ...

  8. Vue引入Jquery和Bootstrap

    一.引入jquery包 npm i jquery 二.配置jquery 在webpack.base.conf.js中加载juery插件  所以要配置该文件 三.引入Bootstrap npm i bo ...

  9. vue2.x利用脚手架快速构建项目并引入bootstrap、jquery

    要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. ...

随机推荐

  1. php 除10取整,取十位数前面一个数字,百位前两个数字

    需求:php 除10取整,取十位数前面一个数字,百位前两个数字,并把大于2的加红显示 例:0-9,10-19,20-29,30-39,110-119对应为:0 1 2 3 11 实现主要方法:$num ...

  2. Invalid left-hand side in assignment

    今天遇到一个问题,算不上什么技术问题,但是感觉这个坑值得记录一下 说一下我们的环境,我们的项目都是本地启动服务的,所以直接在idea中打开前端代码进行开发的 原来的前端的代码都是es5的没有使用过箭头 ...

  3. 8.如何自己设计一个类似 Dubbo 的 RPC 框架?

    作者:中华石杉 面试题 如何自己设计一个类似 Dubbo 的 RPC 框架? 面试官心理分析 说实话,就这问题,其实就跟问你如何自己设计一个 MQ 一样的道理,就考两个: 你有没有对某个 rpc 框架 ...

  4. Win2003下配置iis+php+mysql+zend

    所需软件: ActivePerl.PHP.MYSQL.Zend (一.安装IIS6.0;二.配置PHP环境;三.安装mysql;四.安装 Zend Optimizer;五.配置PHPMYADMIN) ...

  5. 201871010132--张潇潇--《面向对象程序设计(Java)》第十一周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  6. openLayers绘制静态底图

    由于项目需要,需要是使用openlayers框架,于是开始安利一波openlayers,可以点击 https://openlayers.org/   进入他的官网下载相关资源和案例 学习的过程总是慢慢 ...

  7. loj2305 NOI2017 游戏

    题目链接 思路 既然\(x\)的数量那么小,我们就可以先把每个\(x\)搜索一遍. 枚举x的时候不需要把\(a,b,c\)全枚举一遍,只要枚举其中的两个就可以枚举到当前位置选任何车的情况. 然后就变成 ...

  8. 2020年数据库概念与MySQL的安装与配置-从零基础入门MySQL-mysql8版本

    作者 | Jeskson 来源 | 达达前端小酒馆 从零基础入门MySQL数据库基础课 数据的概念,简介,安装与配置,Windows平台下MySQL的安装与配置. 数据库的概念:数据库是一个用来存放数 ...

  9. github git clone ssh协议 clone超慢解决方案,提高Github Clone速度

    即使进行了fq吧但是git clone ssh协议就是慢 2kb/s你能忍,坚决不能忍. github git clone ssh协议 clone超慢解决方案 151.101.72.249 globa ...

  10. oracle--dump 块与块分析 (dump 深入实践二)

    一,建立测试环境 01,一个oracle数据库环境 02,具体数据库实验环境配置 SQL> create user test1 identified by kingle; User create ...