国瑞个人博客

Es6中的导入和导出

Es6中的导入和导出

2017年07月13日作者: 国瑞个人博客 525次浏览

在Vue-Cli环境中我们可以使用一下：

在router中的index.js中，引入data.js文件:

1	import {data} from '@/data.js';

之后就可以在任意组件中调用，例如下面在document组件中进行调用和渲染：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<template>
<div>
这里是document的路由
<ul>
<li v-for="item,index in data">{{item.userName}}</li>
</ul>
</div>

</template>
<script type="text/javascript">
import {
data
} from '@/data';

export default {
data() {
return {
data
};
},
created() {
console.log(data);
console.log("组件已经准备就绪");
},
mounted() {
console.log('组件加载完毕');
}
}
</script>

data.js中的文件内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

let data = [
{
id:1,
userName:"leo1",
sex:'男',
hobby:'写代码'
},
{
id:2,
userName:"leo2",
sex:'男',
hobby:'唱歌'
},
{
id:3,
userName:"leo3",
sex:'男',
hobby:'读书'
}
];

export {data};

补充说明，css中import属性的使用

现在有a.css，b.css，c.css三个css文件，如果一个个引入，就太麻烦了，这个时候，我们就可以将这些文件统一进入到一个叫做app.css的文计中（文件名任意取）,然后在html中就只需要引入app.css就可以了。

1
2
3
4
5
6
7

//在app.css中引入的写法,他们都在同一目录下
@import './a.css';
@import './b.css';
@import './c.css';

//在html中引入
<link rel="stylesheet" type="text/css" href="./app.css">

在Vue-Cli中，less会在编辑器保存之后自动编译成同名的css文件，我们只需要引入同名的css文件就可以了

百度已收录

点击快速分享：

以上就是国瑞前端个人博客带来的是《Es6中的导入和导出》，感谢您的观看！

如果没有特殊的说明，本文即为国瑞前端博客原创(www.huanggr.cn)，欢迎读者转载并保留本站版权！https://www.huanggr.cn/135.html

「专业前端博客，如果觉得我的文章对您有用，请帮助本站成长」

赞( 43 ) 打赏

标签：

上一篇：使用Vue中的组件封装一个小按钮（详细）

下一篇：扩展运算符和数组的方法map、filter

相关文章：

* 暂无相关文章

共有 0 条评论

点击这里取消回复。

博客简介

国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..

博主独立研发主题：

前端开发 web前端技术新手Web技术 Web资源分享国瑞前端博客

国瑞个人博客：
多谢夸奖，博主自建主题，地址为huangguorui.cn，欢迎鉴赏！
评：Smile_Blog主题简介
在线工具：
不错的主题，非常适合技术类博客。
评：Smile_Blog主题简介
国瑞个人博客：
眉清目秀哇，咋地啊，对我网站感兴趣？
评：博主参加专升本去了
国瑞个人博客：
眉清目秀哇
评：博主参加专升本去了
小傻瓜：
啊哈
评：博主参加专升本去了
国瑞个人博客：
考完了，都炸了
评：博主参加专升本去了

文章总数： 269 篇
草稿数目： 50 篇
分类数目： 26 个
页面总数： 16 个
评论总数： 216 条
链接总数： 10 个
标签总数： 104 个
建站时间： 803 天
注册用户： 659 人
访问总量： 8780640 次
最近更新： 2019年7月15日

-->