Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DevExtreme Application Template & CLI Tools for Vue #7699

Open
nightskylark opened this issue Apr 12, 2019 · 0 comments

Comments

Projects
None yet
1 participant
@nightskylark
Copy link
Contributor

commented Apr 12, 2019

The Problem

It can be complex and time-consuming to create a web application that has a responsive layout, navigation, and uniform style.

The Proposed Solution

The new Vue Application Template is a simple application with a navigation menu and several sample views in a responsive layout.

You can download this application from GitHub or use DevExtreme CLI commands to create and modify it.

DevExtreme Vue Application Template

DevExtreme-Vue-Template

Layouts

The application template supports three adaptive layouts that arrange elements in the following way:

  • side-nav-inner-toolbar
    The toolbar's width is equal to the page's width. The Drawer component is under the toolbar.

  • side-nav-outer-toolbar
    The Drawer's height equals the page's height. The Drawer component wraps the toolbar.

  • single-card
    The page consists of a single adaptive card element. You can see this layout on the Log In form.

Adaptability

We created the media-query utility that defines how the application adapts to different screen sizes. You can change the screen size qualifiers (see the Breakpoints object) to change this behavior.

Navigation & Routing

We implemented the navigation menu based on the DevExtreme TreeView component and used the vue-router library for routing.

To modify navigation and routing items, you can use DevExtreme CLI commands (see Add a View section).

Styling

The Vue Application Template uses two DevExtreme themes: material.orange.light as a base theme and material.orange.dark as an additional theme.

To modify these themes, change their metadata in the metadata.base.json and metadata.additional.json files in the src/themes/ folder. For a more profound customization, change the metadata in the DevExtreme ThemeBuilder.

To apply changes, run the following command:

> npm run build-themes

This command uses the metadata to generate .css files that stylize DevExtreme components and .scss variables that can be used to stylize custom components.

DevExtreme CLI Tools

Add DevExtreme to a Vue Application

The following command installs the devextreme and devextreme-vue dependencies and references DevExtreme stylesheets:

> devextreme add devextreme-vue

Create a New DevExtreme Vue Application

> devextreme new vue-app app-name [--layout][--empty]

If you do not specify the parameters, CLI dialogs prompts you to specify them.

Add a View

The following command generates an empty view and adds it to the navigation menu and routing:

> devextreme add view view-name [--icon]

Try It

Live Sandbox

Check out the early working prototype

Installation

> npm i -g devextreme-cli@next

We Need Your Feedback

Take a Quick Poll

Does the new Vue Application Template meet your needs?

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.