基于 vue3，vite2 的 admin 模板

18571531064 — Fri, 28 May 2021 09:44:33 +0800

vue3,vite2 我就不吹了,用过的都说好.话不多说,上链接:

这个模板我叫它fuep admin,如果对你有帮助的话,记得给个 star 哦.

快速开始

clone 仓库代码,建议 node 版本 12+

npm i
npm run dev

vscode 插件

如果你使用了< script setup>，则需要添加 Volar
WindiCSS IntelliSense，用于 windicss 的样式提示

工程特性一览

自动生成路由
自动导入组件
支持多个图标库,图标按需加载
支持 tailwindcss
明暗主题切换
导航状态持久化
多环境配置
支持 svg 组件
物料库

自动生成路由

用过 nuxt 的同学肯定知道,路由可以根据你的文件目录生成,这样你就不用在每次新增页面的时候往 route 里面加配置.vite2 当然也有自动生成路由的插件,它支持生成嵌套路由,动态路由等.

vite-plugin-pages

跟自动生成路由搭配的是,自动生成 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 中.当然,通过配置你也可以指定其它目录的组件自动导入.

vite-plugin-components

支持近百种图标库

这是支持的图标库,图标是按需引入的,不用担心它的体积.你可以这样使用它:

<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>

vite-plugin-icons

支持 windicss

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 引入

你可以把一个 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,或者想要新的功能可以给我反馈.

掌上饥荒

18571531064 — Wed, 10 Mar 2021 18:08:45 +0800

w2solo 社区的 xdm，大家好，我是新来的独立开发，火叶，混个脸熟，哈哈。

今年三月份离职，现在全职做独立开发。我的第一个产品——《掌上饥荒》。掌上饥荒是一款信息查询类 app，玩过饥荒的小伙伴应该知道。掌上饥荒

这个项目是我从 17 年就开始开发的项目，现在已经有 app，wap 站，小程序，官网，后台管理系统。小程序的用户量有 10 万左右。

开始这个项目前，我一直以为独立开发者挣钱超容易，开发个网页只要有一定量用户，丢点广告上去就能躺着挣钱。做完才发现，独立开发要一个人要承担一个团队的工作量，从产品，设计，开发，测试，部署，运营都得自己一个人做，经常是女朋友都睡了，我还在看文档。（目前已经分手，有女独立开发可以联系我哦）

再说躺着挣钱，没有企业资质的话，独立开发限制很多。例如：

大部分的广告平台只允许企业级入驻
应用市场要软著才能提交（个人开发者也可以申请，有些需要企业资质）
苹果应用市场无法上架 webApp
小程序很多功能只开放给企业级而且很多类目做不了

这就导致了独立开发通过 app 变现的手段很少。而且，一开始做的时候，我关注点只有技术实践和用户体验，以致于上了很多云服务，而变现手段又很少，一直在亏损，所以刚开始做的时候一定不要过度优化！现在盈利比较方便的应该是小程序了，自带广告组件，统计分析和用户反馈，打算做 app 之前先做个小程序总是没错的。

抛开技术来说，还是学到了不少东西。例如，MVP 原则，当你设想一个产品很赚钱的时候，先去打造一个最小可行性产品让市场来验证是否真的可行。另外，大家经常说细分领域机会多，但是你也应该知道细分领域就意味这小众，你的天花板很低哪怕是服务好来这些用户，但是体量太小导致养不活你做的产品最后还是得死。

再来说说我对独立开发的看法，从个人发展角度上讲，我们这群人没有 30 岁中年危机，不会跟产品撕逼，会为了每一个微小的成功而喜悦，可以服务于自己的想法而 coding，光是这些就足以让我抛弃看上去很可靠的 996 生活以及高级职称。我也很享受目前这种状态，开始认真规划自己的生活，关注自己的财务状况，有时间看书，不容易烦躁。

说了一些很琐碎的东西，都是独立开发者这些年来的一些感悟，与大家共勉。

18571531064 (火叶)