VUEJS项目实践三之引入bootstrap

上回书说到，用vuejs写个路由页面。这次写如何整合bootstrap。不得不说，bootstrap的样式确实比较好看。
一、首先去官网把bootstrap下载下来
bootstrap中文网

放在项目的assets目录下

还不到9点就好困哦～～～

二、引入bootStrap还需要引入jquery和popper.js

1、先安装一下jquery和popper.js
在package.json里 "dependencies"这个花括号里加入

    "jquery": "^2.1.4",
    "popper.js": "^1.14.4",

这三行。看起来就是这样亚子的～

 "dependencies": {
    "bootstrap": "^3.3.4",
    "jquery": "^2.1.4",
    "popper.js": "^1.14.4",
    "vue": "^2.5.2",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.2"
  }

写完这个要在终端里输入命令安装一下

cnpm install

终端返回

启动里一下报错里，不慌，什么场面没见过，接着来～

2、修改webpack.base.conf.js文件

在webpack.base.conf.js文件中加入

// 引入bootstrap
var webpack = require('webpack')

以及

 // 引入bootstrap
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      Popper: ['popper.js', 'default']
    })
  ]

这个js完整的代码贴一遍吧

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

// 引入bootstrap
var webpack = require('webpack')


module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  // 引入bootstrap
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      Popper: ['popper.js', 'default']
    })
  ]
};

3、好啦～随便找个页面vue文件测试一下吧～

      <div>
        <button class="btn btn-lg btn-primary">测试bootstrap样式</button>
      </div>

出来的效果就是那个按钮啦～只要bootstrap那个css文件里有的样式都可以拿过来用啦～

另附代码github链接
本文github完整源码