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

们使用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>

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

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

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

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

<router-view></router-view>

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

总结：一般步骤如下

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