vue组件中引入bootstrap

vue怎么在单组件中引入局部css文件呢？不影响全局css？

下面是在单独的vue文件中引入bootstrap的例子

首先介绍一下利用vue的minix方法引入js文件和css文件的方法：

const loadExternalAssetMixin = {
  methods:{
    loadLink(src, callback) {
      if (!(typeof callback === 'function')) {
        callback = function() {}
      }
      var check = document.querySelectorAll(`link[href='${src}']`)
      if (check.length > 0) {
        callback()
        return
      }
      var link = document.createElement('link')
      var head = document.getElementsByTagName('head')[0]
      link.rel = 'stylesheet'
      link.href = src
      if (link.addEventListener) {
        link.addEventListener('load', function() {
          callback()
        }, false)
      } else if (link.attachEvent) {
        link.attachEvent('onreadystatechange', function() {
          var target = window.event.srcElement
          if (target.readyState === 'loaded') {
            callback()
          }
        })
      }
      head.appendChild(link)
    },
    loadScript(src, callback) {
      if (!(typeof callback === 'function')) {
        callback = function() {}
      }
      var check = document.querySelectorAll(`script[src="${src}"]`)
      if (check.length > 0) {
        check[0].addEventListener('load', function() {
          callback()
        })
        callback()
        return
      }
      var script = document.createElement('script')
      var head = document.getElementsByTagName('head')[0]
      script.type = 'text/javascript'
      script.charset = 'UTF-8'
      script.src = src
      if (script.addEventListener) {
        script.addEventListener('load', function() {
          callback()
        }, false)
      } else if (script.attachEvent) {
        script.attachEvent('onreadystatechange', function() {
          var target = window.event.srcElement
          if (target.readyState === 'loaded') {
            callback()
          }
        })
      }
      head.appendChild(script)
    }
  }
}
export default loadExternalAssetMixin

在vue文件中引入cdn的bootstrap资源

<script>
import loadExternalAssetMixin from '@/util/loadExternalAssetMixin'
export default {
  beforeMount () {
    this.loadScript('https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js', () => {
      this.loadScript('https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js') // 先加载jq后加载bootstrap
    })
    this.loadScript('https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js')
  },
}
</script>
<style src="@/assets/css/bootstrap.min.css" scoped></style> /*引入bootstrap.css不会影响到全局css*/
<style scoped>
/*其他样式*/
</style>