Vue3插件推荐和介绍_virtual:generated-pages

前言

目前打算做一个博客的网站主要分为前台和后台，用室友给好的Api去进行项目实践
目的：这次的项目主要是学习Vue3的新语法和一些新的插件
技术选型：Vue3+Ts+vite+WindiCss+Ant Design Vue

功能列表：
黑色为必实现功能，灰色为可选功能

---

一、项目搭建

此次项目搭建用的是Vite，技术选型使用的是Vue3+Ts这里就不演示怎么搭建了
vite官方文档（vite框架文档、api等）
vite笔记
vue官方文档（vue3语法、新特性等）
vue模板项目（官方项目模板，引入了许多常用插件）

二、插件推荐

vite-plugin-pages

描述： vue3根据文件自动生成路由的插件
作用： 为 pages 目录中的 Vue 组件自动生成路由配置。

官方文档： vite-plugin-pages

1.安装

npm install -D vite-plugin-pages
npm install vue-router
1
2

2.配置

vite.config.js设置：

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router';
import routes from 'virtual:generated-pages'

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

const app = createApp(App)
createApp(App).use(router).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12

env.d.ts设置：

/// <reference types="vite/client" />
// 三斜指令是包含单个XML标签的注释，注释内容会作为编译器指令使用
/// <reference types="vite-plugin-pages/client" />
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}
1
2
3
4
5
6
7
8
9

路由规则：

基本路由:

src/pages/users.vue -> /users
src/pages/users/profile.vue -> /users/profile
src/pages/settings.vue -> /settings

索引路由:

src/pages/index.vue -> /
src/pages/users/index.vue -> /users

动态路由:

src/pages/users/[id].vue -> /users/:id (/users/one)
src/pages/[user]/settings.vue -> /:user/settings (/one/settings)

任何动态参数都将作为 props 传递到页面。例如，给定文件 ，路由将传递以下属性：src/pages/users/[id].vue/users/abc

vite-plugin-vue-layouts

描述： 使用 Vite 的 Vue 3 应用程序的基于路由器的布局
作用： 页面可以自由组合布局，可以在页面加载指定的layout

运行原理：

1. 将每个页面替换为其指定的布局
2. 在属性中追加原始页。children

示例：

router: [ page1, page2, page3 ]
1

转换后：

router: [
  layoutA: page1,
  layoutB: page2,
  layoutA: page3,
]
1
2
3
4
5

官方文档： vite-plugin-vue-layouts

安装：

 npm install -D vite-plugin-vue-layouts
1

配置：

vite.config.js设置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Page from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'
export default defineConfig({
  plugins: [vue(),
  Page({
    //指定需要生成路由的文件夹
    dirs:[{dir:"src/pages",baseRoute:""}],
    // 全局路由加载方式async/sync
    importMode:"async"
  }),
    Layouts()
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

main.js设置：

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router';
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'

const router = createRouter({
  history: createWebHistory(),
  routes: setupLayouts(generatedRoutes),
})
const app = createApp(App)
createApp(App).use(router).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12

tsconfig.json设置：

// 定义客户端类型
"types": ["vite-plugin-vue-layouts/client"],

1
2
3

unplugin-vue-components

描述： 按需组件自动导入 Vue。
作用： 省略import导入
未转换的：

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

转换后：

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
1
2
3
4
5
6
7
8
9
10
11

官方文档：unplugin-vue-components

vite插件表

UI库

Surely Vue
Ant Design Vue

表格功能插件

vxetable（一个基于 vue 的 PC 端表格组件）