docs: 文档更新

README.md

@@ -46,11 +46,11 @@ npm run fix
 npm run prettier
 ```
 
-## 开发
-### 分支
+## 开发流程
 `develop`: 开发分支
 
 ### 目录结构
+
 ├── CHANGELOG.md    // 更新日志
 ├── README.md
 ├── babel.config.js
@@ -65,7 +65,7 @@ npm run prettier
 ├── src  // 源码目录
 │   ├── App.vue   // 入口文件
 │   ├── assets
-│   ├── components  // 组件目录
+│   ├── components  // **组件目录**
 │   ├── main.js
 │   ├── registerServiceWorker.js
 │   ├── router
@@ -78,6 +78,8 @@ npm run prettier
 1. 页面级组件（通俗理解为与路由对应的组件）统一放在`views`目录下。
 2. 页面组件内的小组件、功能组件统一放在`components`目录下。例如，页面组件`pageA.vue`中拆分出了`pageheader.vue`组件，那么在`components`目录下新建一个**与页面同名的`pageA`目录**，`pageA`的相关组件放进去即可。
 
+### layout布局使用
+
 ## Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
 ****

src/components/layout/index.js

+import defaultLayout from '@/components/layout/default.vue'
+import layoutA from '@/components/layout/layoutA.vue'
+
+export default [defaultLayout, layoutA]

src/layout/layoutA.vue → src/components/layout/layoutA.vue

@@ -4,11 +4,11 @@
             <router-link to="/">
                 Home
             </router-link>
-            <router-link to="/about">
-                About
+            <router-link to="/page1">
+                page1
             </router-link>
-            <router-link to="/bao2">
-                bao2
+            <router-link to="/page2">
+                page2
             </router-link>
         </div>
         <router-view> </router-view>

src/components/sideNav/index.vue

@@ -3,11 +3,11 @@
         <router-link to="/">
             Home
         </router-link>
-        <router-link to="/about">
-            About
+        <router-link to="/page1">
+            page1
         </router-link>
-        <router-link to="/bao2">
-            bao2
+        <router-link to="/page2">
+            page2
         </router-link>
     </div>
 </template>

src/layout/index.js

-import defaultLayout from '@/layout/default.vue'
-import layoutA from '@/layout/layoutA.vue'
-
-export default [defaultLayout, layoutA]

src/main.js

@@ -7,7 +7,7 @@ import './assets/style/index.scss'
 import axios from 'axios'
 import VueBus from 'vue-bus'
 import VModal from 'vue-js-modal'
-import layoutComponents from '@/layout/index.js'
+import layoutComponents from '@/components/layout/index.js'
 
 // 全局注册layout组件
 layoutComponents.forEach((layout) => Vue.component(layout.name, layout))

src/router/index.js

@@ -7,29 +7,29 @@ Vue.use(VueRouter)
 const routes = [
     {
         path: '/',
-        name: 'Bao3',
+        name: 'home',
         meta: {
             layout: 'DefaultLayout',
             title: '首页'
         },
-        component: () => import(/* webpackChunkName: "about" */ '../views/bao3.vue')
+        component: () => import(/* webpackChunkName: "about" */ '../views/home.vue')
     },
     {
-        path: '/bao2',
-        name: 'Bao2',
-        component: () => import(/* webpackChunkName: "about" */ '../views/bao2.vue')
+        path: '/page1',
+        name: 'Page1',
+        component: () => import(/* webpackChunkName: "about" */ '../views/page1.vue')
     },
     {
-        path: '/about',
-        name: 'About',
+        path: '/page2',
+        name: 'page2',
         meta: {
             layout: 'layout-a',
-            title: '页面1'
+            title: '页面2'
         },
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+        component: () => import(/* webpackChunkName: "about" */ '../views/page2.vue')
     }
 ]
 

src/views/bao2.vue → src/views/home.vue

 <template>
     <div class="comp-bao2">
-        <h2>bao2</h2>
+        <h1>home</h1>
     </div>
 </template>
 

src/views/bao3.vue → src/views/page1.vue

 <template>
-    <div class="comp-bao2">
-        <h1>bao3</h1>
+    <div class="page1">
+        <h1>页面1</h1>
     </div>
 </template>
 

src/views/About.vue → src/views/page2.vue

 <template>
-    <div class="about">
-        <!-- <default-layout></default-layout>
-        <layout-a></layout-a> -->
-        <h1>about</h1>
+    <div class="page2">
+        <h1>页面2</h1>
     </div>
 </template>