vue+cli+webpack中添加bootstrap

一、使用vue-cli创建项目

vue init webpack myproject

项目中出现的选择根据自己的情况而定，可以都选择yes

二、初始化项目

npm install

安装以后执行npm run dev(默认地址http://localhost:8080/#/)

如图显示：

三、安装jquery(bootstrap依赖与jquery)

npm install jquery@3.0.0 --save-dev
可以查看jqueyr目前有哪些版本
npm view jquery versions

关于jquery配置，需要打开build下面的webpack.base.conf.js
1.在文件顶部需添加const webpack = require('webpack')

2.在module配置中的rules后方添加配置

plugins: [// 添加jquery配置
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'windows.jQuery': 'jquery'
})
]

 

四、安装bootstrap

npm install bootstrap@3.3.0 --save-dev(版本看自己需求)

安装完成以后在src/main.js中引用

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

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

 

五、在app.vue中替换下列代码

<template>
  <div id="app">
      <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

然后npm run dev 运行，如下图显示则安装成功