armour / vue-typescript-admin-template

🖖 A vue-cli 3.0 + typescript minimal admin template

English | 简体中文

Overview

vue-typescript-admin-template is a production-ready front-end solution for admin interfaces based on vue, typescript and UI Toolkit element-ui. The original Javascript version code vue-element-admin was written by PanJiaChen, many thanks to him for the awesome open source project! :)

If you want to get started with a minimal template code instead of integration solution, you can take a look at the minimal branch.

Documentation

Docs

Live demo

Demo

Screenshots

Related Projects

Armour/vue-typescript-admin-mock-server (mock server for this project)

Armour/vue-typescript-admin-docs (documentation source for this project)

Javascript version:

PanJiaChen/vue-admin-template (a vue2.0 minimal admin template)

PanJiaChen/vue-element-admin (full features supported vue admin)

PanJiaChen/electron-vue-admin (a vue electron admin project)

Features

- 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

Preparation

You need to install node and git locally. The project is based on typescript, vue, vuex, vue-router, vue-cli , axios and element-ui, all request data is simulated using faker.js. Understanding and learning these knowledge in advance will greatly help you on using this project.

Project Structure

├── 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

Project setup

With yarn or npm

Install dependencies

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build:prod

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

Generate all svg components

yarn run svg

Customize Vue configuration

See Configuration Reference.

Browsers support

Modern browsers and Internet Explorer 10+.

IE / Edge	Firefox	Chrome	Safari
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions

Contributing

See CONTRIBUTING.md

License

MIT License

vue-typescript-admin-template's Issues

[Page] Documentation

We can re-use the original vue-element-admin documentation, and update its content when needed.

[Page] Permission

Migrate Permission page from vue-element-admin

• Page permission
• Directive permission
• Two-step login

[Page] Icons

Migrate Icons page from vue-element-admin

[Components] MixIn

Migrate MixIn component from vue-element-admin

• MixIn

[Feature] Tags View

Migrate Tags View feature (allow right-click action) from vue-element-admin

[Components] Back To top & Count To

Migrate following components from vue-element-admin

• Back To Top
• Count To

初始化vue-cli3报错

你好！
我用vue-cli3初始化报错，错误内容如下：
Vue CLI v3.5.5
✨ Creating project in D:\zafProject\work-project\ts-demo\hello.
� Initializing git repository...
⚙ Installing CLI plugins. This might take a while...

'yarn'
ERROR command failed: yarn --registry=https://registry.npm.taobao.org --distur
l=https://npm.taobao.org/dist
错误图片链接：
https://user-gold-cdn.xitu.io/2019/4/2/169dc07f8b4cb17c?w=656&h=210&f=png&s=11301
请问怎样解决；

[Page] Settings && Themes

Migrate Themes page from vue-element-admin

• Settings
• Themes

[Page] Dashboard

Migrate Dashboard page from vue-element-admin

(suggest start this after most tasks are done)

path直接访问/login或登录成功后访问/dashboard报404

直接访问/login 404

在路由前置守卫(permission.ts)文件
if (whiteList.indexOf(to.path) !== -1) { next(); }
理应跳到登录页面，不知道为何404

登录成功后直接刷新页面404

router没有该路由

我在引入 npm install -save @types/cesium后，出现错误Module parse failed: Unexpected character '#' (1:0)

我在引入 npm install -save @types/cesium后，获取对象，启动服务
出现错误
error in ./node_modules/requirejs/bin/r.js

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.

