Add package: tailwindcss, element-ui, vue-router; Finished login & register component style; Todo: login/register logic, dashboard component

auto-imports.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}

components.d.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Dashboard: typeof import('./src/components/Dashboard.vue')['default']
+    DashboardPage: typeof import('./src/components/DashboardPage.vue')['default']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    Header: typeof import('./src/components/Header.vue')['default']
+    HeaderComponent: typeof import('./src/components/HeaderComponent.vue')['default']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    Login: typeof import('./src/components/Login.vue')['default']
+    LoginComponent: typeof import('./src/components/LoginComponent.vue')['default']
+    Register: typeof import('./src/components/Register.vue')['default']
+    RegisterComponent: typeof import('./src/components/RegisterComponent.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

package.json

@@ -9,11 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.8"
+    "element-plus": "^2.4.2",
+    "tailwindcss": "^3.3.5",
+    "vue": "^3.3.8",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",
     "typescript": "^5.2.2",
+    "unplugin-auto-import": "^0.16.7",
+    "unplugin-vue-components": "^0.25.2",
     "vite": "^5.0.0",
     "vue-tsc": "^1.8.22"
   }

src/App.vue

@@ -1,30 +1,12 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+
+  <router-view />
+
 </template>
 
 <style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
+
 </style>

src/components/Dashboard.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/Header.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {UserFilled, SwitchButton} from "@element-plus/icons-vue";
+</script>
+
+<template>
+  <div class="bg-primary-500 min-w-full top-0 shadow-md flex-shrink-0">
+
+    <div class="mx-auto p-4">
+      <div class="flex items-center justify-between">
+
+        <div class="flex items-center space-x-4">
+
+          <h1 class="text-xl text-white"> Blue Whale Shopping Online </h1>
+        </div>
+
+        <div class="flex items-center space-x-4">
+          <router-link to="/dashboard" v-slot="{navigate}">
+            <el-icon @click="navigate" :size="30" color="white" ><UserFilled /></el-icon>
+          </router-link>
+
+          <router-link to="/" v-slot="{navigate}">
+            <el-icon @click="navigate" :size="30" color="white" ><SwitchButton /></el-icon>
+          </router-link>
+
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

src/components/HelloWorld.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 
 defineProps<{ msg: string }>()
 
-const count = ref(0)
+const count = ref(10)
 </script>
 
 <template>

src/components/Login.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+  import {ElButton, ElForm, ElFormItem} from "element-plus";
+  import { ref } from 'vue';
+
+  const loginForm = ref({
+    username: '',
+    password: '',
+  });
+
+  function handleLogin() {
+  // do nothing
+  }
+
+</script>
+
+
+
+<template>
+
+  <div class="flex flex-col items-center justify-center px-6 mx-auto md:min-h-screen">
+
+    <a href="#" class="flex items-center mb-16 text-3xl font-semibold text-gray-900">
+      Blue Whale Shopping Online
+    </a>
+
+    <el-card class="w-full bg-white rounded-lg shadow-md dark:border md:mt-0 sm:max-w-md xl:p-0">
+
+      <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+
+        <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+          登入您的账户
+        </h1>
+
+        <el-form class="space-y-4 md:space-y-6">
+
+          <el-form-item>
+            <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">注册邮箱</label>
+            <input type="email" name="email" id="email"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                   placeholder="name@company.com">
+          </el-form-item>
+
+          <el-form-item>
+            <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">账户密码</label>
+            <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5" >
+          </el-form-item>
+
+          <el-form-item class="pb-2">
+            <a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">
+              忘记密码？
+            </a>
+          </el-form-item>
+
+          <router-link to="/home" v-slot="{navigate}">
+            <el-button @click="navigate" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+              登入
+            </el-button>
+          </router-link>
+
+          <p class="text-sm font-light text-gray-500 dark:text-gray-400">
+            还没有账户？
+            <router-link to="/register" v-slot="{navigate}">
+              <a @click="navigate" class="font-medium text-primary-600 hover:underline dark:text-primary-500">
+                点击注册
+              </a>
+            </router-link>
+ 开启国货购物新体验
+          </p>
+        </el-form>
+      </div>
+
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/Register.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen">
+
+    <a href="#" class="flex items-center mb-16 text-3xl font-semibold text-gray-900">
+      Blue Whale Shopping Online
+    </a>
+
+    <el-card class="w-full bg-white rounded-lg shadow-md md:mt-0 sm:max-w-md xl:p-0">
+
+      <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+        <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+          创建一个新的账户
+        </h1>
+        <el-form class="space-y-4 md:space-y-6" action="#">
+
+          <el-form-item>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">邮箱</label>
+            <input type="email"  class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                   placeholder="name@company.com">
+          </el-form-item>
+
+          <el-form-item>
+            <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">手机号</label>
+            <input type="tel" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                   placeholder="+86•••••••••••">
+          </el-form-item>
+
+          <el-form-item>
+            <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">密码</label>
+            <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          </el-form-item>
+
+          <el-form-item>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">确认密码</label>
+            <input type="password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          </el-form-item>
+
+          <el-form-item class="flex items-start">
+
+            <div class="flex items-center h-5">
+              <input id="terms" aria-describedby="terms" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required="">
+            </div>
+
+            <div class="ml-3 text-sm">
+              <label for="terms" class="font-light text-gray-500 dark:text-gray-300">我接受 <a class="font-medium text-primary-600 hover:underline dark:text-primary-500" href="#">恶魔的条款</a></label>
+            </div>
+
+          </el-form-item>
+
+          <button type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+            创建账户
+          </button>
+
+          <p class="text-sm font-light text-gray-500 dark:text-gray-400">
+            已经有账户了？
+            <router-link to="/login" v-slot="{navigate}">
+              <a @click="navigate" class="font-medium text-primary-600 hover:underline dark:text-primary-500">
+                点击登陆
+              </a>
+            </router-link>
+          </p>
+
+        </el-form>
+      </div>
+
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import './style.css'
+import {router} from './router'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')

src/pages/HomePage.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import Header from "../components/Header.vue"
+</script>
+
+<template>
+
+  <Header/>
+
+</template>
+
+<style scoped>
+
+</style>

src/router/index.ts

@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from "vue-router";
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [{
+        path: '/',
+        component: () => import('../components/Login.vue'),
+    },{
+        path: '/login',
+        component: () => import('../components/Login.vue'),
+    },{
+        path: '/register',
+        component: () => import('../components/Register.vue'),
+    }, {
+        path: '/home',
+        component: () => import('../pages/HomePage.vue'),
+    }]
+})
+
+export {router};

src/shim-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import { defineComponent } from 'vue'
+    constcomponent: ReturnType<typeof defineComponent>
+    export default component
+}

src/style.css

@@ -1,79 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
 }

tailwind.config.ts

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+      './src/**/*.{vue,js,ts,jsx,tsx}',
+      "./index.html",
+  ],
+  theme: {
+      extend: {
+          colors: {
+              primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a","950":"#172554"}
+          }
+      },
+  },
+  plugins: [],
+}
+

vite.config.ts

@@ -1,7 +1,25 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import tailwindcss from 'tailwindcss'
+
+// Element UI 自动导入支持
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+      vue(),
+      AutoImport({
+        resolvers: [ElementPlusResolver()],
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()],
+      })],
+    css: {
+      postcss: {
+          plugins: [tailwindcss],
+      }
+    }
 })