Bulma yerine Element-UI frameworküne geçildi

package.json

@@ -2,7 +2,6 @@
   "name": "oyun-parki",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://kod.pardus.org.tr/nyx/oyun-parki-ui",
   "author": {
     "name": "Nyx Team",
     "email": "nyxctf@protonmail.com"
@@ -23,9 +22,9 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "axios": "^0.21.1",
-    "bulma": "^0.9.2",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
+    "element-ui": "^2.4.5",
     "vue": "^2.6.11",
     "vue-i18n": "^8.22.3",
     "vue-router": "^3.2.0"
@@ -38,11 +37,13 @@
     "babel-eslint": "^10.1.0",
     "electron": "^11.0.0",
     "electron-devtools-installer": "^3.1.0",
+    "element-theme": "^2.0.1",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "vue-cli-plugin-electron-builder": "~2.0.0-rc.6",
+    "vue-cli-plugin-element": "^1.0.1",
     "vue-cli-plugin-i18n": "^2.1.0",
     "vue-template-compiler": "^2.6.11"
   },
@@ -64,5 +65,6 @@
     "> 1%",
     "last 2 versions",
     "not dead"
-  ]
+  ],
+  "homepage": "https://kod.pardus.org.tr/nyx/oyun-parki-ui"
 }

src/assets/scss/main.scss

+.el-page-header__left {
+  align-items: center;
+}
+
+.el-page-header__content {
+  width: 100%;
+  align-items: center;
+}

src/element-variables.scss

+/*
+Write your variables here. All available variables can be
+found in element-ui/packages/theme-chalk/src/common/var.scss.
+For example, to overwrite the theme color:
+*/
+//$--color-primary: teal;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/main.js

@@ -3,9 +3,8 @@ import App from "./App.vue";
 import router from "./router";
 import axios from "axios";
 
-import style from "./assets/scss/main.module.scss";
+import "./assets/scss/main.scss";
 import i18n from "./i18n";
-Vue.prototype.$style = style;
 
 Vue.prototype.$http = axios;
 Vue.prototype.$http.defaults.baseURL = "http://localhost:30000";
@@ -22,9 +21,14 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import {
   faCircle,
   faExternalLinkAlt,
-  faPlay, faStop, faTerminal, faTrash, faUndo,
+  faPlay,
+  faStop,
+  faTerminal,
+  faTrash,
+  faUndo
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import "./plugins/element.js";
 
 library.add(
   faPlay,

src/plugins/element.js

+import Vue from 'vue'
+import Element from 'element-ui'
+import '../element-variables.scss'
+import locale from 'element-ui/lib/locale/lang/tr-TR'
+
+Vue.use(Element, { locale })

src/router/index.js

@@ -2,13 +2,18 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import Containers from "../views/Containers.vue";
 import Images from "../views/Images.vue";
-import style from "@/assets/scss/main.module.scss";
 
 Vue.use(VueRouter);
+const Foo = { template: "<div>foo</div>" };
 
 const routes = [
   {
     path: "/",
+    name: "Home",
+    component: Foo
+  },
+  {
+    path: "/containers",
     name: "Containers",
     component: Containers
   },
@@ -21,7 +26,6 @@ const routes = [
 
 const router = new VueRouter({
   mode: "history",
-  linkExactActiveClass: style["is-active"],
   routes
 });