我的第一个vue页面

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>

 

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