首页 > 其他分享 >我的第一个vue页面

我的第一个vue页面

时间:2023-03-12 21:56:52浏览次数:33  
标签:文件 vue 第一个 views HelloView 路由 页面

1.使用编辑器打开我们使用vue-cli创建的项目

2.创建自己的vue文件

  1)在views文件夹中创建vue组件

  注意:首字母大写 eg. HelloView.vue

<!-- 在页面中显示的内容 -->
<template>

</template>

<!-- 声明的变量和js函数 -->
<script>

</script>

<!-- css样式 -->
<style>

</style>

3.在router文件夹中的index.js文件中配置vue组件对应的路由

// 使用import引入要配置的vue文件并设置名称
import HelloView from '@/views/HelloView.vue'

之后在下方的routes数组中添加路由的配置

,
  {
    path:'/hello',
    component:HelloView
  }

 4.在App.vue文件中通过router-link访问配置的路由

<router-link to="/hello">
      我的第一个页面
</router-link>

 

运行项目之后我们就能看见

标签:文件,vue,第一个,views,HelloView,路由,页面
From: https://www.cnblogs.com/hyy-0/p/17209273.html

相关文章