快速地a4v 创建 Web 应用
- TypeScript 支持
- Vue3 + Vite 就是快
- NaiveUI 组件自动加载
- 函数自动加载
- VueUse 无需引入直接使用
- 基于文件的路由
- 布局系统
- 使用 Pinia 状态管理
- UnoCSS 原子化 CSS 引擎
- 各种图标集
- 多语言支持
- 主题配置
- NaiveUI - 一个 Vue 3 组件库
- UnoCSS - 一个高性能且极具灵活性的即时原子化 CSS 引擎
- Iconify - 开源的图标库
- UnoCSS - 纯 CSS 图标方案
- unplugin-vue-router - 基于文件的路由
- vite-plugin-vue-layouts - 布局系统
- unplugin-auto-import - 自动导入插件
- unplugin-vue-components - 自动导入组件
- unplugin-vue-i18n - 多语言插件
- vite-plugin-vue-devtools - 旨在增强 Vue 开发者体验的 Vite 插件
- Pinia - 使用 Composition API 的轻便灵活的 Vue 状态管理
- VueUse - 实用的 Composition API 工具合集
pnpm dev
pnpm build
pnpm up
pnpm lint
pnpm lint:fix
const themeSetting = {
themeMode: 'auto',
lightThemeColor: {
primaryColor: '#18A058',
infoColor: '#2080F0',
successColor: '#18A058',
warningColor: '#F0A020',
errorColor: '#D03050',
},
darkThemeColor: {
primaryColor: '#63e2b7',
infoColor: '#70c0e8',
successColor: '#63e2b7',
warningColor: '#f2c97d',
errorColor: '#e88080',
},
layoutMode: 'vertical',
header: {
show: true,
height: 64,
inverted: false,
},
sider: {
show: true,
width: 240,
collapsedWidth: 64,
collapsed: false,
inverted: false,
},
footer: {
show: true,
height: 64,
inverted: false,
},
page: {
animate: true,
animateMode: 'fade-slide',
loadingBar: true,
},
}
export const pageAnimateModeOptions = [
{ value: 'fade', label: '淡入淡出' },
{ value: 'fade-slide', label: '滑动' },
{ value: 'fade-top', label: '顶部消退' },
{ value: 'fade-bottom', label: '底部消退' },
]
const { setting } = storeToRefs(useThemeStore())
- 明亮
- 暗黑
- 系统
const themeStore = useThemeStore()
themeStore.toggleMode('dark') // dark
console.log(themeStore.mode.value) // 'light' | 'dark' | 'auto'
const configProviderProps = useNaiveConfigProvider()
<NConfigProvider v-bind="configProviderProps"> ... </NConfigProvider>
⚠️ 请在 router 注册后使用
const { dialog } = useNaiveApi()
dialog.warning('warning!')