文档章节

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

ochmd
 ochmd
发布于 2017/09/08 13:51
字数 330
阅读 31
收藏 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
博文 25
码字总数 17503
作品 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动态加载远程js完美实践

其实vue加载远程js的教程很多,但是我比较笨呐。。。用不出来,每次都报方法/属性不存在的错误,来看一下典型的写法: 如: Vue如何引入远程JS文件 如果这个能满足你们的需求就不需要看下面了...

晓乐凡
06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

这些Spring中的设计模式,你都知道吗?

设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆。 Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行...

Java填坑之路
33分钟前
1
0
Spring Aop原理之Advisor过滤

在上文(Spring Aop之Advisor解析)中我们讲到,Spring Aop对目标bean的代理主要分为三个步骤:获取所有的Advisor,过滤当前bean可应用的Advisor和使用Advisor为当前bean生成代理对象,并且上文...

爱宝贝丶
44分钟前
0
0
JMockit学习教程

1 JMockit中文网 我觉得如果仅仅是开发自测的话,把JMockit中文网认真看一遍,就可以在项目中使用JMockit了。 http://jmockit.cn/index.htm 2 JMockit中文教程 官方文档中文版。对于不喜欢看...

SuperHeroes
56分钟前
0
0
Linux服务器几乎从不采用Arch Linux?

我们见得多的Linux服务器系统一般都是什么Ubuntu Server啊,什么Cent OS啊,什么Fedora啊,或者企业采用的Red Hat啊,为什么几乎没有Arch Linux呢?下面我将从若干个方面指出Arch Linux在服务...

linux-tao
今天
0
0
js 函数柯里化 闭包

参考 https://mp.weixin.qq.com/s/GEHL3jarDdAAcr5tQGjmDg 一个统计求和的函数 需要知道整个数组的信息,然后遍历求值 function countMoney() { let money = 0 // 温馨提示:arguments...

阿豪boy
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部