文档章节

VUE中引入jQuery以及bootstrap的方法步骤

ochmd
 ochmd
发布于 2017/09/08 13:51
字数 330
阅读 40
收藏 0

1.引入jQuery流程

(1): 在当前项目的目录下(就是package.json),运行命令

npm install jquery --save-dev

 (2):修改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"
 })
]

(3):最后在main.js中加入

import $ from 'jquery',

(4):完成jquery的引入

2.引入bootstrap流程

 在当前项目的目录下(就是package.json),运行命令

npm install bootstrap --save-dev

此处bootstrap的路径会安装在node_modules文件下,注意文件目录。

(1):修改webpack.base.conf.js

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'bootstrap':resolve('src/assets/bootstrap'),
  }
},

此部分要考虑到你项目中bootstrap的储存路径,例如在上部中‘bootstrap’的地址指向是‘src/assets/bootstrap’,所以在引入时要考虑项目中的确切路径。

(2):在main.js中import引入

import 'bootstrap/js/bootstrap.min.js'
import 'bootstrap/css/bootstrap.min.css'

此部分要考虑到你项目中bootstrap的储存路径,此处的路径是引用‘src/assets/bootstrap’下面的bootstrap,要考虑实际项目中的路径。

 

(3):完成bootstrap的引入

3.iview的引入流程

(1).在当前项目的目录下(就是package.json),运行命令

npm install iview --save-dev

(2):在main.js中import引入

import iView from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iView);

(3):完成iview 的引入。

© 著作权归作者所有

共有 人打赏支持
上一篇: 表单中的事件
下一篇: 移动端兼容
ochmd
粉丝 0
博文 26
码字总数 22636
作品 0
前端工程师
私信 提问
vue结合bootstrap4.0使用

一般vue都是结合elementui 、mint-ui等使用,但是自己还是想结合bootstrap来使用,在使用的过程中遇到一些报错 使用bootstrap 要结合jQuery来使用的,首先要安装依赖 npm install jquery --s...

杏sunshine
05/16
0
0
走进webpack(2)--第三方框架(类库)的引入及抽离

  正文之前,由于这是一个系列的文章,可能第一次看到的看官老爷们会觉得突兀,如果你是webpack新手,我建议你先从前几篇文章看起,如果你对webpack有一些了解,也希望可以在github上下载代...

zaking
03/29
0
0
vue获取input输入框的数据

用惯了jQuery,突然使用vue感觉很不习惯,有很多不同的地方,感觉是两个不同的思想来写前端的代码。jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作。而Vue则是通过...

王子城
06/21
0
0
mongodb+express+vue代码实现掘金最热文章收藏评论分析

关于本篇文章的思路介绍在:juejin.im/post/5a1293…, 看代码之前可以先看一下实现的效果; 刚把掘金最热文章收藏评论分析的思路发出去后,就收到很多掘金好友的喜欢和阅读,这也让我更有信...

Kevin_top
2017/11/22
0
0
vue cli 通过npm引入第三方js(jquery)

默认已经安装好node环境、npm依赖等vue基础环境,如果未运行vue,请参考https://cn.vuejs.org/v2/guide/installation.html#命令行工具-CLI 1.管理员身份运行cmd,进入到项目路径下, 运行 注...

刘昌鑫
2017/10/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Windows 10 设置 Java 环境变量

首先你需要在我的电脑中打开,找到环境变量属性。 找到环境变量属性 找到环境变量属性后单击将会看到下面的设置界面。 在这个界面中设置高级系统设置。 环境变量 在弹出的界面中选择设置环境...

honeymose
44分钟前
1
0
用any-loader封装jQuery的XHR —— 随便写着玩系列

哎,都说没人用JQuery啦,叫你别写这个。 其实我也是好高骛远使用过npm上某个和某个很出名的XHR库,嗯,认识我的人都知道我喜欢喷JQ,以前天天喷,见面第一句,你还用JQ,赶紧丢了吧。但我也...

曾建凯
今天
5
0
聊聊storm的AggregateProcessor的execute及finishBatch方法

序 本文主要研究一下storm的AggregateProcessor的execute及finishBatch方法 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout......

go4it
今天
4
0
大数据教程(7.5)hadoop中内置rpc框架的使用教程

博主上一篇博客分享了hadoop客户端java API的使用,本章节带领小伙伴们一起来体验下hadoop的内置rpc框架。首先,由于hadoop的内置rpc框架的设计目的是为了内部的组件提供rpc访问的功能,并不...

em_aaron
今天
5
0
CentOS7+git+github创建Python开发环境

1.准备CentOS7 (1)下载VMware Workstation https://pan.baidu.com/s/1miFU8mk (2)下载CentOS7镜像 https://mirrors.aliyun.com/centos/ (3)安装CentOS7系统 http://blog.51cto.com/fengyuns......

枫叶云
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部