vue 如何加载 Bootstrap? 下面本篇文章给大家给大家介绍一下在 vue 里引入, 加载 Bootstrap 的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
方法 1: 在 main.JS 中引入, 此方法导入的 Bootstrap 中对于 html,body 的一些预设置的 CSS 样式可能无效
一, 引入 jQuery
在当前项目的目录下 (就是 package.JSON), 运行命令 cnpm install jQuery --save-dev 若是运行报错, 则运行 cnpm install jQuery (cnpm 和 NPM 都可以) 这样就将 jQuery 安装到了这个项目中.
然后修改 webpack.base.conf.JS(在 build 文件下)两个地方:
1, 加入
var webpack=require('webpack');
2, 在 module.exports 的里面加入
- plugins:[
- new webpack.optimize.CommonsChunkPlugin('common.js'),
- new webpack.ProvidePlugin({
- jQuery: "jquery",
- $: "jquery"
- })
- ]
最后在 main.JS 中加入 import $ form 'jquery', 完成 jQuery 的引入
二, 引入 Bootstrap.CSS 文件:
修改 webpack.base.conf.JS
- resolve:{
- extensions: ['.js', '.vue', '.json'],
- alias: {
- 'vue$': 'vue/dist/vue.esm.js',
- '@': resolve('src'),
- 'bootstrap':resolve('src/assets/bootstrap'),
- }
- },
在 main.JS 中 import 引入
- import'bootstrap/js/bootstrap.min.js'
- import'bootstrap/css/bootstrap.min.css'
方法二: 在 index.HTML 中引入, 一般建议使用此方法引入 Bootstrap
在 index.HTML 文件中引入 Bootstrap 时, 注意加入 < meta > 标签实现响应式, 未加此标签时, 可能会出现手机模式时, 响应式无法实现.
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
(1) 本地引用:
先在 static 目录下放所需加载的 Bootstrap 文件
然后在 index.HTML 中引入
目录路径为你所放位置的路径.
(2) 远程引入:
直接加载远程的 Bootstrap 文件
更多 Web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17885.html