在vue-cli项目中使用bootstrap的方法示例
时间:2021-11-14 10:24:58|栏目:vue|点击: 次
在一个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.JS入门教程之列表渲染
栏 目:vue
下一篇:用Vue封装导航栏组件
本文标题:在vue-cli项目中使用bootstrap的方法示例
本文地址:http://www.codeinn.net/misctech/183493.html