vue新建页面

2024年4月12日 131次阅读 来源: weixin_44694538

在src下面新建view文件夹，然后新建一个vue页面(以/src/view/home.vue为例)
vue页面中只能是template为最外层标签，里面有且仅有一个div标签

<template>
    <div class="home">
        <div class="title">这是一个{
   {msg}}页面</div>
    </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'data-home'
    }
  }
}
</script>
<style lang="less">
    .home{
        background-color: aqua;
        .title{
            font-size: 40px;
            letter-spacing: 2px;
        }
    }
</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/view/home'

Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        name: 'Home', //和页面中export中的name对应
        component: Home //component和上面import的Home对应
    }, {
        path: '/HelloWorld',
        name: 'HelloWorld',
        component: HelloWorld
    }]
})
    原文作者：weixin_44694538
    原文地址: https://blog.csdn.net/weixin_44694538/article/details/124011159
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