# vue3-micro

**Repository Path**: skyhao/vue3-micro

## Basic Information

- **Project Name**: vue3-micro
- **Description**: vue3全家桶（element-plus，vueuse，unocss，pinia，vxe-table）
vite.config预设（组件自动引入，UnoCSS，Layouts自动生成路由，vite-qiankun，Inspector索引文件）
搜索组件，表单组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-10-16
- **Last Updated**: 2023-10-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<br/>
<br/>

<h3 align='center'>
快速地创建 Web 应用
</h3>
<br/>

## 特性

- ⚡️ [Vue 3](https://github.com/vuejs/core), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/), [esbuild](https://github.com/evanw/esbuild) - 就是快！

- 🔨 [qiankun](https://qiankun.umijs.org/zh/) - 可能是你见过最完善的微前端解决方案

- 🗂 [基于文件的路由](./src/pages)

- 📦 [组件自动化加载](./src/components)

- 🍍 [使用 Pinia 的状态管理](https://pinia.vuejs.org)

- 📑 [布局系统](./src/layouts)

- 🎨 [UnoCSS](https://github.com/unocss/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎

- 🎉 [element-plus](https://element-plus.gitee.io/zh-CN/) - 基于 Vue 3，面向设计师和开发者的组件库

- 😃 [各种图标集为你所用](https://github.com/antfu/unocss/tree/main/packages/preset-icons)

- 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)

- 🤙🏻 默认开启 [响应性语法糖](https://vuejs.org/guide/extras/reactivity-transform.html)

- 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入

- 🦾 TypeScript, 当然
<br>

## 预配置

### UI 框架

- [UnoCSS](https://github.com/antfu/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎

### Icons

- [Iconify](https://iconify.design) - 使用任意的图标集，浏览：[🔍Icônes](https://icones.netlify.app/)
- [UnoCSS 的纯 CSS 图标方案](https://github.com/antfu/unocss/tree/main/packages/preset-icons)

### 插件

- [Vue Router](https://github.com/vuejs/router)
  - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - 以文件系统为基础的路由
  - [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - 页面布局系统
- [Pinia](https://pinia.vuejs.org) - 直接的, 类型安全的, 使用 Composition API 的轻便灵活的 Vue 状态管理
- [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - 自动加载组件
- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 等，无需导入
- [`unplugin-vue-components/resolvers`](https://github.com/antfu/unplugin-vue-components)- 自动引入element-plus组件
- [`VueUse`](https://github.com/antfu/vueuse) - 实用的 Composition API 工具合集
- [`vite-plugin-qiankun`](https://github.com/tengmaoqing/vite-plugin-qiankun) - 帮助应用快速接入乾坤的vite插件
- [`vite-plugin-compression`](https://github.com/vbenjs/vite-plugin-compression) - 使用 gzip 或者 brotli 来压缩资源
- [`vite-plugin-style-import`](https://github.com/vbenjs/vite-plugin-style-import) - 按需加载vxe-table模块，减少文件体积。
- [`vite-plugin-inspect`](https://github.com/antfu/vite-plugin-inspect) - 检查 Vite 插件的中间状态
- [`rollup-plugin-visualizer`](https://github.com/btd/rollup-plugin-visualizer) - 用于项目性能优化,打包体积分析。生成可视化的构建报告
- [`vite-plugin-vue-inspector`](https://github.com/webfansplz/vite-plugin-vue-inspector) - 点击页面元素自动跳转到本地IDE对应的 Vue 组件
- [`unplugin-icons/vite`, `unplugin-icons/resolver`](https://github.com/antfu/unplugin-icons) - 自动注册element-plus图标组件

### 编码风格

- 使用 Composition API 地 [`<script setup>` SFC 语法](https://github.com/vuejs/rfcs/pull/227)
- [ESLint](https://eslint.org/) 配置为 [@antfu/eslint-config](https://github.com/antfu/eslint-config), 单引号, 无分号.

### 开发工具
- [TypeScript](https://www.typescriptlang.org/)
- [pnpm](https://pnpm.js.org/) - 快, 节省磁盘空间的包管理器
- [VS Code 扩展](./.vscode/extensions.json)
  - [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite) - 自动启动 Vite 服务器
  - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Vue 3 `<script setup>` IDE 支持
  - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - 图标内联显示和自动补全
  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

#### GitHub 模板

[使用这个模板创建仓库](https://gitee.com/yaya_zlj/vue3-micro).

## 使用

pnpm install
### 开发

只需要执行以下命令就可以在 http://localhost:5173 中看到

```bash
pnpm dev

启动微前端命令
pnpm dev:pa-micro
```

### 构建

构建该应用只需要执行以下命令

```bash
pnpm build
```

然后你会看到用于发布的 `dist` 文件夹被生成。