在vue-cli项目中创建一个新组建并配置路由

本文详细介绍使用Vue脚手架创建项目后的目录结构,重点讲解src/components、src/router及src/main.js等关键文件的作用。通过实例演示如何创建User.vue组件,配置路由规则,并在页面上显示组件内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

们使用Vue脚手架工具创建好项目以后,其目录结构是这样的:
在这里插入图片描述
在这里面的很多内容是示例内容,是可以删除的,实际开发中我们经常使用且比较有用的文件是:

  • src/components/ 目录
  • src/router/ 目录及其文件
  • src/main.js
  • src/App.vue

创建一个自己的组件,比如叫:User.vue

  1. src/components/目录中新建一个User.vue 单文件组件,并编写内容
<template>
  <div>
    <p>我是User组件</p>
  </div>
</template>

<script>
export default {}
</script>

<!--这里使用less的话,需要安装less和less-loader-->
<style lang='less' scoped>
p {
  color: red;
}
</style>
  1. src/router/index.js文件中导入组件并增加一条路由规则
import User from '../components/User.vue'

const routes = [
  // 这是新增的规则
  { path: '/user', component: User }
]
  1. 在根组件的位置编写路由出口
<router-view></router-view>
  1. 接着我们就可以访问:http://localhost:8080/#/user 查看效果

总结:一般步骤如下

  1. 创建单文件组件
  2. 在对应的路由文件中引入组件
  3. 配置组件路由
  4. 编写单文件组件的内容
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值