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

前端-阿辉

于 2020-05-13 09:38:24 发布

阅读量746

点赞数

CC 4.0 BY-SA版权

分类专栏： Vuejs 文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/bigpatten/article/details/106090952

Vuejs 专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍使用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

在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>

在src/router/index.js文件中导入组件并增加一条路由规则

import User from '../components/User.vue'

const routes = [
  // 这是新增的规则
  { path: '/user', component: User }
]

在根组件的位置编写路由出口

<router-view></router-view>

接着我们就可以访问：http://localhost:8080/#/user 查看效果

总结：一般步骤如下

创建单文件组件
在对应的路由文件中引入组件
配置组件路由
编写单文件组件的内容