Vue Router Layout 项目教程

Vue Router Layout 项目教程

vue-router-layoutLightweight layout resolver for Vue Router项目地址:https://gitcode.com/gh_mirrors/vu/vue-router-layout

1. 项目的目录结构及介绍

Vue Router Layout 项目的目录结构如下：

vue-router-layout/
├── scripts/
├── src/
│   ├── layouts/
│   └── pages/
├── test/
├── .gitignore
├── .prettierignore
├── .prettierrc.yml
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── tsconfig.json
└── tslint.json

目录介绍

• scripts/: 包含项目的脚本文件。
• src/: 源代码目录，包含布局文件和页面文件。
  • layouts/: 存放布局组件。
  • pages/: 存放页面组件。
• test/: 测试文件目录。
• .gitignore: Git 忽略文件配置。
• .prettierignore: Prettier 忽略文件配置。
• .prettierrc.yml: Prettier 配置文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package-lock.json: 锁定依赖版本文件。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript 配置文件。
• tslint.json: TSLint 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要位于 src/ 目录下，具体包括：

• main.js: 项目的入口文件，负责初始化 Vue 实例和挂载到 DOM。
• router.js: 路由配置文件，定义了应用的路由结构。

main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

router.js

import { createRouter, createWebHistory } from 'vue-router';
import createRouterLayout from 'vue-router-layout';

const RouterLayout = createRouterLayout(layout => {
  return import('@/layouts/' + layout + '.vue');
});

const routes = [
  {
    path: '/',
    component: RouterLayout,
    children: [
      {
        path: '',
        component: () => import('@/pages/index.vue')
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

3. 项目的配置文件介绍

项目的配置文件主要包括：

• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript 配置文件。
• tslint.json: TSLint 配置文件。
• .prettierrc.yml: Prettier 配置文件。

package.json

{
  "name": "vue-router-layout",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "eslint": "^7.0.0",
    "eslint-plugin-vue": "^7.0.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
     

vue-router-layoutLightweight layout resolver for Vue Router项目地址:https://gitcode.com/gh_mirrors/vu/vue-router-layout