Vite App

commit 25a377d05c52adf0fe5cf01a3834dc6be84e40cb Author: sa_10_0 <2492740167@qq.com> Date: Wed Oct 23 17:55:22 2024 +0800 后台管理第一次提交 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8ee54e8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,30 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +*.tsbuildinfo diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..a7cea0b --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar"] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..503ed15 --- /dev/null +++ b/README.md @@ -0,0 +1,33 @@ +# vue_project + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +npm run build +``` diff --git a/env.d.ts b/env.d.ts new file mode 100644 index 0000000..741721f --- /dev/null +++ b/env.d.ts @@ -0,0 +1,7 @@ +declare module '*.vue' { + import { defineComponent } from 'vue'; + const component: ReturnType; + export default component; + } + +declare module '*.js' \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a888544 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +

+ + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..09706ab --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "vue_project", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..d547ad5 --- /dev/null +++ b/package.json @@ -0,0 +1,33 @@ +{ + "name": "vue_project", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "run-p type-check \"build-only {@}\" --", + "preview": "vite preview", + "build-only": "vite build", + "type-check": "vue-tsc --build --force" + }, + "dependencies": { + "@element-plus/icons-vue": "^2.3.1", + "axios": "^1.7.2", + "element-plus": "^2.7.5", + "mitt": "^3.0.1", + "querystring": "^0.2.1", + "vue": "^3.4.21", + "vue-router": "^4.3.3" + }, + "devDependencies": { + "@tsconfig/node20": "^20.1.4", + "@types/node": "^20.12.5", + "@vitejs/plugin-vue": "^5.0.4", + "@vue/tsconfig": "^0.5.1", + "npm-run-all2": "^6.1.2", + "sass": "^1.77.5", + "typescript": "~5.4.0", + "vite": "^5.2.8", + "vue-tsc": "^2.0.11" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..df36fcf Binary files /dev/null and b/public/favicon.ico differ diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..1ed1bd4 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,13 @@ + + + + + + diff --git a/src/assets/admin.jpg b/src/assets/admin.jpg new file mode 100644 index 0000000..5407714 Binary files /dev/null and b/src/assets/admin.jpg differ diff --git a/src/assets/gloable.css b/src/assets/gloable.css new file mode 100644 index 0000000..6cbfd65 --- /dev/null +++ b/src/assets/gloable.css @@ -0,0 +1,16 @@ +*{ + margin: 0; + padding: 0; +} + +html, body{ + height:100%; +} + +.ml-5{ + margin-left: 5px; +} + +.pd-10{ + padding:10px 0; +} diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/img/Login/login_top.png b/src/img/Login/login_top.png new file mode 100644 index 0000000..9a65217 Binary files /dev/null and b/src/img/Login/login_top.png differ diff --git a/src/img/Login/登录底图.png b/src/img/Login/登录底图.png new file mode 100644 index 0000000..d03bc7c Binary files /dev/null and b/src/img/Login/登录底图.png differ diff --git a/src/layout/Manage.vue b/src/layout/Manage.vue new file mode 100644 index 0000000..536a713 --- /dev/null +++ b/src/layout/Manage.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/layout/components/Aside.vue b/src/layout/components/Aside.vue new file mode 100644 index 0000000..f04c7ad --- /dev/null +++ b/src/layout/components/Aside.vue @@ -0,0 +1,96 @@ + + + + \ No newline at end of file diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue new file mode 100644 index 0000000..c801e1d --- /dev/null +++ b/src/layout/components/Header.vue @@ -0,0 +1,148 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..bad69a3 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,19 @@ +import { createApp } from 'vue' +import App from './App.vue' +import router from './router' +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import * as ElementPlusIconsVue from '@element-plus/icons-vue' +import './assets/gloable.css' + + +const app = createApp(App) +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) +} + +app.use(ElementPlus, {size: 'small'}) +app.use(router) +app.mount('#app') + + diff --git a/src/router/index.ts b/src/router/index.ts new file mode 100644 index 0000000..88b816e --- /dev/null +++ b/src/router/index.ts @@ -0,0 +1,11 @@ +import {createRouter, createWebHashHistory} from "vue-router"; +import {routes} from "./routes"; + +// 创建路由实例并传递 `routes` 配置 +const router = createRouter({ + // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。 + history: createWebHashHistory(), + routes, // `routes: routes` 的缩写 +}) + +export default router diff --git a/src/router/routes.ts b/src/router/routes.ts new file mode 100644 index 0000000..8da0c0d --- /dev/null +++ b/src/router/routes.ts @@ -0,0 +1,35 @@ + + +export const routes = [ + { + path: '/', + name:'login', + component: () => import("../views/Login.vue") + }, + { + path: '/manage', + component: () => import("@/layout/Manage.vue"), + children:[ + { + path: '/UserManagement', + name:'用户列表', + component: ()=> import("../views/User/UserManagement.vue") + }, + { + path: '/PersonalCenter', + name:'个人中心', + component: ()=> import("../views/User/PersonalCenter.vue") + }, + { + path: '/AddProduct', + name: '添加商品', + component: ()=> import("../views/Commodity/AddProduct.vue") + }, + { + path: '/MerchandiseCenter', + name: '商品中心', + component: ()=> import("../views/Commodity/MerchandiseCenter.vue") + } + ] + } +] diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts new file mode 100644 index 0000000..7494d86 --- /dev/null +++ b/src/utils/emitter.ts @@ -0,0 +1,5 @@ +import mitt from 'mitt' + +const emitter = mitt() + +export default emitter \ No newline at end of file diff --git a/src/utils/request.js b/src/utils/request.js new file mode 100644 index 0000000..0f01292 --- /dev/null +++ b/src/utils/request.js @@ -0,0 +1,34 @@ +import axios from 'axios' + +const instance = axios.create({ + baseURL: 'http://localhost:9090' +}) +instance.interceptors.request.use( + config =>{ // 拦截器成功函数 + if(config.methods == "post"){ + config.data = querystring.stringify(config.data) + } + + // config:包含着网络请求的所有信息 + return config; + }, + error =>{ // 拦截器失败函数 + + // 返回错误信息 + return Promise.reject(error) + } +) + +// 拦截器----获取数据之前 +instance.interceptors.response.use( + response =>{ // 拦截器成功函数 + return response.status == 200 ? Promise.resolve(response):Promise.reject(response) + }, + error =>{ // 拦截器失败函数 + const { response } = error; + errorHandle(response.status,response.info) + } +) + + +export default instance \ No newline at end of file diff --git a/src/views/Commodity/AddProduct.vue b/src/views/Commodity/AddProduct.vue new file mode 100644 index 0000000..8957495 --- /dev/null +++ b/src/views/Commodity/AddProduct.vue @@ -0,0 +1,143 @@ + + + \ No newline at end of file diff --git a/src/views/Commodity/MerchandiseCenter.vue b/src/views/Commodity/MerchandiseCenter.vue new file mode 100644 index 0000000..ea4705a --- /dev/null +++ b/src/views/Commodity/MerchandiseCenter.vue @@ -0,0 +1,149 @@ + + + + + + \ No newline at end of file diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..740053b --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/views/Login.vue b/src/views/Login.vue new file mode 100644 index 0000000..e988c19 --- /dev/null +++ b/src/views/Login.vue @@ -0,0 +1,64 @@ + + + + + \ No newline at end of file diff --git a/src/views/Person.vue b/src/views/Person.vue new file mode 100644 index 0000000..2eca115 --- /dev/null +++ b/src/views/Person.vue @@ -0,0 +1,32 @@ + + + + + \ No newline at end of file diff --git a/src/views/User/PersonalCenter.vue b/src/views/User/PersonalCenter.vue new file mode 100644 index 0000000..763c907 --- /dev/null +++ b/src/views/User/PersonalCenter.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/views/User/UserManagement.vue b/src/views/User/UserManagement.vue new file mode 100644 index 0000000..65a6b25 --- /dev/null +++ b/src/views/User/UserManagement.vue @@ -0,0 +1,104 @@ + + + + + + \ No newline at end of file diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..c777231 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,14 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "allowJs": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..66b5e57 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.node.json" + }, + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..293b392 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,18 @@ +{ + "extends": "@tsconfig/node20/tsconfig.json", + "include": [ + "vite.config.*", + "vitest.config.*", + "cypress.config.*", + "nightwatch.conf.*", + "playwright.config.*" + ], + "compilerOptions": { + "composite": true, + "noEmit": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "module": "ESNext", + "moduleResolution": "Bundler", + "types": ["node"] + } +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..5c45e1d --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,16 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +})

这是主页

账号

密码