vue-demo

使用WebStorm打开vue项目等待ide索引加载完成


注意要让WebStorm可以创建vue文件需要以下步骤:

<template>

</template>

<style lang="scss">

</style>

<script>
    export default {
        data: {

        },
        methods: {
            
        }
    }
</script>

demo1 构建一个简单的Vue导航栏菜单实例

1.新建组件文件夹（pages）及文件（index、userCenter、userInfo）：

index.vue代码：

<template>
    <div>
        <p>这是首页</p>
    </div>
</template>

<style lang="scss">
    p{
        display: block;
        background: #ffe87c;
    }
</style>

<script>
    export default {}
</script>

userCenter.vue代码：

<template>
    <div>
        <p>这是个人中心</p>
        <router-link to="/userCenter/userInfo">用户信息</router-link>
        <router-view></router-view>
    </div>
</template>

<style lang="scss">
    p{
        display: block;
        background: #d6e9c6;
    }
</style>

<script>
    export default {}
</script>
</style>

userInfo.vue代码：

<template>
    <div>
        <p>我的名字是：Heaton</p>
    </div>
</template>

<style lang="scss">
    p{
        display: block;
        background: #77FFFF;
    }
</style>

<script>
    export default {}
</script>

2.在路由配置文件中，导入新建的组件。（index.js我们不用了）