Vue中引入JQuery和Bootstrap方法

简介: 一、Vue中引入JQuery1、因为已经安装了vue-cli脚手架,所以需要在webpack中全局引入jquery打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改。

一、Vue中引入JQuery

  • 1、因为已经安装了vue-cli脚手架,所以需要在webpack中全局引入jquery
    打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改。
dependencies:{
  "jquery":"^2.2.1"
}

↓↓↓↓↓↓↓


img_8078d43701c18b11b5c9a47b1150f85d.png
3.png
  • 2、然后在命令行中cnpm install
    大多人应该都是使用的淘宝镜像,所以使用cnpm,如果你不是 ,可以使用npm安装。

  • 3、在webpack.base.conf.js中加入一行代码
      let webpack=require("webpack")
    ↓↓↓↓↓↓↓↓↓

    img_437543a3e54a452e97e1538587f6d698.png
    1.png

  • 4、在webpack.base.conf.js中module.exports的最后加入这行代码,

   plugins: [
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  })
]

↓↓↓↓↓↓↓↓


img_ab13c2c2708fe8e30fdd44f865cf6990.png
2.png
  • 5、在main.js中引入,加入下面这行代码,全局引入。即可使用
    import $ from 'jquery'

二、引入Bootstrap

  • 1.安装Bootstrap
    打开package.json文件,在里面加入这行代码,bootstrap后面的是版本
    ↓↓↓↓↓↓↓↓
img_8078d43701c18b11b5c9a47b1150f85d.png
3.png
  • 2、然后在命令行中cnpm install
    大多人应该都是使用的淘宝镜像,所以使用cnpm,如果你不是 ,可以使用npm安装。

  • 3.在入口文件index.js里导入即可见效:
    import './node_modules/bootstrap/dist/css/bootstrap.min.css'
    import './node_modules/bootstrap/dist/js/bootstrap.min.js'

相关文章
|
9月前
|
存储 JavaScript
vue组件的五种传值方法(父子\兄弟\跨组件)
vue组件的五种传值方法(父子\兄弟\跨组件)
|
7月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
98 3
|
8月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
442 1
|
8月前
|
JavaScript 前端开发
Vue开发必备:$nextTick方法的理解与实战场景
Vue开发必备:$nextTick方法的理解与实战场景
589 1
|
8月前
|
存储 消息中间件 JavaScript
Vue3 多种组件通讯方法
【10月更文挑战第6天】
|
8月前
|
缓存 JavaScript
|
9月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
69 2
|
10月前
|
前端开发 JavaScript
详细说明 BootStrap整合 BootStrap 【整合V3版本的,需要依赖JQuery】
这篇文章详细说明了如何在项目中整合Bootstrap V3版本,包括下载Bootstrap和jQuery、将文件复制到静态资源目录、项目中离线引用这些文件,并提供了完整页面代码示例。
详细说明 BootStrap整合 BootStrap 【整合V3版本的,需要依赖JQuery】
|
8月前
|
设计模式 JavaScript 开发工具
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
82 0
|
8月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
322 0