feat(vue): Implemented vte build for vue applications

Author: ajivanyandev

packages/devextreme-cli/src/applications/application.vue.js

@@ -18,8 +18,7 @@ const preparePackageJsonForTemplate = (appPath, appName) => {
     const dependencies = [
         { name: 'sass', version: '^1.34.1' },
         { name: 'vue-router', version: '^3.0.1' },
-        { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
-        { name: 'sass-loader', version: '^10', dev: true }
+        { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true }
     ];
 
     const nameDepends = dependencies.map(d => d.name);
@@ -38,8 +37,8 @@ const preparePackageJsonForTemplate = (appPath, appName) => {
 };
 
 async function createVueApp(name, depsVersionTag) {
-    const argList = ['-p', `@vue/cli@${depsVersionTag}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/', '-p "Default (Vue 3)"'];
-
+    const argList = ['create', `vue${depsVersionTag ? `@${depsVersionTag}` : ''}`, name, '--registry', 'https://registry.npmjs.org/', '--', '--default'];
+    
     return runCommand('npx', argList);
 }
 
@@ -78,7 +77,7 @@ const create = async(appName, options) => {
 };
 
 const modifyIndexHtml = (appPath, appName) => {
-    const indexHtmlPath = path.join(appPath, 'public', 'index.html');
+    const indexHtmlPath = path.join(appPath, 'index.html');
     let htmlContent = fs.readFileSync(indexHtmlPath).toString();
 
     htmlContent = htmlContent.replace(/<title>(\w+\s*)+<\/title>/, `<title>${appName}<\/title>`);

packages/devextreme-cli/src/templates/vue-v3/application/src/App.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import AppFooter from "./components/app-footer";
+import AppFooter from "./components/app-footer.vue";
 import { sizes, subscribe, unsubscribe } from "./utils/media-query";
 import {
   getCurrentInstance,

packages/devextreme-cli/src/templates/vue-v3/application/src/components/header-toolbar.vue

@@ -52,7 +52,7 @@ import auth from "../auth";
 import { useRouter, useRoute } from 'vue-router';
 import { ref } from 'vue';
 
-import UserPanel from "./user-panel";
+import UserPanel from "./user-panel.vue";
 import ThemeSwitcher from './theme-switcher.vue';
 
 export default {

packages/devextreme-cli/src/templates/vue-v3/application/src/layouts/side-nav-inner-toolbar.vue

@@ -57,8 +57,8 @@ import DxDrawer from "devextreme-vue/drawer";
 import DxScrollView from "devextreme-vue/scroll-view";
 import DxToolbar, { DxItem } from "devextreme-vue/toolbar";
 
-import HeaderToolbar from "../components/header-toolbar";
-import SideNavMenu from "../components/side-nav-menu";
+import HeaderToolbar from "../components/header-toolbar.vue";
+import SideNavMenu from "../components/side-nav-menu.vue";
 import menuItems from "../app-navigation";
 import { ref, watch, computed } from 'vue';
 import { useRoute } from 'vue-router';

packages/devextreme-cli/src/templates/vue-v3/application/src/layouts/side-nav-outer-toolbar.vue

@@ -39,8 +39,8 @@ import DxDrawer from "devextreme-vue/drawer";
 import DxScrollView from "devextreme-vue/scroll-view";
 
 import menuItems from "../app-navigation";
-import HeaderToolbar from "../components/header-toolbar";
-import SideNavMenu from "../components/side-nav-menu";
+import HeaderToolbar from "../components/header-toolbar.vue";
+import SideNavMenu from "../components/side-nav-menu.vue";
 import { computed, ref, watch} from 'vue';
 import { useRoute } from 'vue-router';
 

packages/devextreme-cli/src/templates/vue-v3/application/src/main.js

@@ -2,7 +2,7 @@ import { createApp }  from "vue";
 import router from "./router";
 import themes from "devextreme/ui/themes";
 
-import App from "./App";
+import App from "./App.vue";
 import appInfo from "./app-info";
 
 themes.initialized(() => {

packages/devextreme-cli/src/templates/vue-v3/application/src/router.js

@@ -1,11 +1,11 @@
 import auth from "./auth";
 import { createRouter, createWebHashHistory } from "vue-router";
 
-<%=^empty%>import Home from "./views/home-page";
-import Profile from "./views/profile-page";
-import Tasks from "./views/tasks-page";
-<%=/empty%>import defaultLayout from "./layouts/<%=layout%>";
-import simpleLayout from "./layouts/single-card";
+<%=^empty%>import Home from "./views/home-page.vue";
+import Profile from "./views/profile-page.vue";
+import Tasks from "./views/tasks-page.vue";
+<%=/empty%>import defaultLayout from "./layouts/<%=layout%>.vue";
+import simpleLayout from "./layouts/single-card.vue";
 
 function loadView(view) {
   return () => import (/* webpackChunkName: "login" */ `./views/${view}.vue`)

packages/devextreme-cli/src/templates/vue-v3/application/vite.config.js

@@ -0,0 +1,25 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'legacy'
+      }
+    }
+  },
+})