Es6中的导入和导出

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

<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>

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



export {data};

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

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