#!/usr/bin/env node
| /**
| * @license r.js 2.3.6 Copyright jQuery Foundation and other contributors.

@ ./node_modules/cesium/index.js 5:16-36

应该是webpack识别不了#号，求解决方法。

eslint error

Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

[Components] Editors

Migrate following components from vue-element-admin

• Rich Text Editor
• Markdown Editor
• JSON Editor

[Page] Example

Migrate Example page from vue-element-admin

[Components] Drop Zone & Sticky

Migrate following components from vue-element-admin

• Drop Zone
• Sticky

[Feature] Two-step login

Migrate Two-step login feature from vue-element-admin

[Page] Guide

Migrate Guide page from vue-element-admin

请教一个问题：在401.vue文件中import 静态文件语法错，导致build不过

import errGif from "@/assets/401_images/401.gif";

这行，我在npm run build的时候，提示找不到对应的文件，静态文件没有export能import xxx from？？

使用路由懒加载后，打包部署到服务器，页面显示白屏

问题来源

使用了vue+ts的脚手架，在router/index.js中更改为路由懒加载的写法，npm run dev页面正常显示；npm run build打包后部署到服务器，首页白屏，无法正常显示，无报错信息。

验证的相关信息

ts项目增加路由懒加载后白屏
上面的脚手架中，将router/index.ts中的改成路由懒加载写法，并在config/index，build下的assetsPublicPath，由/改为./后即可验证
作者大大，我看你项目中使用了路由懒加载，请教下上面的问题。。。。

[Feature] Full-Screen

Migrate Full-Screen feature from vue-element-admin

[Page] Error

Migrate Error related pages from vue-element-admin

• Error Pages
• Error Log

you should ideally implement interface in class

vue-typescript-admin-template/src/store/modules/user.ts

Line 14 in cf39154

class User extends VuexModule {

I think instead of rewriting the property types again, we should do

interface IPerson {
  age: number
}

@Module({})
class Person extends VuexModule implements IPerson {
  age = 10 // <- tsc forces it because of this ^^^
}

模块导入相关问题

I'm submitting a feature request

Current behavior

在「vue文件A」中导入「vue文件B」时,
如果B中把ts代码抽为一个单独文件,会导致A导入B时,typescript语法检查阶段报”B is not a module" (虽然不影响实际编译)

Expected behavior

当然是不报红线啦(强迫症看着难受😅)

Minimal reproduction of the problem with instructions

A.vue引入B.vue

<template>
</template>
<script lang="ts">
//! 检查阶段这里报 ”b.vue is not a module" 
import Comp2 from './b.vue' 
export default {}
</script>

B.vue引入单独的ts

<template>
</template>
<script src="./b.ts" lang="ts"></script>

What is the motivation / use case for changing the behavior

如下,如果把B.vue的ts放在一起(而不是引入单独的ts文件),此时A.vue的导入就恢复正常了

B.vue

<template>
</template>
<script lang="ts">
export default {}
</script>

Environment

system version: osx
ide: vscode
package manager: npm
typescript:3.3.4000

[Page] I18n

Add i18n support and migrate i18n page from vue-element-admin

更多的后台功能集成 (欢迎PR)

大家好，我们打算开始逐渐把更多的后台功能从原来的 vue-element-admin project 迁移到这个 typescript 的版本中， 我创建了一系列的 issues 用来更好的更新进度。 欢迎任何developer参与贡献👏 只需要开始接任务时在对应的 issue 里说一声 防止大家花时间做了重复工作， 感谢！🎉

[Page] Tab

Migrate Tab page from vue-element-admin

[Page] Zip

Migrate Zip page from vue-element-admin

app-main Page transition

bug report

Current behavior

跟 vue-element-admin 项目的页面过渡效果不一致，下方出现滚动条。

Expected behavior

没有滚动条

Minimal reproduction of the problem with instructions

登录 -> 点击侧边栏页面 (Form) -> 点击上方的 Dashboard
页面切换时会出现滚动条

修正方式

为 .app-main 添加 overflow:hidden;

来自 vue-element-admin 的 AppMain.vue

[Page] Excel

Migrate Excel page from vue-element-admin

• Export Excel
• Export selected
• Upload Excel
• Visualization Excel

[Page] Table

Migrate Table page from vue-element-admin

• Dynamic Table
• Drag And Drop Table
• Tree Table
• Inline Edit Table

ERR_ACTION_ACCESS_UNDEFINED

index.js?6fc5:318 Uncaught (in promise) Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @action?
That works only in dynamic modules.
If not dynamic use this.context.commit("mutationName", payload) and this.context.getters[“getterName”]
Error: Could not perform action Login

[Page] Profile

Migrate Profile page from vue-element-admin

安装完后在store下的user.ts报了错

@MutationAction({ mutate: [ 'roles', 'name', 'avatar' ] })

报错内容：mutate 类型不兼容

[Components] Draggable

Migrate Dragganle components from vue-element-admin

• Drag Dialog
• Drag Select
• Drag Kanban
• Drag List

安装项目只能yarn不能用npm？

安装项目只能yarn不能用npm？

你好， 我 fork 了这个项目， 然后移了更多的 vue-element-admin 页面过来，不知能不能合到你的这个项目中

你好， 我 fork 了这个项目， 然后移了更多的 vue-element-admin 页面过来，不知能不能合到你的这个项目中

https://github.com/runner-mei/vue-typescript-admin-template

Full Admin Template Support (PR Welcome!)

Hi all, We start to migrate more features and pages from the original vue-element-admin project, and I created a list of issues to better track the progress. You can help us with that too, just tell me which task you want to work on and I'll assign you that one, any PR is welcome, thanks! :)

UserModule.GetInfo()始终执行then

permission.ts下
UserModule.GetInfo().then(() => {
next();
}).catch((err) => {
//不会进入此处
});
GetInfo里抛出异常，不会进入catch，始终是在then函数里。
浏览器log Could not perform action GetInfo。
不知道是不是只有我这样？捣鼓了一天没有解决掉。

Permission Authentication

[ ] Page permission
[ ] Directive permission
[ ] Two-step login

exports is not defined

安装依赖完成之后，启动项目显示已成功，但是访问项目路径的时候，浏览器的控制台输出 Uncaught ReferenceError: exports is not defined

layout/components/AppMain.vue 里边的 router-view 再次出现了ID#app

不仅出现了多个ID#app，并且也没有动画效果和 section class="app-main" 这个标签

在 PanJiaChen/vue-element-admin 这个项目中并没有这个问题

[Page] PDF

Migrate PDF page from vue-element-admin

npm的方式会报错

请问这个支持npm 吗

仓库clone 下来， npm install之后
执行 npm run serve会出现报错

[Page] Theme

Migrate Theme page from vue-element-admin

[Components] Avatar Upload

Migrate Avatar Upload component from vue-element-admin

• Avatar Upload

[Page] Clipboard

Migrate Clipboard page from vue-element-admin

[Page] Charts

Migrate Charts page from vue-element-admin

没有开发环境和生产环境的配置，没有国际化，动态路由没实现，加油哇

没有开发环境和生产环境的配置，没有国际化，动态路由没实现，加油哇！

拉取master分支添加echart出错

echart部分改为ts时报@prop的参数错误没发现什么错误，如下图
，
然后按照develop分支的写法添加echart，出现新的错误如下：

然后安装 case-sensitive-paths-webpack-plugin模块 错误没有改变

导入出错，找不到path

这path从哪来的？新手一枚请告知，运行报错