在进行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. dubbo-zookeeper(续)

    本篇为继上一篇的续篇,主要内容分为以下几点: 1.zookeeper集群 2.web管理平台 3.dubbo配置说明 接下来我们开始继续吧. 一.zookeeper集群 顾名思义也就是多台zookee ...

  2. Python获取股票历史、实时数据与更新到数据库

    要做量化投资,数据是基础,正所谓"巧妇难为无米之炊" 在免费数据方面,各大网站的财经板块其实已提供相应的api,如新浪.雅虎.搜狐...可以通过urlopen相应格式的网址获取数据 ...

  3. Android数据库

    Android数据库 什么情况下我们才用数据库做数据存储? 大量数据结构相同的数据需要存储时.Android内置了sqlite,轻量级. 创建数据库的方法 创建一个类继承SqliteOpenHelpe ...

  4. 华为服务器Linux在线做RAID方法

    背景概述 最近维护大数据的一些主机,大概有3k+的数目,有很大一部分是华为的服务器,大部分是12块数据盘,单盘做RAID0来存放数据,但是通常硬件是不可靠的,磁盘损坏是常态, 然而磁盘损坏进行定位更换 ...

  5. Wordpress解析系列之PHP编写hook钩子原理简单实例

    Wordpress作为全球应用最广泛的个人博客建站工具,有很多的技术架构值得我们学习推敲.其中,最著名最经典的编码技术架构就是采用了hook的机制. hook翻译成中文是钩子的意思,单独看这个词我们难 ...

  6. [基础]PeopleSoft中的作业和调度作业集合定义

    PeopleSoft进程调度器可以使一个或多个进程作为一个组.这个组在PeopleSoft中被称为作业(Job). PeopleSoft进程被定义为单个任务,程序或例程,例如cobol程序或AE程序或 ...

  7. NOIP 2014 提高组 题解

    NOIP 2014 提高组 题解 No 1. 生活大爆炸版石头剪刀布 http://www.luogu.org/problem/show?pid=1328 这是道大水题,我都在想怎么会有人错了,没算法 ...

  8. 贡献你的代码,将jar包发布到Maven中央仓库以及常见错误的解决办法

    前几天将自己的日志工具发布到了Maven中央仓库中.这个工具本省没有多少技术含量,因为是修改别人的源代码实现的,但是将jar发布到Maven仓库却收获颇丰,因为网上有些教程过时了,在此分享下自己发布j ...

  9. 安徽省2016“京胜杯”程序设计大赛_G_木条染色

    木条染色 Time Limit: 1000 MS Memory Limit: 65536 KB Total Submissions: 134 Accepted: 20 Description    小 ...

  10. Thinkphp5 用ab压力测试工具测试高并发请求

    上篇文章[Thinkphp5实现悲观锁]已介绍过thinkphp5使用悲观锁实现高并发的场景,这篇文章将实际测试下. 在shell里进入到apache的bin目录,输入以下url: ab -n 100 ...