2020 零基础 Vue快速入门 Vue项目中引入外部css以及js文件的方法 【整理】

1、引言

在使用vue做项目的时候，我们一般不将css样式写到各自的组件里，这样不仅会让代码冗余，而且不美观整洁。

2、如果你定义了一些外部css文件，如何引入到vue组件中去呢？我们这里使用ES6的引入方式：

<template></template>
<style scoped>
	 @import "../assets/common/common.css";
</style>

3、那么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

4、如果需要按需引入，不在main.js中引入，直接在有需要的vue组件中引入：

部分代码：

<template></template>
<script>
import API from '../../assets/api/api.config.js'
</script>

这样引入的话，我们在当前组件可以直接使用API去找到这个js文件中的对象。
如：API.edgeManager.deviceList

ps:需要注意的是，第二种方式按需引入的js文件在其他组件中是找不到这个对象的。

---

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

点击进入Vue❤学习专栏~

学如逆水行舟，不进则退