vue cli 3中使用bootstra组件

1，安装插件

npm install jquery --save
npm install bootstrap --save

2，在根目录中添加文件vue.config.js，然后写入下面配置

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

3，main.js中添加

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import $ from 'jquery'// Vue.use($)  // 注意此处如果这样引入$的话会报错如下面图片 (应该用下面这种引入方法)
Vue.prototype.$ = $;

注：第三步所说报错图片

vue cli 3中使用bootstra组件相关推荐

怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...
Vue使用iview中menu菜单组件的大坑！
Vue2使用iview中menu菜单组件的大坑! 在使用iview的menu组件时,当需要发送请求获取菜单,动态渲染组件的时候,会出现设置默认展开菜单无效的bug. 官网给出的方法如下方法名说明 ...
vue中用table_element-ui中的 table 组件在vue中的使用
经常使用 element-ui 的小伙伴应该对 el-table 组件非常熟悉,通常它长下面这个样子: 但是我们可以使用使用 v-for 来优化模版中的 el-table-column v-for=& ...
vue中用table_Ant-Design-Vue中关于Table组件的使用
1. 如何自定义表格列头: Name const columns =[ { dataIndex:'name', // 自定义列表头,则不能设置title属性align:'left', slots: { ...
vue element form中input等组件不能输入值
<el-input v-model="form.inputVal " /> 由于data中form只是一个空对象{},当主动设置 form.inputVal = &qu ...
php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
vue CLI异步组件报错import' and 'export' may only appear at the top level
目录简介解决方案简介 Vue的官网中提到了有关异步组件的语法,链接如下: https://cn.vuejs.org/v2/guide/components-dynamic-async.html ...
Vue CLI 3开发中屏蔽烦人的EsLint错误
问题 Vue开发中,特别是当你阅读分析别人的其中早期版本的Vue代码时往往会遭遇到满屏幕的烦人的EsLint错误.有关EsLint这个工具的作用不再赘述.查阅网上参考文档,大多是针对早起版本Vue C ...

vue cli 3中使用bootstra组件

vue cli 3中使用bootstra组件相关推荐

最新文章

热门文章