前言 ¶

├── .husky                                // git hook
├── .vscode                               // vscode 配置目录
├── dist                                  // 打包后目录
├── eslintrc                              // eslint配置目录
│   ├── eslint-config.js                  // eslint配置文件
│   ├── .eslintrc-auto-import.json        // unplugin-auto-import生成的配置文件
├── mock                                  // 项目mock 模拟数据
├── typings                               // typescript配置目录
│   ├── basic.d.ts                        // 配置router,store等类型
│   ├── env.d.ts                          // vite相关类型
│   ├── global.d.ts                       // 全局类型
│   ├── shims-vue.d.ts                    // 识别.vue文件
│   ├── auto-imports.d.ts                 // unplugin-auto-import生成
│   ├── components.d.ts                   // unplugin-vue-components生成
├── src                                   // 源代码
│   ├── api                               // 所有请求
│   ├── assets                            // 主题 字体等静态资源
│   ├── components                        // 全局公用组件
│   ├── directive                         // 全局指令
│   ├── hooks                             // hook相关
│   ├── icons                             // 项目所有 svg icons
│   ├── router                            // 路由相关
│   ├── store                             // 全局 store管理
│   ├── styles                            // 全局样式
│   ├── utils                             // 全局公用方法
│   ├── lang                              // i18n语言
│   ├── views                             // 页面组件
│   ├── App.vue                           // 入口页面
│   ├── main.js                           // 入口 加载组件 初始化等
│   └── permission.js                     // 权限管理
│   └── settings.js                       // 全局静态页面配置（是否显示侧边栏等）
├── .editorconfig                         // 编辑器属性配置
├── .env.build                            // 打包时生成环境配置（可通过--mode进行指定）
├── .env.build-test                       // 构建测试环境的配置（可通过--mode进行指定））
├── .env.serve-dev                        // 开发时开发环境配置（可通过--mode进行指定）
├── .env.serve-test                       // 开发时测试环境配置（可通过--mode进行指定）
└── .eslintignore                         // eslint 忽略项
└── .eslintrc.js                          // eslint 配置
└── .gitignore                            // git 忽略项
└── .prettierrc                           // pretties 配置文件
└──  mock-prod-server.ts                  // 生产mock配置文件
└── .npmrc                                // npm配置文件
└──  index.html                           // 打包时主入口文件
├──  tsconfig.base.json                   // typescript配置基础文件
└──  tsconfig.json                        // typescript配置入口文件
└──  package.json                         // package.json
└──  vite.config.js                       // vite 配置

viteSvgIcons({
  // config svg dir that can config multi
  iconDirs: [path.resolve(process.cwd(), 'src/icons/common'), path.resolve(process.cwd(), 'src/icons/nav-bar')],
  // appoint svg icon using mode
  symbolId: 'icon-[dir]-[name]'
}),

{
    /*
      path,component,redirect为vue-router本身，这里不做介绍
    */
    path: '/writing-demo',
    component: Layout,
    redirect: '/writing-demo/keep-alive',
    /*
      meta：下面介绍
      alwaysShow-> default:false; true:当有一个子元素时显示父级；false:当有一个子元素时,不显示父级
      hidden-> default:false; true:侧边栏中隐藏当前标签，包括其children；
    */
    meta: { title: 'Writing Demo', icon: 'eye-open' },
    alwaysShow: true,
    hidden:false
    children: [
      {
        path: 'keep-alive',
        component: () => import('@/views/example/keep-alive'),
         /*
   	   name-> 路由跳转时的name;keep-alive缓存时的name,建议必写
         */
        name: 'KeepAlive',
        //cachePage: cachePage when page enter, default false
        //leaveRmCachePage: remove cachePage when page leave, default false
         /*
   	   meta属性介绍:
           title：sideBar显示的名称
           cachePage->default:false;true->页面初始加载会进行缓存;
           leaveRmCachePage->default:false;true->页面离开后会移除本页面缓存
           activeMenu：要选中那个侧边栏item,如列表页跳转到详情页(设置为hidden)，如果想要还选中高亮列表页可以设置activeMenu:"列表页的链接"
         */
        meta: { title: 'Keep-Alive', cachePage: true, leaveRmCachePage: false }
      },
      {
        path: 'router-demo-f',
        name: 'routerDemoF',
        hidden: true,
        component: () => import('@/views/example/keep-alive/RouterDemoF.vue'),
        meta: { title: 'RouterDemo-F', activeMenu: '/writing-demo/keep-alive' }
      }
    ]
  },