vite-vue3-template

快速生成 vite vue3 项目的模块

功能

• vue3 (渐进式 JavaScript 开发框架)
• vite (构建工具)
• pnpm （包管理工具）
• vite-plugin-eslint （vite 中提示 eslint 错误）
• vite-plugin-pages（基于文件生成路由）

  • 基本路由：会将指定目录下的文件映射成相同名称的路由

    src/views/home.vue -> /home
    src/views/home/about -> /home/about

  • 索引路由：文件名为 index 被视为路由的索引页

    src/views/index.vue -> /
    src/views/home/index.vue -> /home

  • 动态路由：使用方括号来表示。目录和文件都可以是动态的

    src/views/detail/[id].vue -> /detail:id -> 得到参数：{ id: xxx }
    src/views/[user]/settings.vue -> /:user/settings -> 得到参数：{ user: xxx }

  • 嵌套路由：父组件可以通过赋予它与包含您的子路由的目录相同的名称来定义。

      src/pages/
        ├── users/
        │  ├── [id].vue
        │  └── index.vue
        └── users.vue
      // transform
      [
        {
          "path": "/users",
          "component": "/src/pages/users.vue",
          "children": [
            {
              "path": "",
              "component": "/src/pages/users/index.vue",
              "name": "users"
            },
            {
              "path": ":id",
              "component": "/src/pages/users/[id].vue",
              "name": "users-id"
            }
          ]
        }
      ]

  • 全匹配路由：404 匹配所有路径。

    src/views/[...all].vue -> /*

• vite-plugin-vue-layouts （生成 vue 路由布局）
• pinia （vue 的状态管理库）
• commitlint，配置步骤 （git 提交信息规范化）
• typescript JavaScript 类型超集）
• unocss （原子化css引擎）
• @unocss/preset-icons（unocss-css图标预设）

  • 图标提供可以下载 iconify 关联的包或者通过配置自定义图标集合

  • 如下：在 icon-sets 网站找到需要的图标，在 npm 搜索 @iconify-json/[图标前缀] 下载即可使用。

    pnpm i -D @iconify-json/line-md

  • 使用 i-[图标前缀]-[图标名] 或 i-[图标前缀]:[图标名]

    <div class="i-line-md-account"></div>