iT邦幫忙

1

vue router-link + 引入bootstrap4 (四)

將連結改成router-link

若增加tag標籤為button,屬性則變為按鈕
<li>
  <router-link :to="{path: '/'}">Home</router-link>
</li>
<li>
  <router-link tag="button" :to="{path: '/hello2'}">hello2</router-link>
</li>

https://ithelp.ithome.com.tw/upload/images/20171015/20106933GnK6PLiTf7.jpg

引入bootstrap4前,需先安裝相依套件jQuery及tether

npm install jquery tether

在 webpack.base.conf.js 中設定自動載入套件

// ...
var webpack = require('webpack')

module.exports = {
    // ...
    plugins: [
        new webpack.ProvidePlugin({
            // Automatically loads modules
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery', 
            Tether: 'tether'
        })
    ]
}

安裝bootstrap4

npm install bootstrap@4.0.0-alpha.6

main.js引用Bootstrap的scss

import 'bootstrap/scss/bootstrap.scss'

此部落格為個人前端學習記錄
文章皆為參考網路教學,整合成個人學習日記,若有侵權煩請告知,隨時修正。/images/emoticon/emoticon41.gif


尚未有邦友留言

立即登入留言