+ Edit
+ components/Notes.vue to try different UI components from Vuetify
+
+
+
+ This template uses Vuetify 3, a UI library based on Google's Material Design that can help you design the layout and populate template components in a consistent style.
+
+
+
+ Have clicked this {{ count }} times
+
+
+
+
+
+
diff --git a/Homework3/zehruan/Vue-Template/src/components/NotesWithStore.vue b/Homework3/zehruan/Vue-Template/src/components/NotesWithStore.vue
new file mode 100644
index 00000000..058bbd6f
--- /dev/null
+++ b/Homework3/zehruan/Vue-Template/src/components/NotesWithStore.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
{{ msg }}
+
+
+
+ Edit
+ components/Notes.vue to try different UI components from Vuetify
+
+
+
+ This template uses Vuetify 3, a UI library based on Google's Material Design that can help you design the layout and populate template components in a consistent style.
+
+
+
+ Have clicked this {{ count }} times
+
+
+
+
+
diff --git a/Homework3/zehruan/Vue-Template/src/main.ts b/Homework3/zehruan/Vue-Template/src/main.ts
new file mode 100644
index 00000000..8975c1a0
--- /dev/null
+++ b/Homework3/zehruan/Vue-Template/src/main.ts
@@ -0,0 +1,23 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+import { createPinia } from "pinia";
+
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import { md3 } from 'vuetify/blueprints'
+
+
+const vuetify = createVuetify({
+ components,
+ directives,
+ blueprint: md3,
+})
+
+const app = createApp(App);
+app.use(vuetify)
+app.use(createPinia()) // Only needed if you are using Pinia
+app.mount('#app')
diff --git a/Homework3/zehruan/Vue-Template/src/stores/exampleStore.ts b/Homework3/zehruan/Vue-Template/src/stores/exampleStore.ts
new file mode 100644
index 00000000..55ebef48
--- /dev/null
+++ b/Homework3/zehruan/Vue-Template/src/stores/exampleStore.ts
@@ -0,0 +1,18 @@
+// exampleStore.ts
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useStore = defineStore('exampleStore', () => {
+ const count = ref(0);
+ const myGlobalVariable = ref('depression'); // Initialize with a default value
+
+ const increment = () => {
+ count.value++;
+ };
+
+ return {
+ count,
+ myGlobalVariable,
+ increment,
+ };
+});
diff --git a/Homework3/zehruan/Vue-Template/src/style.css b/Homework3/zehruan/Vue-Template/src/style.css
new file mode 100644
index 00000000..e3e1fd94
--- /dev/null
+++ b/Homework3/zehruan/Vue-Template/src/style.css
@@ -0,0 +1,19 @@
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 1rem;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+body {
+ margin: 0;
+}
+
+#app{
+ height: 100vh;
+ width: 100vw;
+}
\ No newline at end of file
diff --git a/Homework3/zehruan/Vue-Template/src/types.ts b/Homework3/zehruan/Vue-Template/src/types.ts
new file mode 100644
index 00000000..ba503fc8
--- /dev/null
+++ b/Homework3/zehruan/Vue-Template/src/types.ts
@@ -0,0 +1,21 @@
+// Global types and interfaces are stored here.
+export interface Margin {
+ readonly left: number;
+ readonly right: number;
+ readonly top: number;
+ readonly bottom: number;
+}
+
+export interface ComponentSize {
+ width: number;
+ height: number;
+}
+
+export interface Point {
+ readonly posX: number;
+ readonly posY: number;
+}
+
+export interface Bar{
+ readonly value: number;
+}
\ No newline at end of file
diff --git a/Homework3/zehruan/Vue-Template/src/vite-env.d.ts b/Homework3/zehruan/Vue-Template/src/vite-env.d.ts
new file mode 100644
index 00000000..59f4d1ba
--- /dev/null
+++ b/Homework3/zehruan/Vue-Template/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+declare module '*.vue';
+///
diff --git a/Homework3/zehruan/Vue-Template/tsconfig.json b/Homework3/zehruan/Vue-Template/tsconfig.json
new file mode 100644
index 00000000..087d6c91
--- /dev/null
+++ b/Homework3/zehruan/Vue-Template/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "strict": true,
+ "jsx": "preserve",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "lib": ["ESNext", "DOM"],
+ "skipLibCheck": true,
+ "noEmit": true,
+ "composite": true,
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "vite.config.ts"],
+}
diff --git a/Homework3/zehruan/Vue-Template/vite.config.ts b/Homework3/zehruan/Vue-Template/vite.config.ts
new file mode 100644
index 00000000..fe884984
--- /dev/null
+++ b/Homework3/zehruan/Vue-Template/vite.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vuetify from 'vite-plugin-vuetify'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ server: {
+ port: 3000,
+ },
+ plugins: [
+ vue(),
+ vuetify({ autoImport: true })
+ ],
+})