Es6中的导入和导出

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

在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资源分享国瑞前端博客

国瑞个人博客：
当时我做这个我也是摸索了一会了，所以写出来供大家交流学习，哈哈，很高兴可以帮到你！
评：iview关于表格合并拆分的技巧
国瑞个人博客：
这个是我从项目列表直接复制出来的所以，可能就看着不完整，list是我请求的数据
评：iview中多选框单选实现方法
哎肚艾维醒：
可以刚好卡到render这了搜了一下解决完美
评：iview关于表格合并拆分的技巧
哈哈哈哈：
list是什么呢？我用的默认的多选type:'selection'.
评：iview中多选框单选实现方法
国瑞个人博客：
[Vue warn]: Error in render: "TypeError: Canno...
评：live-server配合easy插件快速开发静态页面
国瑞个人博客：
哈哈，你也可以的
评：live-server配合easy插件快速开发静态页面

文章总数： 283 篇
草稿数目： 57 篇
分类数目： 26 个
页面总数： 16 个
评论总数： 251 条
链接总数： 10 个
标签总数： 110 个
建站时间： 865 天
注册用户： 671 人
访问总量： 8853582 次
最近更新： 2019年9月14日

Es6中的导入和导出