文章目录

前言
一、项目搭建
二、插件推荐
- vite-plugin-pages
- - 1.安装
  - 2.配置
  - - 路由规则：
    - - 基本路由:
      - 索引路由:
      - 动态路由:
- vite-plugin-vue-layouts
- - 安装：
  - 配置：
- unplugin-vue-components
- UI库
- 表格功能插件

前言

目前打算做一个博客的网站主要分为前台和后台，用室友给好的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

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')

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-typesconst component: DefineComponent<{}, {}, any>export default component
}

路由规则：

基本路由:

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

运行原理：

将每个页面替换为其指定的布局

在属性中追加原始页。children

示例：

router: [ page1, page2, page3 ]

转换后：

router: [layoutA: page1,layoutB: page2,layoutA: page3,
]

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

安装：

 npm install -D vite-plugin-vue-layouts

配置：

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/syncimportMode:"async"}),Layouts()],
})

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')

tsconfig.json设置：

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

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>

转换后：

<template><div><HelloWorld msg="Hello Vue 3.0 + Vite" /></div>
</template><script>
export default {name: 'App'
}
</script>

官方文档：unplugin-vue-components

vite插件表

UI库

Surely Vue
Ant Design Vue

表格功能插件

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

Vue3插件推荐和介绍相关推荐

前端开发常用的Chrome插件推荐
谷歌浏览器简单清爽的界面.因其丰富的插件,成为前端开发者喜欢的浏览器.而易用的插件可以帮助开发者减少开发过程中的大量工作量,带来更加强大的效果.今天给大家推荐几个在程序员中口碑不错非常实用的Chrom ...
python七大神级插件_IntelliJ IDEA 15款超级牛逼插件推荐（自用，超级牛逼）
满满的都是干货所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的 ...
vscode c++插件下载_vscode安装教程及插件推荐
Dawn1分钟前这本篇文章将为大家介绍前端常用编辑软件vscode的安装,与vscode一些好用插件的推荐首先我给大家介绍一下vscode对比其他编译软件的有着什么优越之处. 第一,vscode它 ...
idea代码提示插件_IDEA 插件推荐 —— 让你写出好代码的神器！
概述今天介绍的插件主要是围绕编码规范的.有追求的程序员,往往都有代码洁癖,要尽量减少代码的「坏味道」. 代码静态检查是有很多种类,例如圈复杂度.重复率等.业界提供了很多静态检查的插件来识别这些不合规 ...
Sublime Text 3 安装及插件推荐
本篇介绍跨平台编辑器Sublime Text 3的安装和其插件推荐. 目录: 1.介绍 2.下载安装 3.插件 4.参考资料 1.介绍 Sublime Text具有漂亮的用户界面和强大的功能,例如代码 ...
用vscode编写静态页面_开发中实用的VSCode插件推荐
本篇文章给大家介绍一下开发中实用的VSCode插件推荐.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 工欲善其事必先利其器,以下是本人为前端开发收集的vscode插件,有需要的话赶 ...
vim 环境写 markdown 的插件推荐
vim 环境写 markdown 的插件推荐本文将介绍在vim环境写markdown文档或者博文的一些好用插件 markdown语法高亮及识别博主使用vim-markdown做语法高亮.安装方法很 ...
chrome vue插件_不容错过的 Chrome 插件推荐合集-开发者必备篇
没有安装扩展的浏览器,只发挥了 20% 的功力. 谷歌Chrome浏览器全球市场份额已接近 70%,谷歌浏览器除了本身方便易用外,各种各样的插件也让浏览器的功能发挥到了极致. 今天我们来介绍下不容错 ...
Sublime Text 3 的插件安装（完美解决插件安装出错的问题）及常用插件推荐
一.安装Package Control包 1.用Chrome插件setupvpn翻出去(只要能翻啥都行),然后打开 https://packagecontrol.io/installation 2.下 ...

Vue3插件推荐和介绍