1. 程式人生 > >vue-cli如何引入bootstrap工具

vue-cli如何引入bootstrap工具

mage sset save clas 指令 nod pack import height

以下操作以正常安裝node環境為前提。

1.引入jq:

  在npm控制臺中,進入項目目錄,然後輸入指令npm install jquery --save-dev(npm換成cnpm更好,國內環境下使用cnpm下載速度更快)。

2.修改build目錄下的webpack.base.conf.js配置文件:

1)加入webpack對象:var webpack=require(‘webpack‘);

2)在module.exports裏面加入以下配置:

  plugins: [

    new webpack.ProvidePlugin({

      $:"jquery",

       jQuery:"jquery",

       "windows.jQuery":"jquery"

     })

  ]

3)在入口文件main.js中加入:import jquery from ‘jquery‘

3.引入bootstrap:

1)修改webpack.base.conf.js文件:

  alias: {

     ‘vue$‘: ‘vue/dist/vue.esm.js‘,

     ‘@‘: resolve(‘src‘),

     ‘assets‘: path.resolve(__dirname, ‘../src/assets‘),

     ‘jquery‘: "jquery/src/jquery"

   }


2)在入口文件main.js中加入:

  import ‘./assets/css/bootstrap.min.css‘

  import ‘./assets/js/bootstrap.min‘



3)在assets文件目錄中拷貝bootstrap各種文件:

技術分享

vue-cli如何引入bootstrap工具