app.$http = axios; Can LOGIN now

src/main.ts

@@ -1,8 +1,8 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import router from './router';
-import pinia from '@/stores/main';
-import myPiniaPlugin from './plugins/myPiniaPlugin';
+import { createApp, markRaw } from "vue";
+
+import App from "./App.vue";
+import router from "./router";
+import pinia from '@/stores/main.js';
 import axios from 'axios';
 import VueAxios from 'vue-axios';
 import moment from 'moment';
@@ -14,15 +14,16 @@ import popper from 'cytoscape-popper';
 import draggable from 'vuedraggable';
 import VueSweetalert2 from 'vue-sweetalert2';
 
-// Import CSS
-import './assets/main.css';
+// import CSS
+import "./assets/main.css";
 import 'vue-toast-notification/dist/theme-sugar.css';
 import 'sweetalert2/dist/sweetalert2.min.css';
 
-// Import PrimeVue
+// import PrimeVue
 import PrimeVue from 'primevue/config';
-import 'primevue/resources/themes/saga-blue/theme.css';
-import 'primeicons/primeicons.css';
+import 'primevue/resources/themes/saga-blue/theme.css'; //theme
+// import 'primevue/resources/primevue.min.css'; //core css 官網更新 3.40 後移除基礎樣式
+import 'primeicons/primeicons.css'; //icons
 import Sidebar from 'primevue/sidebar';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
@@ -32,8 +33,8 @@ import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
-import ColumnGroup from 'primevue/columngroup';
-import Row from 'primevue/row';
+import ColumnGroup from 'primevue/columngroup';   // optional
+import Row from 'primevue/row';   // optional
 import RadioButton from 'primevue/radiobutton';
 import PickList from 'primevue/picklist';
 import Timeline from 'primevue/timeline';
@@ -47,41 +48,40 @@ import Tooltip from 'primevue/tooltip';
 import Checkbox from 'primevue/checkbox';
 import Dialog from 'primevue/dialog';
 import ContextMenu from 'primevue/contextmenu';
-console.log('TODO: hello wolrld')
+
 const emitter = mitt();
 const app = createApp(App);
 
-// Axios setting
-app.config.globalProperties.$axios = axios;
-
-// Pinia Set
-pinia.use(myPiniaPlugin);
+// 將 Axios 實例添加到 Vue 的應用實例中
+app.config.globalProperties.$http = axios;
+app.$http = axios; // 將 $http 添加到 Vue 實例中
 // Pinia Set
 pinia.use(({ store }) => {
-  store.$axios = axios;
+  store.$router = markRaw(router);
+  store.$axios = markRaw(axios);
+  store.$toast = markRaw(ToastPlugin);
+  store.$http = app.$http;
 });
 
-// Global properties
-app.config.globalProperties.$axios = axios;
+// can use `this.$moment` in Vue.js
 app.config.globalProperties.$moment = moment;
 app.config.globalProperties.$emitter = emitter;
 app.config.globalProperties.$cytoscape = cytoscape;
 
+
 // Cytoscape.js's style
-cytoscape.use(dagre);
-cytoscape.use(popper);
+cytoscape.use( dagre );
+cytoscape.use( popper );
 
 app.use(pinia);
 app.use(router);
 app.use(VueAxios, axios);
 app.use(VueSweetalert2);
-app.use(ToastPlugin, {
+app.use(ToastPlugin, { // use `this.$toast` in Vue.js
   position: 'bottom',
   duration: 5000,
 });
 app.use(PrimeVue);
-
-// Register PrimeVue components
 app.component('Sidebar', Sidebar);
 app.component('Button', Button);
 app.component('Dropdown', Dropdown);
@@ -105,9 +105,7 @@ app.component('Calendar', Calendar);
 app.component('Checkbox', Checkbox);
 app.component('Dialog', Dialog);
 app.component('ContextMenu', ContextMenu);
-app.component('Draggable', draggable);
+app.component('Draggable', draggable);  // 拖曳
 app.directive('tooltip', Tooltip);
 
-console.log('hello from main.ts');
-
-app.mount('#app');
+app.mount("#app");

src/types/vue.d.ts

@@ -0,0 +1,14 @@
+import { AxiosInstance } from 'axios';
+import { App } from 'vue';
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $http: AxiosInstance;
+  }
+}
+
+// 將類型擴展到 Vue 應用實例
+declare module 'vue' {
+  interface App {
+    $http: AxiosInstance;
+  }