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 中使用 BootStr