DevUI Admin V1.0 Released!!!🎉🎉🥳
Published: 2021-04-30 03:38:03

At the end of April, DevUI Admin, with widely expectation, comes to the first open source version(1.0.0) of Angular.

DevUI Admin is an enterprise-level middle and back-end frontend/design solution. Based on DevUI Design, we build a back-end management template based on our own design specifications and basic components.

After several months of incubation, DevUI Admin provides you a solution for building a front-end system that can be used in middle and back end:

+ Responsive: adapts to different screen sizes to provide users a more comfortable interface and user experience.
+ Personalized Theme: supports dynamic switching between multiple theme styles and personalized settings.
+ Layout Switching: the page layout is configurable and flexible.
+ Internationalization: implements the internationalization to meet the requirements of multi-language.
+ Mock data: local data debugging and a separation between front-end and back-end;
+ Page templates: Based on DevUI practice and experience, typical business scenarios are extracted and various page templates are provided.

You can learn more at devui.design or follow DevUI Admin on GitHub.

+ Preview page: https://devui.design/admin/
+ Homepage: https://devui.design/admin-page/home
+ GitHub: https://github.com/DevCloudFE/ng-devui-admin
+ DevUI Design: https://devui.design/home

# Responsive
DevUI Admin provides a grid-based responsive solution. After initializing an Admin project, you will obtain the page responsive capability. More importantly, we also provide `da-grid` as a common component that you can use for responsive page building.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16po8jbxedqpeynfjkil.png)

# Personalized Theme
Based on basic [ng-devui](https://devui.design/components/zh-cn/theme-guide) capabilities, the DevUI Admin provides multiple themes for users to select. In addition to global color matching, font size and fillet size can be configured too. Users can select a theme based on their personal preferences.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mwwndf4adapohquoi45.PNG)

# Switch the layout.
DevUI Admin supports multiple layouts. You can customize layout settings by simply modifying your layout config. More importantly, we provide `da-layout` as a component that you can also use to extend more layout configurations.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kv4b4gnsf2fe3uw51x0.PNG)

# Internationalization
DevUI Admin uses `@ngx-translate/core` to implement the internationalization. Internationalization-related words support modular management. You can select the corresponding internationalization configuration after initializing your Admin project.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/maxyc7fewedqjx4w1wul.png)

# Mock data
Mock data is very important to separate front-end and back-end, so that front-end projects are not affected by back-end interfaces. In DevUI Admin, we have provided you with the method of Mock data. You can select the data Mock support by default when initializing your Admin project.

# Page Template
In the DevUI Admin GitHub code repository, we provide you with multiple page templates by default.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gutsdatc6wjye8nu8767.png)

```
- Dashboard
  - Analysis Page
  - Monitoring page
  - Workbench
- Form page
  - Base Form
  - Form Layout
  - Advanced Forms
- List Page
  - Base List
  - Card list
  - Edit List
  - Advanced List
  - Tree List
- Exception page
  - 403
  - 404
  - 500
- Personal page
  - Personal Center
  - Personal settings
```
You can take a look to it after pulling the code from github.

# Cli Support
Currently, the DevUI Admin can use the Angular CLI to initialize an admin project. You can use the Angular CLI to quickly create and configure your admin project.
```
# Initialize the project.
$ ng new your-project && cd your-project
$ ng add ng-devui-admin
```

# Follow-up
In the future, we will keep envolving, focusing on performance and usability, optimizing the experience of DevUI Admin, and reducing developer costs. We look forward to receiving your comments and suggestions ([Issue List](https://github.com/DevCloudFE/ng-devui-admin/issues)). We also look forward to your participation and cooperation.