Vue項目導入外部資源的方式

導入外部css樣式

1. 全局導入
   在項目的main.js中引入外部css樣式資源

import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

import './assets/css/progressbar/progressbar1.css'
import './assets/css/progressbar/progressbar2.css'
import './assets/css/progressbar/progressbar3.css'

import axios from 'axios'
Vue.prototype.axios = axios
import store from './store'
import router from './router'
import App from './App.vue'

Vue.use(Antd);
Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

2. 局部組件導入
   在單個組件內部的style標籤中導入資源

<style scoped>
    @import "../assets/css/progressbar/progressbar1.css";
    @import "../assets/css/progressbar/progressbar2.css";
    @import "../assets/css/progressbar/progressbar3.css";
</style>

導入外部js文件