VUE脚手架

src/assets目录放图片

src/components目录放组件  template(vue)  + script(js)  +  style(css)

放二级及一下模块的组件

一个组件可以是一个.vue文件

src/router目录配置路由

src/store目录放数据

src/vives视图，页面展示。放以一级模块的组件

App.vue  跟组件  使用路由链接到其他的组件

main.js 所有组件的配置文件  createApp... 

写一个.vue组件

在router中配置路由

在App.vue中配置router-link

 首先在components中创建Index.vue,dept/Dept.vue,file/OpFile.vue

接下来在router/index中配置路由

{
    path: '/index',
    name: 'index',
    // 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('../components/Index.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    // 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('../components/dept/Dept.vue')
  },
  {
    path: '/file',
    name: 'file',
    // 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('../components/file/OpFile.vue')
  }

 然后在index中链接，<router-link to ="/dept">不要忘记视图显示<router-view>

<template>
	<h3>OA系统首页面</h3>
	<hr/>
	<router-link to ="/dept">部门管理</router-link> |
	<router-link to ="/file">文档管理</router-link> |
	<router-link to ="">邮箱管理</router-link>
	
	<br/>
	<router-view></router-view>
</template>

<script>
</script>

<style>
</style>

现在的点击 OA入口 - 部门管理  跳转出了原来的页面，变得什么都没了，我们要把部门管理和文档管理设置为index的子组件，通过更改路由配置，在index路由配置下加一个childern。代码如下：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Login from '../views/Login.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // 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/AboutView.vue')
  },
  {
    path: '/login',
    name: 'login',
    // 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('../views/Login.vue')
  },
  {
    path: '/index',
    name: 'index',
    // 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('../components/Index.vue'),
	children:[
		{
		  path: '/dept',
		  name: 'dept',
		  // 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('../components/dept/Dept.vue')
		},
		{
		  path: '/file',
		  name: 'file',
		  // 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('../components/file/OpFile.vue')
		}
	]
  }
  
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

 如果自己路由里还有子级路由，还可以接着加childern。