January 23, 2024About 4 min使用指南基础介绍
专业定制化软件解决方案是一个基于Element-Plus UI框架的高可用、高复用、高扩展、大数据量、引擎化、低代码基线平台。可以帮助用户快速搭建企业级中后台产品原型。相信不管需求是什么，本项目都将能帮助到你。
功能
| 序号 | 分类 | 名称 | 说明 | 子功能 |
|---|---|---|---|---|
| 01 | 登录 | 登录页面 | 登录页面Demo | |
| 02 | 注册 | 注册页面 | 注册页面Demo | |
| 03 | 后端管理布局 | column布局页面 | ||
| 04 | ||||
前序准备
你需要在本地安装 node 、pnpm和 git。本项目技术栈基于 ES2015+、vue3.4+、pinia、vue-router 、axios 和 element-plus，所有的请求数据都使用Mock.js进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
同时配套一个系列的教程文章，如何从零构建一个完整的管理后台项目，建议大家先看完这些文章再来实践本项目。
目录结构
|-- 专业定制化软件解决方案
|-- .browserslistrc
|-- .commitlintrc.cjs
|-- .editorconfig
|-- .env.dev
|-- .env.prod
|-- .env.test
|-- .eslintrc.cjs
|-- .gitignore
|-- .npmignore
|-- .npmrc
|-- .prettierrc.js
|-- .prettierrc.json
|-- .stylelintignore
|-- .stylelintrc
|-- babel.config.js
|-- CHANGELOG.md
|-- env.d.ts
|-- index.html
|-- LICENSE
|-- package.json
|-- playwright.config.ts
|-- pnpm-lock.yaml
|-- README.en.md
|-- README.md
|-- tsconfig.app.json
|-- tsconfig.config.json
|-- tsconfig.json
|-- tsconfig.node.json
|-- tsconfig.vitest.json
|-- vite.config.mts
|-- vitest.config.mts
|-- .husky
| |-- _
| |-- .gitignore
| |-- husky.sh
|-- .idea
| |-- .gitignore
| |-- 专业定制化软件解决方案.iml
| |-- modules.xml
| |-- vcs.xml
| |-- vuepagejs.xml
| |-- vuepagets.xml
| |-- watcherTasks.xml
| |-- workspace.xml
| |-- inspectionProfiles
| | |-- Project_Default.xml
| |-- jsLinters
| |-- eslint.xml
|-- .vscode
| |-- extensions.json
|-- build
| |-- constant.ts
| |-- utils.ts
| |-- vite
| |-- proxy.ts
| |-- plugin
| |-- compress.ts
| |-- html.ts
| |-- index.ts
| |-- mock.ts
| |-- pwa.ts
| |-- styleImport.ts
| |-- svgSprite.ts
| |-- visualizer.ts
|-- dist
| |-- favicon.ico
| |-- index.html
| |-- assets
| | |-- .pnpm-17521ddd.css
| | |-- 403-3e80b026.css
| | |-- 403-b92bb9c3.png
| | |-- 404-485340fb.png
| | |-- 404-f8c54814.css
| | |-- app-2-c53c11f4.svg
| | |-- background-31f042e9.jpg
| | |-- diannao-2-d948c6f2.svg
| | |-- frameDiagram-7afa53f6.png
| | |-- index-0f753177.css
| | |-- index-24220f9a.css
| | |-- index-519049c0.js
| | |-- index-54445bee.css
| | |-- index-5f8be7a1.css
| | |-- index-636c7d77.css
| | |-- index-994f0a61.css
| | |-- index-9f64629f.css
| | |-- index-a745fafa.css
| | |-- install-eb26676b.png
| | |-- login_form-48a8d831.png
| | |-- logo-03d6d6da.png
| | |-- logo-735d0a2d.png
| | |-- logo-da9b9095.svg
| | |-- xiaochengxushezhi-2-80f3e217.svg
| | |-- 下拉-87128c47.svg
| | |-- 组 1657-c16b8478.svg
| | |-- 路由权限流程-47729ca4.png
| | |-- 路由权限流程-df1a2457.vsdx
| | |-- 项目工程整体架构图-4db9a967.vsdx
| |-- js
| |-- .pnpm
| | |-- .pnpm.457ad4ff.js
| |-- calendar
| | |-- index.884c69f2.js
| |-- Callback
| | |-- index.415bca88.js
| |-- chooseArea
| | |-- index.ccd90859.js
| |-- chooseCity
| | |-- index.9a425ca8.js
| |-- ChooseIcon
| | |-- index.a4166bce.js
| |-- chooseTime
| | |-- index.a77526df.js
| |-- echarts
| | |-- index.f8720b49.js
| |-- Error
| | |-- 403.9edf98f4.js
| | |-- 404.e7425514.js
| |-- form
| | |-- index.fc1b4977.js
| |-- home
| | |-- index.78c67d6b.js
| |-- index
| | |-- index.636204e3.js
| |-- index.vue_vue_type_script_setup_true_lang
| | |-- index.vue_vue_type_script_setup_true_lang.d952731b.js
| |-- menu
| | |-- index.463a4115.js
| |-- modalForm
| | |-- index.591de7fb.js
| |-- notification
| | |-- index.d2ed0a9b.js
| |-- progress
| | |-- index.d9a128ae.js
| |-- table
| | |-- index.91d791e9.js
| |-- trend
| |-- index.f7c7ae21.js
|-- e2e
| |-- tsconfig.json
| |-- vue.spec.ts
|-- library
| |-- components
| | |-- index.ts
| | |-- baseline
| | | |-- index.ts
| | | |-- calendar
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | | |-- type.ts
| | | |-- card
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | |-- chooseArea
| | | | |-- index.ts
| | | | |-- lib
| | | | | |-- pca-code.json
| | | | |-- src
| | | | |-- index.vue
| | | |-- chooseCity
| | | | |-- index.ts
| | | | |-- lib
| | | | | |-- city.ts
| | | | | |-- province.json
| | | | |-- src
| | | | |-- index.vue
| | | | |-- types.ts
| | | |-- chooseDate
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | |-- chooseIcon
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | |-- chooseTime
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | |-- codeMirror
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | |-- echarts
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | | |-- types.ts
| | | | |-- config
| | | | | |-- default_color.ts
| | | | | |-- option_line.ts
| | | | | |-- option_pie.ts
| | | | |-- lib
| | | | |-- echarts.vue
| | | |-- form
| | | | |-- index.ts
| | | | |-- READMD.md
| | | | |-- src
| | | | |-- index.vue
| | | | |-- types
| | | | |-- rule.ts
| | | | |-- types.ts
| | | |-- list
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | | |-- type.ts
| | | |-- menu
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | | |-- menu.tsx
| | | | |-- types.ts
| | | |-- notification
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | |-- progress
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | |-- table
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | | |-- indexcopy.vue.copy
| | | | |-- table copy.tsx
| | | | |-- table.tsx
| | | | |-- types.ts
| | | |-- tabs
| | | | |-- index.ts
| | | | |-- src
| | | | |-- index.vue
| | | | |-- types.ts
| | | |-- trend
| | | |-- index.ts
| | | |-- lib
| | | | |-- enmu.ts
| | | |-- src
| | | |-- index.vue
| | |-- business
| | | |-- index.ts
| | |-- core
| | |-- index.ts
| | |-- LeftTabsBar
| | | |-- index.ts
| | | |-- src
| | | |-- index.vue
| | | |-- types.ts
| | |-- MenuLeftColumnBar
| | | |-- index.ts
| | | |-- src
| | | |-- index.vue
| | |-- MenuLeftColumnExpandBar
| | | |-- index.ts
| | | |-- src
| | | |-- index.vue
| | |-- MenuLeftColumnExpandBarMenu
| | | |-- index.ts
| | | |-- src
| | | |-- index.vue
| | |-- TopNavBar
| | | |-- index.ts
| | | |-- src
| | | |-- index.vue
| | |-- TopNavCollapseBar
| | | |-- index.ts
| | | |-- src
| | | |-- index.vue
| | |-- TopNavFuncBar
| | | |-- index.ts
| | | |-- src
| | | |-- index.vue
| | |-- TopTabsBar
| | | |-- index.ts
| | | |-- src
| | | |-- index.vue
| | |-- TopTabsInfoBar
| | | |-- index.ts
| | | |-- src
| | | |-- index.vue
| | |-- TopTabsMoreBar
| | |-- index.ts
| | |-- src
| | |-- index.vue
| |-- layouts
| | |-- index.vue
| | |-- LayoutColumn
| | | |-- index.vue
| | | |-- README.md
| | |-- LayoutCommon
| | | |-- README.md
| | |-- LayoutComprehensive
| | | |-- README.md
| | |-- LayoutFloat
| | | |-- README.md
| | |-- LayoutHorizontal
| | | |-- README.md
| | |-- LayoutVertical
| | |-- README.md
| |-- plugins
| | |-- eventBus.ts
| |-- styles
| |-- variables
| |-- variables.module.scss
|-- mock
| |-- _createProductionServer.ts
| |-- _util.ts
| |-- user
| |-- menus.ts
| |-- user.ts
|-- public
| |-- favicon.ico
|-- src
| |-- App.vue
| |-- main.ts
| |-- assets
| | |-- base.css
| | |-- logo.png
| | |-- logo.svg
| | |-- core
| | | |-- tabs_images
| | | |-- bs-tab.png
| | |-- document
| | | |-- frameDiagram.png
| | | |-- STYLE_LINT.MD
| | | |-- TEST_UTILS.md
| | | |-- 路由权限流程.png
| | | |-- 路由权限流程.vsdx
| | | |-- 项目工程整体架构图.vsdx
| | | |-- test_utils
| | | |-- install.png
| | |-- error_images
| | | |-- 403.png
| | | |-- 404.png
| | | |-- cloud.png
| | |-- home
| | | |-- app-2.svg
| | | |-- avatarImg.gif
| | | |-- avatarList1.gif
| | | |-- avatarList2.jpg
| | | |-- avatarList3.gif
| | | |-- diannao-2.svg
| | | |-- xiaochengxushezhi-2.svg
| | | |-- 下拉.svg
| | | |-- 组 1657.svg
| | |-- login_images
| | |-- background.jpg
| | |-- login_form.png
| | |-- logo.png
| |-- config
| | |-- cli.config.ts
| | |-- index.ts
| | |-- net.config.ts
| | |-- setting.config.ts
| | |-- theme.config.ts
| |-- hooks
| | |-- index.ts
| | |-- useCopy
| | |-- index.ts
| |-- i18n
| | |-- common.ts
| | |-- en-US.old.ts
| | |-- en-US.ts
| | |-- index.ts
| | |-- zh-CN.old.ts
| | |-- zh-CN.ts
| |-- router
| | |-- index.ts
| | |-- modules
| | | |-- asyncRouter.ts
| | | |-- staticRouter.ts
| | |-- utils
| | |-- permission.ts
| | |-- routes.ts
| |-- stores
| | |-- pinia.ts
| | |-- modules-pinia
| | |-- system
| | |-- acl.ts
| | |-- demo_xxx.ts
| | |-- router.ts
| | |-- settings.ts
| | |-- tabs.ts
| | |-- user.ts
| | |-- api
| | |-- api-stores-system.ts
| |-- styles
| | |-- base.scss
| | |-- elementPlus.scss
| | |-- index.scss
| | |-- mixins.scss
| | |-- ui.scss
| | |-- viriables.scss
| |-- utils
| | |-- index.ts
| | |-- i18n
| | | |-- en-US.ts
| | | |-- zh-CN.ts
| | |-- src
| | |-- common.ts
| | |-- encrypt.ts
| | |-- font-awesome-icon.ts
| | |-- permission.ts
| | |-- storage.ts
| | |-- token.ts
| | |-- ui-element_plus.ts
| | |-- axios
| | |-- index.ts
| | |-- i18n
| | | |-- en-US.ts
| | | |-- zh-CN.ts
| | |-- src
| | |-- axios.ts
| | |-- cancelTokens.ts
| | |-- instance.ts
| | |-- request.ts
| |-- views
| |-- demo
| | |-- element
| | | |-- calendar
| | | | |-- index.vue
| | | |-- chooseArea
| | | | |-- index.vue
| | | |-- chooseCity
| | | | |-- index.vue
| | | |-- chooseTime
| | | | |-- index.vue
| | | | |-- i18n
| | | | |-- en-US.ts
| | | | |-- zh-CN.ts
| | | |-- echarts
| | | | |-- index.vue
| | | | |-- src
| | | | |-- common
| | | | | |-- index.ts
| | | | |-- Line
| | | | |-- Basic
| | | | | |-- index.vue
| | | | |-- Func
| | | | | |-- index.vue
| | | | |-- Synthesize
| | | | |-- index.vue
| | | |-- ElementHome
| | | | |-- index.vue
| | | |-- form
| | | | |-- index.vue
| | | |-- icon
| | | | |-- ChooseIcon
| | | | | |-- index.vue
| | | | |-- ThirdPartyIcon
| | | | |-- index.vue
| | | | |-- module
| | | | |-- IconFontAwesome
| | | | | |-- index.vue
| | | | | |-- module
| | | | | |-- DialogStyleMore
| | | | | |-- index.vue
| | | | |-- IconIconify
| | | | | |-- index.vue
| | | | |-- IconIconPark
| | | | | |-- index.vue
| | | | | |-- module
| | | | | |-- DialogStyleMore
| | | | | |-- index.vue
| | | | |-- IconMaterialDesignIcon
| | | | | |-- index.vue
| | | | | |-- module
| | | | | |-- DialogStyleMore
| | | | | |-- index.vue
| | | | |-- IconRemixIcon
| | | | |-- index.vue
| | | | |-- module
| | | | |-- DialogStyleMore
| | | | |-- index.vue
| | | |-- menu
| | | | |-- index.vue
| | | |-- modalForm
| | | | |-- index.vue
| | | |-- notification
| | | | |-- data.ts
| | | | |-- index.vue
| | | |-- progress
| | | | |-- index.vue
| | | |-- table
| | | | |-- index.vue
| | | | |-- indexcopy.vue.copy
| | | | |-- src
| | | | |-- index.ts
| | | | |-- Basic
| | | | | |-- index.vue
| | | | |-- Custom
| | | | | |-- index.vue
| | | | |-- Expandable
| | | | | |-- index.vue
| | | | |-- Filter
| | | | | |-- index.vue
| | | | |-- Fixed
| | | | | |-- index.vue
| | | | |-- FluidHeight
| | | | | |-- index.vue
| | | | |-- Grouping
| | | | | |-- index.vue
| | | | |-- Select
| | | | | |-- index.vue
| | | | | |-- src
| | | | | |-- index.ts
| | | | | |-- Multiple
| | | | | | |-- index.vue
| | | | | |-- Single
| | | | | |-- index.vue
| | | | |-- Sort
| | | | | |-- index.vue
| | | | |-- Status
| | | | | |-- index.vue
| | | | | |-- src
| | | | | |-- index.ts
| | | | | |-- Basic
| | | | | | |-- index.vue
| | | | | |-- Cell
| | | | | | |-- index.vue
| | | | | |-- CustomColumn
| | | | | | |-- index.vue
| | | | | |-- CustomLine
| | | | | | |-- index.vue
| | | | | |-- Synthesize
| | | | | |-- index.vue
| | | | |-- Summary
| | | | | |-- index.vue
| | | | | |-- src
| | | | | |-- index.ts
| | | | | |-- Merge
| | | | | | |-- index.vue
| | | | | |-- Synthesize
| | | | | | |-- index.vue
| | | | | |-- Total
| | | | | |-- index.vue
| | | | |-- TreeData
| | | | |-- index.vue
| | | | |-- src
| | | | |-- index.ts
| | | | |-- Basic
| | | | | |-- index.vue
| | | | |-- Usually
| | | | |-- index.vue
| | | |-- trend
| | | |-- index.vue
| | |-- homePage
| | |-- Dashboard
| | | |-- index.vue
| | |-- home
| | |-- index.vue
| | |-- module
| | |-- IconList
| | | |-- index.vue
| | |-- PageHeader
| | | |-- index.vue
| | | |-- module
| | | |-- AvatarList
| | | |-- index.vue
| | |-- VisitorVolume
| | |-- index.vue
| |-- noColumn
| | |-- deleteColumn
| | |-- index.vue
| |-- system
| |-- Callback
| | |-- index.vue
| |-- Error
| | |-- 403.vue
| | |-- 404.vue
| | |-- i18n
| | |-- en-US.ts
| | |-- zh-CN.ts
| |-- Login
| | |-- index.vue
| | |-- i18n
| | |-- en-US.ts
| | |-- zh-CN.ts
| |-- Register
| | |-- index.vue
| | |-- i18n
| | |-- en-US.ts
| | |-- zh-CN.ts
| |-- WebLogin
| |-- index.vue
| |-- module
| |-- TabsTitle
| | |-- index.vue
| |-- TopTitle
| |-- index.vue
|-- types
|-- acl.d.ts
|-- baseline.d.ts
|-- globals.d.ts
|-- library.d.ts
|-- router.d.ts
|-- shims-axios.d.ts
|-- shims-vue.d.ts
|-- store.d.ts
|-- theme.d.ts
|-- vue-use.d.ts安装和运行
# 克隆项目
git clone https://gitee.com/bobokaka/专业定制化软件解决方案
# 进入项目目录
cd 专业定制化软件解决方案
# 安装依赖
pnpm install
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
# 本地开发 启动项目
pnpm run dev构建和发布
当项目开发完毕，只需要运行一行命令就可以打包你的应用：
# 打包正式环境
npm run build:prod构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件。
如果需要自定义构建，比如指定 dist 目录等，则需要通过 config的 outputDir 进行配置。
Contributors
zefeng.peng