通过css、js文件在页面引入其他css、js文件

通过css、js文件在页面引入其他css、js文件

在我们的项目中（不用webpack），有时候需要引入很多的js文件来达到我们的需求，例如：elementUI的js，jq，vue.js、axios、layer等

那么我们就需要在需要的html 页面引入一大堆文件链接，例如：

<link rel="stylesheet" href="../../lib/element2.13.0/lib-master/theme-chalk/index.css" />
<link rel="stylesheet" href="./reg.css" />
<script src="../../lib/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../../lib/element2.13.0/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../../lib/layer/layer.js"></script>
<script src="../../lib/axios/dist/axios.js"></script>

如果是css还好说，我们可以新建一个index.css文件，专门用来导入我们项目需要的css文件

@import url("../lib/element2.13.0/lib-master/theme-chalk/index.css");
@import url("../lib/web/web.css");
@import url("../lib/web/index.css");

这样的话我们页面，只需要引入这一个css文件即可,页面结构看起来

<link rel="stylesheet" href="../../css/index.css" />

js文件的导入需要我们去认识js的模块化方法，那我们这里先不讲述这个方法，用一种比较简单的方法去实现 我们通过一个js文件引入其他js文件的方法
思路就是在一个js文件，把其他js的文件引入方法输出到页面里面去，就相当于我们在页面写了引入的代码一样

我们新建一个 index.js

document.write("<script type='text/javascript' src='lib/jquery-3.4.1/jquery-3.4.1.js'></script>");
document.write("<script type='text/javascript' src='lib/vue/vue.js'></script>");
document.write("<script type='text/javascript' src='lib/layer/layer.js'></script>");
document.write("<script type='text/javascript' src='lib/element2.13.0/lib-master/index.js'></script>");
document.write("<script type='text/javascript' src='lib/axios/dist/axios.js'></script>");

在原来的页面中引入

<script src="../../js/index.js"></script>

对比一下

原来的结构

<link rel="stylesheet" href="../../lib/element2.13.0/lib-master/theme-chalk/index.css" />
<link rel="stylesheet" href="./reg.css" />
<script src="../../lib/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../../lib/element2.13.0/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../../lib/layer/layer.js"></script>
<script src="../../lib/axios/dist/axios.js"></script>

现在的结构

<link rel="stylesheet" href="../../css/index.css" />
<script src="../../js/index.js"></script>

这种方式具体好不好我也不清楚，有了解的同学可以提出一下意见，让我学习一下