Quasar-Sika-Design Out of the box midrange front end / design solution
Tags: vue, quasar
Published: 2020-12-22 07:41:16

![logo.jpg](https://dev-to-uploads.s3.amazonaws.com/i/2tys15rhe5d5gk9heuwe.jpg)
## Project Introduce：

Quasar Sika design is an enterprise level front-end / design solution for the middle and back-end. We adhere to [ant design]（ http://ant.design/ ) Based on the design specifications and basic components, we are committed to continue to build up, refine typical templates / business components / supporting design resources, and further enhance the experience of "users" and "designers" in the process of enterprise level product design and development. With the continuous feedback from "designers", we will continue to iterate, gradually precipitate and summarize more design patterns and corresponding code implementations, and elaborate the best practices of product templates / components / business scenarios in the background. We are also looking forward to your participation and co construction。

* GitHub ：[GitHub](https://github.com/dq-open-cloud/quasar-sika-design)
* Demo ：[DEMO](http://quasar.sikacode.com/)
* Communication QQ group：327424532
* WeChat Official Account：sikacode开源社区

---

## Original intention of the project：

* Starting from ant design, not just ant design, every detail is the ultimate experience.
* Vision: open source changes the world, Sika design makes the world have no hard to write code.

---

## Project features：

* Elegant and beautiful: elaborately designed based on Ant Design System
* Common design patterns: open source changes the world, Sika design makes the world have no hard to write code.
* The latest technology stack: developed with front-end frontier technologies such as quasar &amp; Vue &amp; echards
* Responsive: designed for different screen sizes
* Theme: configurable theme to meet diversified brand demands
* Best practices: good engineering practices help you consistently produce high quality code
* Mock data: a practical local data debugging scheme

---

Based on the above objectives, intentions and features, we provide the following typical templates, and build a set of scaffolds based on quasar Vue in the middle and back office management console, which can help you quickly build enterprise level product prototypes

```
- Dashboard
  - Analysis page
  - Monitor page
  - Workspace
- Form
  - Basic form
  - Step form
  - Advanced forms page
- List page
  - User List
  - Goods List
  - Query Table
  - Basic List
  - Card List
  - Search List（Project/Application/Article）
- Details page
  - Basic Details page
  - Advance Details page
- Result Page
  - Success Page
  - Fail Page
- Exception page
  - 403 No permission
  - 404 Can't find
  - 500 Server error
- Personal page
  - Personal Center
  - Personal Settings
- Account
  - Login
  - Retister
```

## Life Cycle

* V 1.0.0 -- 2020/10 ~ 2020/12（Basic functions completed）
* V 1.1.0 -- 2020/12 ~ 2021/02（Add chart components and editor components）
* V 1.2.0 -- 2021/03 ~ 2021/05（Data acquisition based on mock component）
* V 2.0.0 -- 2021/6 ~ 2021/9（The design of sikasircode is not only based on the design of the front-end, but also for the use of dynamic data management）
* V 3.0.0 -- 2021/9 ~ 2021/12（Base【QuasarSikaDesign】【SikaCode】Build a complete Blog Application）
* V 4.0.0 -- 2021/12 ~ （Base QuasarSikaDesignDevelop a complete set of enterprise application）

---

## Development Environment：

* The version of quasar is v1.7.2 + (you can view the official website of quasar to edit the quasar Sika design code: [quasar official website]（ https://quasar.dev/ )
* Vue version is v 2.6.0 + (try not to use vue3, because the development environment does not use vue3, I don't know what will happen)

---

## Build Command：

* Download code
git clone https://github.com/dq-open-cloud/quasar-sika-design.git
cd quasar-sika-design

* Installation Dependency
yarn install

* Development Mode Operation
quasar dev

* Compile Project
quasar build

* Lints and fixes files
yarn run lint

---

### Browser Compatibility：

* Chrome for Android >= 87
* Firefox for Android >= 83
* Android >= 81
* Chrome >= 77
* Edge >= 84
* Firefox >= 74
* iOS >= 10.3
* Opera >= 68
* Safari >= 11

---

### Page Appreciation：

#### PC
![dashboard_analysis.png](https://dev-to-uploads.s3.amazonaws.com/i/w7g27g3xwpl7r8jq7sr3.png)
![account_center.png](https://dev-to-uploads.s3.amazonaws.com/i/d0vkwulg9l7h5if0ghm9.png)
![dashboard_monitor.png](https://dev-to-uploads.s3.amazonaws.com/i/mlr2vlx0ftl3e31ul4i9.png)
---

#### mobile
![user_login.png](https://dev-to-uploads.s3.amazonaws.com/i/vqnae6djx2o6rhdc3jsz.png)
![dashboard_analysis.png](https://dev-to-uploads.s3.amazonaws.com/i/tfh3a9jfxtfivhp98q2f.png)
![account_center.png](https://dev-to-uploads.s3.amazonaws.com/i/fddefhhdjzy7ytd67bzg.png)
---