在vue-cli项目中使用bootstrap的方法示例
2018-04-21 09:45
1396 查看
在一个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+webpack在生成的项目中使用bootstrap方法(一)
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
- vue-cli初始化项目中使用less的方法
- 使用Vue-cli 3.0搭建Vue项目的方法
- 使用electron将vue-cli项目打包成exe的方法
- 使用vue-cli(vue脚手架)快速搭建项目的方法
- 用npm安装vue和vue-cli,并使用webpack创建项目的方法
- vue-cli+webpack在生成的项目中使用bootstrap实例代码
- 基于vue-cli的vue项目之axios的使用5--axios方法发送请求
- vue-cli构建项目使用 less的方法
- 饿了么项目---1、vue-cli快速构建项目(包括兼容老项目时需引入bootstrap、jquery的方法)
- 利用vue-cli创建新项目和引入Bootstrap的方法
- Vue.js动画在项目使用的两个示例
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
- Vue.js动画在项目使用的两个示例
- 详解Vue使用 vue-cli 搭建项目
- vue-cli构建项目在index.html中使用静态文件
- vue2.0实战之使用vue-cli搭建项目(2)
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- vue-cli使用方法