Vue3插件推荐和介绍

前言

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

运行原理:

  1. 将每个页面替换为其指定的布局
  2. 在属性中追加原始页。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/sync
    importMode:"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 端表格组件)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

是发财不是旺财

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值