During the Spring Festival holidays, improve himself before the Spring Festival of the background management template document, in perfect document at the same time removing part of the code is not a bug, speak true, I have obsessive-compulsive disorder and code cleanliness of building the progress is true of this template is a bit slow, but ultimately is finished, although this is the first version

First of all, this template refers to a number of popular Vue3 background management templates, mainly Vben Admin, there is no doubt that this is a very good and popular background management template, but is not friendly to beginners, learning cost is high, even for an intermediate front-end to directly start secondary development is also a certain degree of difficulty

Introduction to the

Vue Naive Admin is a background management template based on Vue3.0, Vite and Naive UI. Compared with other popular background management templates, this project is relatively simple and lightweight. There is no TypeScript integration, no internationalization integration, no complex theme configuration integration. The cost of learning is very low and beginner friendly. There are permissions, mocks, menus, AXIos encapsulation, Pinia, project configuration, style configuration, environment configuration, and some commonly used basic component encapsulation, all of which are implemented in the simplest and most elegant way by referring to multiple VUE3 backend management templates. Very suitable for small and medium-sized projects or personal projects, of course, this template for secondary packaging transformation for large projects is not impossible.

Why develop this template

  1. Vue3 and Vite have matured to the point where learning Vite and Vite is necessary, developing templates is a great way to learn, and it has proved to be a huge benefit to me
  2. The current mainstream Vue3+Vite backend management templates are relatively complex, and even feel a little fancy (no demeaning, most of the architectural design is good, but I just feel that there are too many unpractical things integrated)
  3. The template you build is the most comfortable to develop. I am very disgusted with the use of other people’s template development directly, if you have to use other people’s template development will try to understand before using, do not understand, there will be no sense of control and security code

function

  • 🍒 Integrate Naive UI, especially recommended UI component library, very fragrant, www.naiveui.com
  • 🍑 Integrated login, logout, and permission verification (currently only supports role page permission, and button permission will be added later)
  • 🍐 Integrate multiple environment configurations, dev, test, pre-release, and production
  • 🍎 integrate ESLint + prettier, code constraints and formatting unification
  • 🍉 integrates the Mock interface service, which is supported by both dev and publishing environments. You can dynamically configure whether to enable the Mock service. If not, the Mock package will not be loaded, reducing the packaging volume
  • 🍇 integrated UNOCSS, ANTFU Dagod open source atomized CSS solution, very lightweight, at present I write SCSS style with UNOCSS use, very fragrant
  • 🍍 integrated pinia, Vuex alternative, lightweight, simple, easy to use, very fragrant
  • 🍏 integrates axiOS, supports multiple AXIOS instances, and supports online environments without repacking and modifying baseURL
  • 🍌 secondary encapsulates global Dialog, Message, LoadingBar components
  • 🍋 Encapsulates localStorage and sessionStorage twice and supports setting the expiration time

The source code

  • Making: github.com/zclzone/vue…
  • Gitee: gitee.com/zclzone/vue…

preview

template.qszone.com

The document

Vue Naive Admin