Vite-Vue-Admin

English | 简体中文

Docs and Preview

Docs link
Demo

introduce

Vite-Vue-Admin Is a front-end management template，It is implemented based on Vite4.x, Vue3.x, Vue-router4.x, Pinia, Element-plus, TypeScript. It uses the latest front-end technology stack, built-in vue-i18n internationalization solution, dynamic routing, Secondary development of the table component,antd-x6，Refined typical business model, provides a wealth of functional components, it can help you quickly build enterprise-level back-end product prototype. It can also be used as an example to learn mainstream technologies such as Vue3, Vite, Ts, etc.

major dispositions

• Pnpm
• Vite
• Vue
• Pinia
• Vue-router
• Typescript
• Axios.js
• Mock.js
• Element-plus

Built-in element-plus Two development Encapsulation

• upload-file (File Upload，Support specified file format,File size)
• powerful-table (Multi-function form component)Documentation readme

Project settings

Precautions

1. The default is to use both the development version and the release version mock If the release version needs to be disabled mock Please main.ts Uncomment the following code under the file And find .env.production Under the file VITE_MOCK Variable to modify its false
2. Development version disabled mock Please.env.development Under the file VITE_MOCK Variable to modify its false

// main.ts

// if (
//   import.meta.env.VITE_MOCK === "true"
// ) {
mockXHR()
// }

3. Image download success can not open solution

// node_modules/mockjs/dist/mock.js
if (!this.match) {
  // 8364 line added
  this.custom.xhr.responseType = this.responseType
  this.custom.xhr.send(data)
  return
}

Install dependencies,

pnpm install

package.json command introduce

pnpm dev # project running
pnpm build # Project forming
pnpm tsc # Check code type
pnpm preview # Project preview
pnpm clean:cache # clear cache
pnpm clean:modules # clear node_modules folder
pnpm lint:lint-staged # Verify the code format at commit time
pnpm prepare # init husky

How to Contribute

Welcome to join us! Ask an Issue or submit a Pull Request.

Pull Request:

1. Fork code!
2. Create your own branch: git checkout -b feat/xxxx
3. Submit your changes: git commit -am 'feat: add xxxxx'
4. Push your branch: git push origin feat/xxxx
5. submit pull request

Git Contribution submission specification

• reference vue specification (Angular)

  • feat Add new features
  • fix Fix the problem/BUG
  • style The code style is related and does not affect the running result
  • perf Optimization/performance improvement
  • refactor Refactor
  • revert Undo edit
  • test Test related
  • docs Documentation/notes
  • chore Dependency update/scaffolding configuration modification etc.
  • workflow Workflow improvements
  • ci Continuous integration
  • types Type definition file changes
  • wip In development

plan （2021-3-30）

• File Upload
• Tencent map (remove)
• Amap selected points
• Amap electronic fence
• graphic edit (Antd-x6)
• signature
• select icon
• Internationalized multilanguage (i18n)
• tablet menu
• Added log menu to catch interface errors as well errorHandler
• Global common configuration (component size, theme color, watermark, etc.)
• markdown Editor (support formulas, emoticons, flow charts...)
• Permission Test Menu (Permission instruction)
• The login password is stored locally using MD5 encryption
• excel import and export
• Print instruction, copy instruction
• Global instruction

Other functions can be issues propose

contribute

If you think this project helped you, please help click Star