Giter VIP home page Giter VIP logo

vue3-element-admin's Introduction

Vue 3 + Typescript + Vite + element-plus + i18n + pinia + tailwindcss

在线预览
欢迎大家 PR 和 Star 各种操作.

版本

node 18.16.0

功能清单

  • 全屏
  • 内嵌
  • 外链
  • 菜单搜索
  • element-plus 字体大小(统一调整)
  • 404 页面
  • 一键黑白
  • 固定 footer
  • 侧边栏缩进
  • 面包屑
  • TagsView
  • 侧边栏 logo 显示
  • vue-router
  • pinia
  • element-plus(安装 vscode 插件 ---- element-ui-helper, 这样就有了 ts 的 props 提示)
  • element-plus 自定义主题. (还可以修改已经自定义好的主题).
  • element-plus 自动导入
  • windicss
  • husky
  • svg 组件
  • axios 封装类型提示

keepalive

必须在页面中设置 name 属性 这个 name 属性值 需要和 菜单中的 name 属性值 关联上才可以

<script lang="ts">
export default { name: 'SystemMenu' }
</script>

菜单搜索

通过 src/store/modules/settings.ts 中的 config 对象里面的 hasSearch 属性来控制该组件的显示隐藏.

element-plus 字体大小

  • 通过 el-config-provider 组件,达到和 element-plus UI 库 进行关联.
  • 通过 src/store/modules/settings.ts 中的 config 对象里面的 hasZiTi 属性来控制该组件的显示隐藏.

侧边栏缩进

  • 通过 src/store/modules/settings.ts 中的 config 对象里面的 hasClipboard 属性来控制该组件的显示隐藏.
  • 通过 src/store/modules/settings.ts 中的 config 对象里面的 isCollapsed 属性来控制 侧边栏 展开 or 缩进.

面包屑

  • 通过 src/store/modules/settings.ts 中的 config 对象里面的 hasBreadcrumb 属性来控制该组件的显示隐藏.

TagsView

  • 通过 src/store/modules/settings.ts 中的 config 对象里面的 hasTagsView 属性来控制该组件的显示隐藏.
  • 也可以通过页面中主题 来控制显示隐藏

侧边栏 logo 显示

  • 通过 src/store/modules/settings.ts 中的 config 对象里面的 hasSidebarLogo 属性来控制该组件的显示隐藏.
  • 也可以通过页面中主题 来控制显示隐藏

pinia

因为 vuex 没有类型提示, 改用 pinia 来做状态管理

Tailwind CSS

当项目越来越大时(大约几十个组件),使用 Tailwind CSS 最初的编译时间达到了 3s,而热更新时的时间甚至超过了 1s。 - @voorjaar

官网地址(https://www.tailwindcss.cn/docs/installation)

不用这个的坏处

  • 看别人的代码麻烦
  • 改别人的代码麻烦
  • 样式都集中再一个文件中
  • 查找起来很麻烦
  • 自己写同样麻烦

husky

自己研究了一会发现, lint-staged npm 包中说明了 只需要一行命令即可.

npx mrm@2 lint-staged

svg 组件

更换成vite-plugin-svg-icons组件使用.

axios 封装类型提示

根据网上资料, 和自己的判断对 axios 进行了封装操作.达到 传参返回值 有类型提示.
例子:src/apis/login/index.ts

vue3-element-admin's People

Contributors

jack-pearson avatar primers-cern avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

vue3-element-admin's Issues

kkt

二哥kkt

kkt

二哥kkt

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.