在进行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. Vue实战狗尾草博客管理系统第一章

    Vue实战狗尾草博客后台管理系统第一章 这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...

  2. java8新特性—四大内置核心接口

    java8新特性-四大内置核心接口 四大内置核心接口 //消费型接口 Consumer<T>:: vode accept(T t); //供给型接口 Supplier<T>:: ...

  3. Python从零开始——字符串String

    一:Python字符串有哪些内容 二:Python字符串操作符 三:Python字符串格式化——占位符格式化 四:Python字符串格式化——format()函数 五:Python字符串常用操作函数

  4. Codeforces Round #304 (Div. 2)(CF546D) Soldier and Number Game(线性筛)

    题意 给你a,b(1<=b<=a<=5000000)表示a!/b!表示的数,你每次可以对这个数除以x(x>1且x为这个数的因子)使他变成a!/b!/x, 问你最多可以操作多少次 ...

  5. 团队——Alpha2版本发布

    这个作业属于哪个课程 课程链接 这个作业要求在哪里 作业要求的链接 团队名称 杨荣模杰和他的佶祥虎 这个作业的目标 发布并说明产品Alpha2版本 一.团队成员的学号姓名列表 学号 姓名 201731 ...

  6. BERT安装与使用

    环境: python 3.5 tensorflow 1.12.1 bert-serving-server 1.9.1 bert-serving-cline 1.9.1 官网上说要保证Python &g ...

  7. js 落幕

    1.关于路由的跳转 核心是 a 再取出后缀作为参数判断 最后 innerHTML 上 <!DOCTYPE html> <html lang="en"> &l ...

  8. Appium+python自动化(二)- 环境搭建—下(超详解)

    简介 宏哥的人品还算说得过去,虽然很久没有搭建环境了,但是换了新电脑设备,一气呵成,将android的测试开发环境已经搭建准备完毕.上一篇android测试开发环境已经准备好, 那么接下来就是appi ...

  9. 04-人脸识别-triplets loss 的解释(转载)

    转载至: https://blog.csdn.net/tangwei2014/article/details/46788025 下面是内容: [前言] 最近,learning to rank 的思想逐 ...

  10. 微信小程序 - 视图层 | 基础语法

    视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 类似前端HTML 一.数据绑定 普通语法 test.wxml ...