在vue-cli项目中使用bootstrap的方法示例

在一个html页面中加入bootstrap是很方便，就是一般的将css和js文件通过Link和Script标签就行。

那么在一个用vue-vli生成的前端项目中如何加入？因为框架不一样了，略微要适应一下。

安装插件

npm install jquery --save
npm install bootstrap --save
npm install popper.js --save

配置webpack.base.conf.js

//在顶部添加
const webpack = require('webpack')

//在module.exports = {}末尾添加下面代码

module.exports = {
...
plugins: [
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })
 ]
}

main.js中添加

import $ from 'jquery'
import 'bootstrap'

测试jquery

//在vue文件中添加测试代码

<script>
$(function () {
 alert('234')
})

export default {
 name: 'App'
}
</script>

测试bootstrap

<template>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <button class="btn btn-primary">测试按钮</button>
    </div>
  </div>
</div>
</template>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
  • vue-cli如何引入bootstrap工具的方法
  • 详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
  • 详解vue-cli快速构建项目以及引入bootstrap、jq
  • vue-cli+webpack在生成的项目中使用bootstrap实例代码
  • windows下vue-cli导入bootstrap样式
赞 (0)

相关推荐

  • 详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

    详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

    写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点. 引入bootstrap 1. 下载所需要的bootstrap文件. 将要使用的bootstrap文件放入src目录下的assets文件夹中. 2. 在入口文件src/main.js中引入bootstrap import './assets/boot

  • vue-cli+webpack在生成的项目中使用bootstrap实例代码

    vue-cli+webpack在生成的项目中使用bootstrap实例代码

    在html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下. 脚手架生成项目 执行命令用webpack模板生成一个名为vuestrap的项目(名字任意) vue init webpack vuestrap 在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意). ? Project name v

  • 详解vue-cli快速构建项目以及引入bootstrap、jq

    详解vue-cli快速构建项目以及引入bootstrap、jq

    vue-cli脚手架工具快速构建项目架构: ..首先默认了有已经安装了node... npm install -g vue-cli                   全局安装vue-cli vue init webpack cnm                  生成项目名为cnm的的项目模板,cnm自定义 npm install                                   到cnm文件夹中打开Git bash或者命令窗口初始化安装依赖 此时文件夹目录应该是这样 然后

  • 详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

    详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

    1.先安装好vue-cli,如果还没有安装好的可以参考:<windows下vue-cli及webpack 构建网站(一)环境安装> 2.安装好之后Vue的欢迎界面,我们要做个例子导入bootstrap的样式,就先去复制一份bootstrap的导航样式过来替换掉Vue的欢迎页面吧,打开Src文件夹下面的components组件目录,然后打开 Hello.vue文件,把 <h1>{{ msg }}</h1> <h2>Essential Links</h2&

  • windows下vue-cli导入bootstrap样式

    windows下vue-cli导入bootstrap样式

    1.先安装好vue-cli,如果还没有安装好的可以参考:<windows下vue-cli及webpack 构建网站(一)环境安装> 2.安装好之后Vue的欢迎界面,我们要做个例子导入bootstrap的样式,就先去复制一份bootstrap的导航样式过来替换掉Vue的欢迎页面吧,打开Src文件夹下面的components组件目录,然后打开 Hello.vue文件,把 <h1>{{ msg }}</h1> <h2>Essential Links</h2&

  • vue-cli如何引入bootstrap工具的方法

    vue-cli如何引入bootstrap工具的方法

    本文介绍了vue-cli如何引入bootstrap工具的方法,分享给大家,也给自己留个笔记. 以下操作以正常安装node环境为前提. 1.引入jq: 在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用cnpm下载速度更快). 2.修改build目录下的webpack.base.conf.js配置文件: 1)加入webpack对象:var webpack=require('webpack'); 2)在mod

  • 在vue-cli项目中使用bootstrap的方法示例

    在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下. 安装插件 npm install jquery --save npm install bootstrap --save npm install popper.js --save 配置webpack.base.conf.js //在顶部添加 const webpack = require('we

  • vue cli webpack中使用sass的方法

    1:安装依赖 npm install sass-loader node-sass --save-dev 2:html中 修改style <style lang="sass"> /* write sass here */ </style> 3: 使用正常sass 语法 //但是会报错 <style lang="sass"> $highlight-color: #F90; $highlight-border: 1px solid $h

  • Vue项目中使用Bootstrap

    Vue项目中使用Bootstrap

    一.安装jQuery Bootstrap需要依赖jQuery,所以引用Bootstrap之前要先引用jQuery,使用下面的命令引用jQuery: npm install jquery --save 注意:如果想查看npm上jquery有哪些版本,可以执行命令: npm view jquery versions 二.引入Bootstrap 1.使用命令安装 可以使用下面的命令安装: npm install bootstrap --save 2.下载Bootstrap文件 直接去Bootstrap

  • vue.js项目中实用的小技巧汇总

    vue.js项目中实用的小技巧汇总

    前言 Vue.js 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm安装时,可能会出现一系列的错误 1.安装jQuery

  • Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

    Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro

  • vue管理系统项目中的一些核心技能汇总

    目录 前言 1. Axios 拦截器和二次封装 1.1 Axios 请求和响应拦截器. 1.2 Axios 二次封装 2. Vuex 的数据持久化 3. 路由守卫和动态路由的挂载 3.1 路由守卫 3.2 动态路由的挂载 4. 环境变量的配置文件 5. 封装一个按钮级权限的自定义指令 总结 前言 很多脚手架搭建的 vue 的管理系统项目,其核心模块的处理方式大致上都是一样的. 所以,我结合之前项目,整理了一下重要模块的解决方案. 1. Axios 拦截器和二次封装 1.1 Axios 请求和响应

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    第一步,去百度地图开发者申请秘钥. 第二步在项目中引入,具体如下 其中index.html存放地图链接,代码如下 然后在APP.vue里面实现,代码如下 <template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </tem

  • vue 项目中使用Loading组件的示例代码

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你

  • vue+element项目中过滤输入框特殊字符小结

    可以在main.js中写入方法 Vue.prototype.validSe = function (value, number = 255) { value = value.replace(/[`-*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#￥%--&*()--\-+={}|<>?:""[].:'',..]/g, '').replace(/\s/g, ""); if (value.

随机推荐