vue项目引入bootstrap、jquery
在进行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的更多相关文章
- vue项目引入bootstrap正确姿势
vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...
- vue 项目引入字体报错
vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url
- Vue中引入bootstrap导致的CSS问题
最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
- vue项目引入element
前提工作-安装并配置好以下环境: 1.安装node 2.安装git 1.初始化项目 vue init webpack vue-elementui npm run dev 2.安装element np ...
- 【vue】vue项目引入 Element-UI
根据vue项目的搭建教程,接下来记录下如何在Vue-cli创建的项目中引入Element-UI. 1.安装直接用命令 (推荐) npm install element-ui 2.直接在根目录下的pac ...
- 如何在vue里引入Bootstrap
一.引入jquery 步骤: 1. 安装jquery $ npm install jquery --save-dev 2.在webpack.config.js 添加内容 + const webpack ...
- vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../as ...
- vue项目 引入js文件
例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...
随机推荐
- 爬虫协议robots
前面的话 Robots协议(也称为爬虫协议.机器人协议等)全称是“网络爬虫排除标准”(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可以抓取,哪些页 ...
- Python序列化和反序列化
Python序列化和反序列化 通过将对象序列化可以将其存储在变量或者文件中,可以保存当时对象的状态,实现其生命周期的延长.并且需要时可以再次将这个对象读取出来.Python中有几个常用模块可实现这一功 ...
- 数据结构随笔-php实现栈
栈(Stack)满足后进先出(LIFO)的原则: 下面利用php实现栈的相关操作: 本实例栈的基本操作: 入栈(push):向栈内压入一个元素,栈顶指针指向栈顶元素 出栈(pop): 从栈顶去除元素, ...
- 设计模式的征途—18.策略(Strategy)模式
俗话说条条大路通罗马,很多情况下实现某个目标地途径都不只一条.在软件开发中,也会时常遇到这样的情况,实现某一个功能有多条途径,每一条途径都对应一种算法.此时,可以使用一种设计模式来实现灵活地选择解决途 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(999)-如何使用这个系统来开发?
前言 这篇文本讲述了这个框架的使用方式,及一些疑问的答疑,更加精准的使用这个框架来建立功能 经过几个版本的迭代,系统使用更加方便,代码更加简洁也更加的智能,所以之前61节的文章也需要重新编排 对项目的 ...
- Python模块----linecache
Python标准库提供了一个有趣的模块:linecache模块.该模块用来从文件中读取任何的行,并且将这些lines使用缓存进行优化,常见的情况是从个大文件中读取指定的行.不过由于此模块使用内存进行缓 ...
- Vue.js 计算属性的秘密
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...
- k-means算法概述
算法过程: 随机选取K个种子点 求所有点到种子点的距离,将点纳入距离最近的种子点群 所有点均被纳入群内后,将种子点移动到种子群中心 重复上述2.3过程,直至种子点没有移动 优缺点: 优点:容易实现 缺 ...
- JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果
下拉菜单列表 <style> *{ margin: 0px; padding: 0px; } .men ...
- javascript面向对象属性函数用法(defineProperty与getOwnPropertyDescriptor)
defineProperty用于设置一个对象的属性描述符,属性描述符有4个:[[Configurable]], [[Enumerable]], [[Writable]],[[Value]] 当一个属性 ...