在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. 編寫單文件組件的內容