日韩高清免,欧美老熟妇,国产私拍福利精

DevExtreme初級(jí)入門教程（Vue篇）：應(yīng)用程序模板 - 生成一個(gè)應(yīng)用

翻譯|使用教程|編輯：龔雪|2022-01-04 10:06:54.380|閱讀 340 次

概述：本文主要介紹如何使用DevExtreme的應(yīng)用程序模板創(chuàng)建一個(gè)新應(yīng)用、添加新視圖等，歡迎下載最新版體驗(yàn)！

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關(guān)鏈接：

DevExtreme Vue應(yīng)用程序模板可幫助您創(chuàng)建一個(gè)簡(jiǎn)單的 Vue 應(yīng)用程序，該應(yīng)用程序帶有導(dǎo)航菜單和響應(yīng)式布局中的多個(gè)示例視圖。

DevExtreme v21.2最新版下載

DevExtreme初級(jí)入門教程（Vue篇）：應(yīng)用程序模板 -

生成新應(yīng)用程序

// Generate a Vue 2 application
npx -p devextreme-cli devextreme new vue-app app-name

// Generate a Vue 3 application
npx -p devextreme-cli devextreme new vue-app app-name --version=3

cd app-name
npm run serve

該應(yīng)用程序已經(jīng)包含和組件，您可以在src\views\tasks.vue 和src\views\profile.vue 文件中相應(yīng)地找到它們的配置。

布局

該應(yīng)用程序包括兩種布局，它們之間的唯一區(qū)別是工具欄所在的位置。

外部工具欄（默認(rèn)）

內(nèi)部工具欄

要切換到另一個(gè)布局，請(qǐng)打開(kāi) src\router.js 文件并將導(dǎo)入路徑從 ./layouts/side-nav-outer-toolbar 更改為 ./layouts/side-nav-inner-toolbar：

router.js

import defaultLayout from './layouts/side-nav-inner-toolbar';

要生成帶有內(nèi)部工具欄的新應(yīng)用程序，請(qǐng)將 --layout 標(biāo)志設(shè)置為 side-nav-inner-toolbar：

npx devextreme-cli new vue-app app-name --layout=side-nav-inner-toolbar

添加新視圖

運(yùn)行以下命令以添加新視圖，--icon指定DevExtreme圖標(biāo)庫(kù)中的一個(gè)圖標(biāo)。

npx devextreme add view view-name [--icon=IconName]

您可以在 src\views 文件夾下找到添加的視圖，此命令還會(huì)為 src\app-navigation.js 文件中添加的視圖創(chuàng)建導(dǎo)航菜單項(xiàng)。

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開(kāi)發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動(dòng)應(yīng)用程序中使用。該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群5：742234706 歡迎一起進(jìn)群討論