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

DevExtreme v21.2最新版下載

生成新應(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)部工具欄

要切換到另一個布局，請打開 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)用程序，請將 --layout 標(biāo)志設(shè)置為 side-nav-inner-toolbar：

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

添加新視圖

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

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

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

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(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和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

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