在使用vue做项目的时候，我们一般不将css样式写到各自的组件里，这样不仅会让代码冗余，而且不美观整洁。如果你定义了一些外部css文件，如何引入到vue组件中去呢？我们这里使用ES6的引入方式：
<template></template>
<style scoped>
@import "../assets/common/common.css";
</style>
那么JS文件如何引入呢？如果需要全局使用，则可以在main.js中引用并实例化对象：
部分js代码：
const DEBUG = true;
let BASE_URL = DEBUG ? 'url' : '';
const API = {
//网关设备管理
'edgeManager':{
'deviceList':BASE_URL + '/devicemanager/device/list.do',//网关设备列表
'deviceDelete':BASE_URL + '/devicemanager/device/delete.do'//网关设备删除
}
}
export default API;
在main.js中：
import API from './assets/api/api.config.js'
Vue.prototype.$API = API;
这样，我们在vue组件中使用this.$API就可以找到这个js文件中的对象了。
如：this.$API.edgeManager.deviceList
如果需要按需引入，不在main.js中引入，直接在有需要的vue组件中引入：
部分代码：
<template></template>
<script>
import API from '../../assets/api/api.config.js'
</script>
这样引入的话，我们在当前组件可以直接使用API去找到这个js文件中的对象。
如：API.edgeManager.deviceList
需要注意的是，第二种方式按需引入的js文件在其他组件中是找不到这个对象的。
欢迎交流探讨，希望本篇文章对你有所帮助。
