feat(vue): Migrate vue build from vue/cli to vite (#972)

* feat(vue): Implemented vte build for vue applications

* vhange npx to npm

* fix add view issue

* fix formatting

* fix: remove unnecessary bumps

* fix: Add lint to the new vue app

* fix: remove example code

* fix non logical linter errors

* lint error fix for vue files

* fix: Add sass-embedded for consistency

* fix: Fix vite versions to avoid problems with the new 7.0.0

* revert fixing version

Author: ajivanyandev

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

@@ -16,10 +16,9 @@ const defaultStyles = [
 
 const preparePackageJsonForTemplate = (appPath, appName) => {
     const dependencies = [
-        { name: 'sass', version: '^1.34.1' },
+        { name: 'sass-embedded', version: '^1.85.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,18 +37,14 @@ 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)"'];
-
-    return runCommand('npx', argList);
+    const argList = ['create', `vue${depsVersionTag ? `@${depsVersionTag}` : ''}`, name, '--registry', 'https://registry.npmjs.org/', '--', '--eslint', '--default', '--bare'];
+    return runCommand('npm', argList);
 }
 
 const bumpVue = (appPath, versionTag) => {
     const dependencies = [
         { name: 'vue', version: versionTag },
         { name: 'vue-router', version: versionTag },
-        { name: '@vue/cli-plugin-babel', version: versionTag, dev: true },
-        { name: '@vue/cli-plugin-eslint', version: versionTag, dev: true },
-        { name: '@vue/cli-service', version: versionTag, dev: true },
     ];
 
     packageJsonUtils.addDependencies(appPath, dependencies);
@@ -78,7 +73,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>`);
@@ -175,7 +170,7 @@ const addView = (pageName, options) => {
     const navigationData = getNavigationData(pageName, componentName, options && options.icon || 'folder');
     const getCorrectExtension = (fileExtension) => fileExtension;
     templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath, getCorrectExtension);
-    moduleUtils.insertImport(routingModulePath, `./views/${pageName}`, componentName, true);
+    moduleUtils.insertImport(routingModulePath, `./views/${pageName}.vue`, componentName, true);
     insertItemToArray(routingModulePath, navigationData.route);
     insertItemToArray(navigationModulePath, navigationData.navigation);
 };

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

@@ -0,0 +1,32 @@
+import { defineConfig, globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+
+export default defineConfig([
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,mjs,jsx,vue}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+
+  {
+    name: 'disable-unused-vars-in-vue',
+    files: ['**/*.vue'],
+    rules: {
+      'no-unused-vars': 'off',
+    },
+  },
+])

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`)