{"id":20678557,"url":"https://github.com/codegetters/back-stage-management","last_synced_at":"2025-07-08T06:39:16.142Z","repository":{"id":155697898,"uuid":"585844421","full_name":"CodeGetters/back-stage-management","owner":"CodeGetters","description":"The warehouse is mainly used to complete background management system projects using vue technology","archived":false,"fork":false,"pushed_at":"2023-01-08T15:06:23.000Z","size":11274,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-17T15:16:36.585Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeGetters.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-06T08:25:49.000Z","updated_at":"2023-01-31T23:10:32.000Z","dependencies_parsed_at":"2023-05-05T10:46:54.624Z","dependency_job_id":null,"html_url":"https://github.com/CodeGetters/back-stage-management","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeGetters%2Fback-stage-management","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeGetters%2Fback-stage-management/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeGetters%2Fback-stage-management/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeGetters%2Fback-stage-management/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeGetters","download_url":"https://codeload.github.com/CodeGetters/back-stage-management/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242911172,"owners_count":20205444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T21:20:55.234Z","updated_at":"2025-03-10T19:26:02.368Z","avatar_url":"https://github.com/CodeGetters.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 企业商城项目\n\n[演示地址](http://shopadmin.dishawang.com/)\n\n工具链：vite+vue+router+WindCSS+ELement-Plus\n\n## 初始化项目\n\n```shell\n# 1.创建项目\nyarn create vite `vue-name` --template vue\n\n#2.引入依赖\nyarn\n\ncd vue3-demo\n\n```\n\n3.配置 vite.config.js(@/开头路径)\n\n```js\nimport path from 'path'\n\n#这样就可以以使用\n'@'\n去引入src以下的路径\nexport default defineConfig({\n    resolve: {\n        alias: {\n            \"@\": path.resolve(__dirname, 'src')\n        }\n    },\n})\n```\n\n4.添加路由\n\n```shell\n#4.路由\nyarn add vue-router@next\n```\n\n4.1 路由配置\n\n新建文件 src/router/user.js\n\n```js\n// src/router/user.js\nimport {createRouter, createWebHistory} from 'vue-router';\n// 懒加载\nconst Hello = () =\u003e import('@/components/HelloWorld.vue');\nconst routes = [\n    {\n        path: '/',\n        component: Hello,\n    },\n];\nconst router = createRouter({\n    history: createWebHistory(),\n    routes,\n});\nexport default router;\n```\n\n4.2 挂载路由\n\n```js\n// main.js\n// 路由\nimport router from '@/router';\n\nconst app = createApp(App);\napp.use(router);\n```\n\n5.引入 Element-plus 组件库\n\n5.1使用包管理器\n```shell\nyarn add element-plus\n```\n\n5.1.1自动导入(不推荐使用，页面更新就会出错)\n\n```shell\nyarn add -D unplugin-vue-components unplugin-auto-import\n```\n\n配置 vite.config.js(自动导入配置)\n\n```shell\nimport {defineConfig} from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport AutoImport from 'unplugin-auto-import/vite'\nimport Components from 'unplugin-vue-components/vite'\n\n// Element-plus\nimport {ElementPlusResolver} from 'unplugin-vue-components/resolvers'\n\nexport default defineConfig({\n    plugins: [\n        vue(),\n        WindiCSS(),\n        AutoImport({\n            resolvers: [ElementPlusResolver()],\n        }),\n        Components({\n            resolvers: [ElementPlusResolver()],\n        }),\n    ],\n})`\n```\n\n5.1.2完整引入(推荐使用)\n\n```js\n// main.js\nimport App from './App.vue'\nimport ElementPlus from 'element-plus'\nimport 'element-plus/dist/index.css'\n\nconst app = createApp(App)\napp.use(ElementPlus)\napp.mount('#app')\n```\n\n5.2图标的引入\n\n```shell\n# 使用包管理器\nyarn add @element-plus/icons-vue\n```\n\n注册所有图标\n\n```js\n// main.js\nimport * as ElementPlusIconsVue from '@element-plus/icons-vue'\n\nconst app = createApp(App)\nfor (const [key, component] of Object.entries(ElementPlusIconsVue)) {\n    app.component(key, component)\n}\n```\n\n6.引入 WindCSS(可使用可不使用)\n\n```shell\nyarn add -D vite-plugin-windicss windicss\n```\n\n6.1 配置 main.js\n\n```js\n// windiCSS\nimport 'virtual:windi.css';\n```\n\n7.引入 less\n\n```shell\nyarn add less-loader less -D\n```\n\n创建全局样式文件\nsrc/assets/style/global.less\n\n在全局使用\n```vue\n\u003c!--app.vue--\u003e\n\u003ctemplate\u003e\n  \u003crouter-view/\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n@import \"style/global.css\";\n\u003c/style\u003e\n```\n\n配置 vite.config.js\n\n```js\ncss: {\n    // css预处理器\n    preprocessorOptions: {\n        less: {\n            modifyVars: {\n                hack: `true; @import (reference) \"${path.resolve(\"src/assets/style/global.less\")}\";`\n            }\n        ,\n            javascriptEnabled: true\n        }\n    ,\n    }\n,\n}\n```\n\n## 登录页面login\n\n* 布局\n* 图标\n* 表单校验规则\n* 登录接口\n\n### 1.布局\n\n通过基础的 24 分栏平均的分成了4栏，每一栏占6间距，\n也可以使用响应式布局\n\n### 2.图标\n\n2.1使用包管理器\n\n```shell\nyarn add @element-plus/icons-vue\n```\n\n2.2自动导入\n\n引入依赖\n\n```shell\n#unplugin-icons\nyarn add -D unplugin-icons\n#unplugin-auto-import\nyarn add -D unplugin-auto-import\n```\n\n配置文件\n\n```js\n// vite.config.js\n// Element-plus图标\nimport IconsResolver from 'unplugin-icons/resolver'\nimport Icons from 'unplugin-icons/vite'\n\nconst pathSrc = path.resolve(__dirname, 'src')\n\nplugins: [\n    vue(),\n    AutoImport({\n        // Auto import functions from Element Plus\n        // e.g. ElMessage, ElMessageBox... (with style)\n        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)\n        resolvers: [\n            ElementPlusResolver(),\n            // Auto import icon components\n            // 自动导入图标组件\n            IconsResolver({\n                prefix: 'Icon',\n            }),\n        ],\n        // 生成文件路径\n        dts: path.resolve(pathSrc, 'auto-imports.d.ts')\n    }),\n    Components({\n        resolvers: [\n            // Auto register icon components\n            // 自动注册图标组件\n            IconsResolver({\n                enabledCollections: ['ep'],\n            }),\n            // Auto register Element Plus components\n            // 自动导入 Element Plus 组件\n            ElementPlusResolver(),\n        ],\n        // 生成文件路径\n        dts: path.resolve(pathSrc, 'components.d.ts'),\n    }),\n    Icons({\n        autoInstall: true\n    })\n]\n```\n\n2.3使用\n在图标名前 + ElIcon\n\n```vue\n\u003c!--自动导入--\u003e\n\u003ctemplate #prefix\u003e\n  \u003cel-icon\u003e\n    \u003cElIconUser/\u003e\n  \u003c/el-icon\u003e\n\u003c/template\u003e\n```\n\n### 3.表单验证\n\n3.1自定义验证规则并绑定到标签中\n\n```js\n// login.vue\n// 响应式数据\nconst ruleForm = reactive({\n    username: '',\n    password: ''\n})\n\nconst rules = reactive \u003c FormRules \u003e ({\n    // 用户名\n    username: [\n        {\n            // 必填\n            required: true,\n            message: '账号不能为空',\n            // 失去焦点时触发\n            trigger: 'blur'\n        },\n        {\n            min: 3,\n            max: 15,\n            message: '用户名长度必须在 3-15 之间',\n            trigger: 'blur'\n        }\n    ],\n    // 密码\n    password: [\n        {\n            // 必填\n            required: true,\n            message: '密码不能为空',\n            // 失去焦点时触发\n            trigger: 'blur'\n        },\n        {\n            min: 6,\n            max: 10,\n            message: '密码长度必须在 3-10 之间',\n            trigger: 'blur'\n        }\n    ]\n})\n```\n\n3.2 获取登录结果\n\n```js\nconst submitForm = () =\u003e {\n    ruleFormRef.value.validate((isValid) =\u003e {\n        console.log(isValid)\n    })\n}\n```\n\n### 4.登录接口交互\n\n4.1引入axios请求库和登录接口\n创建路径src/axios.js\n创建axios实例\n\n```shell\nyarn add axiox\n```\n\n```js\n//axios.js\nimport axios from \"axios\";\n\nconst service = axios.create({\n    baseURL: 'https://mock.presstime.cn/mock/63afb2b10a20cd00b24818ae/vvht'\n})\n\nexport default service\n```\n\n4.2创建API接口\n创建src/api/manager.js文件(api文件夹负责管理接口方法)\n\n```js\n// manager.js\nimport service from \"@/axios.js\";\n\nexport function login(username, password) {\n    return service.post('/login', {\n        username,\n        password\n    })\n}\n```\n\n4.3使用VueUse工具集-useCookies\n这两个主要用于设置、读取、删除Cookie信息\n\n```shell\nyarn add @vueuse/integrations\nyarn add universal-cookie\n```\n\n使用示例\n\n```vue\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e后台首页\u003c/div\u003e\n  \u003cel-button @click=\"setCookie\"\u003e设置\u003c/el-button\u003e\n  \u003cel-button @click=\"deleteCookie\"\u003e删除\u003c/el-button\u003e\n  \u003cel-button @click=\"getCookie\"\u003e读取\u003c/el-button\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\nimport {useCookies} from '@vueuse/integrations/useCookies'\n\nconst cookie = useCookies()\nconsole.log(cookie)\n\nfunction setCookie() {\n  cookie.set('admin-token', \"123456\")\n}\n\nfunction getCookie() {\n  console.log(cookie.get('admin-token'))\n}\n\nfunction deleteCookie() {\n  cookie.remove('admin-token')\n}\n\u003c/script\u003e\n```\n\n4.4存储token\n\n4.5全局管理用户信息(vuex)\n\n4.6全局前置守卫(router)\n\n4.7持久化用户信息\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegetters%2Fback-stage-management","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodegetters%2Fback-stage-management","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegetters%2Fback-stage-management/lists"}