vue typescript admin template

อังกฤษ | 简体中文

ภาพรวม

vue-typescript-admin-template เป็นโซลูชันส่วนหน้าที่พร้อมใช้งานจริงสำหรับอินเทอร์เฟซผู้ดูแลระบบที่ใช้ vue, typescript และ UI Toolkit element-ui รหัสเวอร์ชัน Javascript ดั้งเดิม vue-element-admin เขียนโดย PanJiaChen ขอบคุณมากสำหรับเขาสำหรับโครงการโอเพ่นซอร์สที่ยอดเยี่ยม! -

หากคุณต้องการเริ่มต้นใช้งานโค้ดเทมเพลตขั้นต่ำแทนโซลูชันการรวม คุณสามารถดูสาขาขั้นต่ำได้

เอกสารประกอบ

เอกสาร

การสาธิตสด

สาธิต

ภาพหน้าจอ

โครงการที่เกี่ยวข้อง

Armor/vue-typescript-admin-mock-server (เซิร์ฟเวอร์จำลองสำหรับโปรเจ็กต์นี้)

Armor/vue-typescript-admin-docs (แหล่งเอกสารประกอบสำหรับโปรเจ็กต์นี้)

เวอร์ชันจาวาสคริปต์:

PanJiaChen/vue-admin-template (เทมเพลตผู้ดูแลระบบขั้นต่ำ vue2.0)

PanJiaChen/vue-element-admin (ฟีเจอร์เต็มรูปแบบรองรับผู้ดูแลระบบ vue)

PanJiaChen/electron-vue-admin (โครงการผู้ดูแลระบบ vue อิเล็กตรอน)

คุณสมบัติ

- Login / Logout

- Permission Authentication
  - Page permission
  - Directive permission
  - Permission configuration page
  - Two-step login

- Multi-environment build
  - Dev / Stage / Prod

- Global Features
  - I18n
  - Dynamic themes
  - Dynamic sidebar (supports multi-level routing)
  - Dynamic breadcrumb
  - Tags-view (supports right-click operation)
  - Clipboard
  - Svg icons
  - Search
  - Screenfull
  - Settings
  - Mock data / Mock server
  - PWA support

- Components
  - Editors
    - Rich Text Editor
    - Markdown Editor
    - JSON Editor
  - Avatar Upload
  - Back To Top
  - CountTo
  - Dropzone
  - Draggable Dialog
  - Draggable Kanban
  - Draggable List
  - Draggable Select
  - ECharts
  - Mixin
  - SplitPane
  - Sticky

- Table
  - Dynamic Table
  - Draggable Table
  - Inline Edit Table
  - Complex Table

- Excel
  - Export Excel
  - Upload Excel
  - Excel Visualization

- Zip
  - Export zip

- PDF
  - Download pdf

- Dashboard
- Guide Page
- Advanced Example Page
- Error Log
- Error Page
  - 401
  - 404

การตระเตรียม

คุณต้องติดตั้งโหนดและคอมไพล์ในเครื่อง โปรเจ็กต์นี้ใช้ typescript, vue, vuex, vue-router, vue-cli , axios และ element-ui ข้อมูลคำขอทั้งหมดจำลองโดยใช้ faker.js การทำความเข้าใจและการเรียนรู้ความรู้เหล่านี้ล่วงหน้าจะช่วยคุณในการใช้โครงการนี้ได้อย่างมาก

โครงสร้างโครงการ

├── mock/                      # mock server & mock data
├── public                     # public static assets (directly copied)
│   │── favicon.ico            # favicon
│   │── manifest.json          # PWA config file
│   └── index.html             # index.html template
├── src                        # main source code
│   ├── api                    # api service
│   ├── assets                 # module assets like fonts, images (processed by webpack)
│   ├── components             # global components
│   ├── directives             # global directives
│   ├── filters                # global filter
│   ├── icons                  # svg icons
│   ├── lang                   # i18n language
│   ├── layout                 # global layout
│   ├── pwa                    # PWA service worker related files
│   ├── router                 # router
│   ├── store                  # store
│   ├── styles                 # global css
│   ├── utils                  # global utils
│   ├── views                  # views
│   ├── App.vue                # main app component
│   ├── main.ts                # app entry file
│   ├── permission.ts          # permission authentication
│   ├── settings.ts            # setting file
│   └── shims.d.ts             # type definition shims
├── tests/                     # tests
├── .circleci/                 # automated CI configuration
├── .browserslistrc            # browserslist config file (to support Autoprefixer)
├── .editorconfig              # editor code format consistency config
├── .env.xxx                   # env variable configuration
├── .eslintrc.js               # eslint config
├── babel.config.js            # babel config
├── jest.config.js             # jest unit test config
├── package.json               # package.json
├── postcss.config.js          # postcss config
├── tsconfig.json              # typescript config
└── vue.config.js              # vue-cli config 

การตั้งค่าโครงการ

ด้วยเส้นด้ายหรือ npm

ติดตั้งการพึ่งพา

yarn install

คอมไพล์และโหลดซ้ำเพื่อการพัฒนา

yarn run serve

คอมไพล์และลดขนาดสำหรับการผลิต

yarn run build:prod

Lints และแก้ไขไฟล์

yarn run lint

เรียกใช้การทดสอบหน่วยของคุณ

yarn run test:unit

สร้างส่วนประกอบ svg ทั้งหมด

yarn run svg

ปรับแต่งการกำหนดค่า Vue

ดูการอ้างอิงการกำหนดค่า

รองรับเบราว์เซอร์

เบราว์เซอร์สมัยใหม่และ Internet Explorer 10+

IE / ขอบ	ไฟร์ฟอกซ์	โครเมียม	ซาฟารี
IE10, IE11, ขอบ	2 เวอร์ชั่นล่าสุด	2 เวอร์ชั่นล่าสุด	2 เวอร์ชั่นล่าสุด

มีส่วนร่วม

ดูการมีส่วนร่วม.md

ใบอนุญาต

ใบอนุญาตเอ็มไอที