vue-cli+webpack在生成的项目中使用bootstrap的方法

在一个html页面中加入bootstrap是很方便，就是一般的将css和js文件通过Link和Script标签就行。那么在一个用vue-vli生成的前端项目中如何加入？因为框架不一样了，略微要适应一下

第一步：脚手架生成项目

执行命令用webpack模板生成一个名为vuestrap的项目（名字任意）

vue init webpack vuestrap

在出现的各提示选项中（这些选项都随意）。

? Project name vuestrap
? Project description A Vue.js project
? Author SmileHong0121 <fengqingyuhou@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

选项选完，项目也就生成了，执行命令，安装脚手架创建的组件

npm install

第二步：安装jquery

bootstrap是依赖jquery的，所以就先装上jquery，这里用的版本是1.11.3。

稍后在配置的时候，是以webpack插件的方式进行打包，所以这里直接用npm进行安装，因为插件方式打包的组件都是require进来的。

执行命令，并保存到package.json中

npm install jquery@1.11.3 --save-dev

注：如果想查看npm上jquery有哪些版本，可以执行命令：

npm view jquery versions

第三步：安装Bootstrap

这里用的版本是3.3.0。执行命令，即可安装完成

npm install bootstrap@3.3.0 --save-dev

第四步：配置jquery

将jquery以插件打包，需要为webpack的plugins进行插件设置。

在build/webpack.base.conf.js文件中，在整个配置对象的末尾增加plugins配置。

在webpack.base.conf.js中的配置项，可以在dev和build出来的pro版本中都有效。

下面的配置其实就是变量名的真正指向设置，这样，在页面中对jquery的各种名字的调用就会有效，否则bootstrap跑不起来。

在这个文件顶部先引入webpack

var webpack=require('webpack');

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

第五步：引用bootstrap

在src/main.js文件的顶部加入如下对bootstrap主要文件的引用，注意这里的路径，不在是从src/assets加载，而是换成了从node_modules加载。

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

第六步：配置bootstrap

因为bootstrap除了js和css文件外，还有字体文件需要一并打包，默认生成的webpack.base.conf.js中的moudle->rules设定中都已经包含对字体文件的打包设置，所以无需修改，很人性啊。

第七步：验证页面

就在App.vue中写一个页面，放一个panel，button，modal。

<template><div id="app"><div class='container'><div class='row'><div class='col-lg-4'><h1>demo</h1></div><div class='col-lg-8'><div class='panel panel-default' style='min-width:500px;box-shadow:4px 4px 10px #888888;'><div class="panel-heading"><button id='btnCreate'><span class="glyphicon glyphicon-plus"></span></button><span>&nbsp;&nbsp;&nbsp;</span></div><div class="panel-body"><div style='float: left;width:100%'><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div></div></div></div></div></div></div></div>
</template><script>export default {name: 'app'}
</script><style>#app {margin-top: 60px;}
</style>

写完后，执行命令，运行效果。

npm run dev

转载于:https://www.cnblogs.com/snowhite/p/9112440.html

vue-cli+webpack在生成的项目中使用bootstrap的方法相关推荐

vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
Vue CLI 3 多页应用项目的搭建
在项目初期时,从零开始搭建和配置本地前端开发环境是一项很繁琐的工作,需要考虑到项目目录结构.项目基本配置.Webpack 配置等等.通过 Vue CLI 3 可以快速的生成一个项目,这样我们就可以专注 ...
vue使用ts 引入组件_vue项目中使用ts（typescript）入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
Vue项目中background-image属性设置方法
vue项目中background-image属性设置方法方式一:直接访问在vue-cli项目中的放在public目录下的资源会被直接复制,不会经过webpack的打包处理. <span cl ...
java 获取sqlsession_获取Java的MyBatis框架项目中的SqlSession的方法
从XML中构建SqlSessionFactory从XML文件中构建SqlSessionFactory的实例非常简单.这里建议你使用类路径下的资源文件来配置. String resource = &qu ...
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
ThinkPHP公共配置文件与各自项目中配置文件组合的方法文章TAG:thinkphp 公共配置文件时间:2014-11-25来源:www.aspku.com 作者:源码库文章热度: 146 ℃ ...
VB的一些项目中常用的通用方法-一般用于验证类
1.VB的一些项目中常用的通用方法: ' 设置校验键盘输入值,数字 Public Function kyd(key As Integer) As Integer '20060728 Dim mycha ...
vuecli启动的服务器位置,webpack – 在vue cli 3生成的项目中启动dev服务器
我使用npm i -g @ vue / cli在我的 Windows系统上全局安装了vue cli 3. 然后我使用vue create vue-project生成了一个项目我通过提示选择了所需的插 ...
vuecli启动的服务器位置,在vue cli 3生成的项目中启动dev服务器
我在我的Windows系统上使用全局安装了vue cli 3 npm i -g @vue/cli. 然后我使用生成了一个项目 vue create vue-project 我通过提示选择了所需的插件. ...

vue-cli+webpack在生成的项目中使用bootstrap的方法

vue-cli+webpack在生成的项目中使用bootstrap的方法相关推荐

最新文章

热门文章