搭建开箱即用的vue3框架 _vue3框架

文章插图

前言

项目开发困难，搭建项目浪费时间，文档七零八落，上班没时间划水（其实我想有更多的时间学习，提高自己的） 。那么干货福利来了，以下一些好的插件和配置，还有相应的链接地址，你还怕没时间划水吗^0^复制代码

option

1. Vite 的 2. Vue3 的3. 文件路由4. 布局系统5.Mock 支持6. Api 自动引入7. 组件自动引入8. 图标自动引入9.VueUse 支持10. TypeScript 的11. Windi css 的12. 暗黑模式支持13. SWR 请求支持14. pinia 状态管理15. pnpm 包管理器16. 跳转进度条支持17. Inspect 调试支持18. 插件自动加载支持19. Vitest 单元测试支持20. 支持 Markdown 渲染21. 路径别名 `~` 支持22. 命令行自动创建与删除23. i18n 国际化支持24. 漂亮的 404页 支持25. tsx 支持26. gzip 资源压缩支持27. 环境变量配置支持复制代码

官网
Gitee
Github
网易云课堂

友情链接1. Vite 的该模板采用 vite 作为构建工具，你可以在根目录下的 vite.config.ts 对项目的构建进行配置。
对于众多主流插件的引入和繁杂配置已经整合到根目录下的预设 presets 中，大多数情况下你是不需要重新对它们进行配置的。

2. Vue3 的
3. 文件路由目录结构即路由。
eg:

src/pages/index.vue => /
src/pages/about.vue => /about
src/pages/users/index.vue => /users
src/pages/users/profile.vue => /users/profile
src/pages/users/[id].vue => /users/:id
src/pages/[user]/settings.vue => /:user/settings
src/pages/[...notFound].vue => 404 路由

具体可见 vite-plugin-pages

4. 布局系统默认布局src/layouts/default.vue 将作为默认布局。
<template>我是默认布局<router-view /> </template>此时 src/pages/index.vue
<template><div>我是首页</div> </template>路由到 /时，页面将渲染
我是默认布局我是首页此时 src/pages/about.vue
<template><div>我是关于页</div> </template>路由到 /about 时，页面将渲染
我是默认布局我是关于页
非默认布局随便创建一个 src/layouts/custom.vue

<!-- src/layouts/custom.vue --><template>我是非默认布局custom<router-view /> <!-- 页面视图出口 --></template>

此时 src/pages/index.vue 内

<!-- src/pages/index.vue --><template><div>我是首页</div> </template><!-- 添加自定义块--><route lang="yaml">meta:layout: custom</route>

此时路由到 /, 页面将渲染
我是非默认布局custom我是首页具体可见 vite-plugin-vue-layouts

5. Mock 支持在根目录下的 mock 目录下，可以在模块中导出默认的 api 资源。
例如 mock/test.ts 内导出

import { MockMethod } from 'vite-plugin-mock'export default [{url: '/api/get',method: 'get',response: () => {return {code: 0,data: {name: 'vben'}}}}] as MockMethod[]

在 src 中就可以进行模拟请求。

<script setup lang="ts">import { useRequest } from "vue-request"// 请求接口 /api/getconst { data, loading, error } = useRequest('/api/get') </script><template><div>data: {{data}}</div><div>loading: {{loading}}</div><div>error: {{error}}</div></template>

这里用到 vue-request 去做请求，不过因为该 mock 拦截的是一整个接口，所以换成 axIOS 等请求库也是可以的。
更多 mock 设置可见 vite-plugin-mock

6. Api 自动引入原本 vue 的 api 需要自行 import 。
import { ref, computed } from 'vue'const count = ref(0)const doubled = computed(() => count.value * 2)现在可以直接使用。
const count = ref(0)const doubled = computed(() => count.value * 2)而且上边的 api 是按需自动引入的。
目前模板支持自动引入 api 的库列表包括: