Vue中如何引入BootStrap？

Vue如何引入BootStrap？

一、安装 Node.JS

因为 Vue 依赖于 Node.JS ，所以先要安装 Node.JS (至少8.9版本)

二、安装 VueCli 工具

• 命令窗口 输入 npm install -g @vue/cli 安装最新版 VueCli 工具
• vue -V 可查看Vue版本
• npm install -g @vue/cli-init 可拉取旧版本

三、创建项目

• cd D:/VueProjects cd到所要创建的项目目录下
• vue init webpack helloworld 创建helloworld项目
• cd helloworld cd到项目根目录
• npm install
• npm start 启动项目

四、BootStrap

1、引入 Jquery

因为 BootStrap 依赖于 Jquery ，所以要想使用 BootStrap，必须先引入 Jquery

• cd D:/VueProjects/helloworld cd到项目根目录

• npm install jquery -S 下载jquery

• 找到 build 目录下的 webpack.base.conf.js 文件

• 加入以下语句：

  var webpack = require('webpack')
  和
  // 增加一个plugins
   plugins: [
     new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery"
     })
   ],
  

• 添加后文件如下：

  'use strict'
  const path = require('path')
  const utils = require('./utils')
  const config = require('../config')
  const vueLoaderConfig = require('./vue-loader.conf')
  var webpack = require('webpack')
  
  function resolve (dir) {
    return path.join(__dirname, '..', dir)
  }
  
  
  
  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]')
          }
        }
      ]
    },
     // 增加一个plugins
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      })
    ],
    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'
    }
  }
  

• 再 找到 main.js 文件，加入以下语句：

  import $ from 'jquery'
  

• 测试 Jquery 是否安装成功?

  在HelloWorld.vue中添加:

  <script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App HelloWorld'
      }
    },
    created(){
      console.log($)
    }
  }
  </script>
  

  启动项目

  结果：

  

2、引入BootStrap

• npm install bootstrap --save-dev 下载bootstrap

• 再找到 main.js ，添加以下语句：

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

• 大功告成，可以愉快的在 Vue 中使用 BootStrap 了。