DevExtreme Vue應用程序模板可幫助您創建一個簡單的 Vue 應用程序，該應用程序帶有導航菜單和響應式布局中的多個示例視圖。

DevExtreme v21.2最新版下載

生成新應用程序

// 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

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

布局

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

外部工具欄（默認）

內部工具欄

要切換到另一個布局，請打開 src\router.js 文件并將導入路徑從 ./layouts/side-nav-outer-toolbar 更改為 ./layouts/side-nav-inner-toolbar：

router.js

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

要生成帶有內部工具欄的新應用程序，請將 --layout 標志設置為 side-nav-inner-toolbar：

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

添加新視圖

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

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

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

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExpress技術交流群5：742234706      歡迎一起進群討論