vue3,vite2 我就不吹了,用过的都说好.话不多说,上链接:
这个模板我叫它fuep admin,如果对你有帮助的话,记得给个 star 哦.
clone 仓库代码,建议 node 版本 12+
npm i
npm run dev
< script setup>
,则需要添加 Volar用过 nuxt 的同学肯定知道,路由可以根据你的文件目录生成,这样你就不用在每次新增页面的时候往 route 里面加配置.vite2 当然也有自动生成路由的插件,它支持生成嵌套路由,动态路由等.
跟自动生成路由搭配的是,自动生成 layout,你可以通过配置 route,指定使用任意 layout.例如,在后台管理系统中,layout 通常由 header,aside 组成.但是像 login 这样的页面就没有 layout.假设,index.vue 需要 layout,login 不需要 layout 你可以这样做:
<!-- layout/default.vue -->
<header />
<aside />
<router-view></router-view>
<!-- layout/pure.vue -->
<router-view></router-view>
<!-- index.vue -->
<template>Index</template>
<route lang="yaml">
meta:
layout: default
</route>
<!-- login.vue -->
<template>Login</template>
<route lang="yaml">
meta:
layout: pure
</route>
通常,我们使用 componets 中定义的公共组件,需要这样做:
<template>
<helloWorld/>
</template>
<script>
import { helloWorld } from '@/components/helloWorld.vue'
default export {
componetns: {
helloWorld
}
}
</script>
现在你只需要:
<template>
<helloWorld/>
</template>
插件会检测你在 template 中使用到的组件,自动 import 并注册到 componets 中.当然,通过配置你也可以指定其它目录的组件自动导入.
这是支持的图标库,图标是按需引入的,不用担心它的体积.你可以这样使用它:
<script setup>
import IconAccessibility from 'virtual:vite-icons/carbon/accessibility'
import IconAccountBox from 'virtual:vite-icons/mdi/account-box'
</script>
<template>
<icon-accessibility/>
<icon-account-box style="font-size: 2em; color: red"/>
</template>
什么?每个图标都要 import 这也要烦了吧!开个玩笑,我们使用了vite-plugin-components之后,你只需要这样:
<template>
<i-carbon-accessibility/>
<i-mdi-account-box style="font-size: 2em; color: red"/>
</template>
windicss允许你通过原子 class 的方式来组织样式文件.常规情况下,写一个按钮的样式:
<template>
<div class="btn">按钮</div>
</template>
<style scoped>
.btn{
color: #fff;
background: #333
padding: 12px 24px;
}
</style>
使用 windcss 之后,你可以这样干:
<template>
<div class="px-4 py-2 text-white bg-gray-700">按钮</div>
</template>
windicss 通过扫描文件的方式,来找到你使用到了哪些样式,并且按需引入他们,所以完全不用担心样式体积,而且随着你的项目越来越大,样式文件体积不会出现爆炸增长并且更易于维护.
搭配 vscode 插件WindiCSS IntelliSense,能更快地帮助你完成这些重复的样式,再也不用为 class 命名而烦恼了.
通过给 html 标签添加class="dark"
,开启暗黑模式.这部分的逻辑我已经帮你写好了.dark theme 是这样做的:
<p class="text-gray-700 bg-white dark:text-white dark:bg-gray-800">theme</p>
通常情况下,p 标签会使用白底灰字,使用 dark theme 时,dark 选择器后的样式优先生效,这时是灰底白字.
这是效果图:
前面我们说过,你可以通过 route 标签来配置 layout.同样地,你也可以通过 route 标签来配置页面层级,和它的名字.
<route lang="yaml">
meta:
level: 1
name: 'Home'
layout: default
</route>
面包屑会根据 level 进行排序,这种面包屑不是严格意义上的记录用户的浏览路径,而是根据你对产品结构的层级定义来的.一般来说,列表页的 level 如果为 1,那么详情页的 level 就为 2.
面包屑导航的状态存在 vuex 中,使用vuex-persistedstate来做持久化,你可以试着刷新页面,导航状态并不会丢失.
vite2 中的多环境配置,跟 vue-cli 差不多,主要是通过,.env 文件来控制的,不再赘述. 如果你不了解,可以看环境变量与模式
你可以把一个 svg 文件,当作一个组件使用:
<template>
<Notfound />
</template>
<script lang="ts" setup>
import Notfound from '../assets/404.svg'
</script>
使用 script setup 语法糖,会自动在 components 里面注册
你可以在这 fuep admin 中,使用fuep物料市场中的物料,而不需要做任何配置.假如你不喜欢 fuep admin 中已有的登录页,你可以在物料市场中找一个你喜欢的物料,点击生成代码,这些代码可以直接使用到你的 login.vue 中.
fuep admin 我会一直维护它,如果你发现了一个 bug,或者想要新的功能可以给我反馈.
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.