Vue>> antd-vue-admin>> 返回
项目作者： weizhanzhan

项目描述 ：
?ant design vue + vue.js + sass 等实现的后台管理系统(下面有浏览地址)
高级语言： CSS
项目地址: git://github.com/weizhanzhan/antd-vue-admin.git


antd-vue-admin typescript_Dev






















简介

antd-vue-admin 是一个后台管理 spa 页面，它基于 vue 和 ant-design-vue 采用了最新的前端技术栈，实现了登录权限验证，动态路由生成(新加入模块，根据模块生成对应模块的菜单信息)，参考vue-element-admin 和ant-design-pro-vue，实现更标准化的前端实例模型，根据自己的业务修该对应的路由信息等模块信息，快速搭建后台管理系统模板。此版本是经过Typescript重构，加入一些新功能

此版本是ts版本 分支typescript_dev，不考虑ts请切换master分支,或者antd-vue-ts分支ts，js代码都有的

TIP

vue3分支是准备Vue3.0 + Typescript重构的分支，欢迎查看😄

安装

  1. # 克隆项目
  2. git clone https://github.com/weizhanzhan/antd-vue-admin.git
  4. # 进入项目目录
  5. cd antd-vue-admin
  7. # 安装依赖
  8. npm install
  9. or
  10. yarn
  12. # 启动服务
  13. npm run serve

部署

  1. npm run build

Online

在线浏览用户名密码随便输入

账号375786117@qq.com 密码123456
Image text
Image text

功能

  1. - 登录 / 注销
  2. - 页面
  3.   - 模块切换
  4.   - dashboard
  5.   - sideBar收缩和展开
  6.   - 主题换肤
  7.   - 中英文切换
  9. - 侧边栏
  10.   - 根据不同用户权限展示相应模块下的动态左侧菜单，模块切换，菜单更换
  12. - 权限验证
  13.   - 管理员页面 
  14.   - 权限设置 
  16. - 表格操作
  17.   - 涉及平常业务遇到的相关表格操作（参考）
  19. - Echarts
  20.  - 滑动显示更多数据
  21.  - 动态切换charts
  22.  - map地图使用
  23.  - video视频播放 AliyunPlayer
  24. - Icons
  25.  - 阿里iconfont
  26. - TypeScript（已经加入）

顶部加载条

安装

  1. yarn add nprogress
  2. yarn add @types/nprogress

使用

  1. router.beforeEach(()=>{
  2.   NProgress.start()
  3. })
  4. router.afterEach(() => {
  5.   NProgress.done()
  6. })

抽取公共包，引入CDN

  1. const externals = {
  2.   vue: 'Vue',
  3.   'vue-router': 'VueRouter',
  4.   vuex: 'Vuex',
  5.   axios: 'axios'
  6. }
  7. const cdnMap = {
  8.   css: [],
  9.   js: [
  10.       '//unpkg.com/vue@2.6.10/dist/vue.min.js',
  11.       '//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js',
  12.       '//unpkg.com/vuex@3.1.1/dist/vuex.min.js',
  13.       '//unpkg.com/axios@0.19.0/dist/axios.min.js'
  14.   ]
  15. }
  16. module.exports = {
  17.   chainWebpack: config => {
  18.     config.externals(externals)
  19.     config.plugin('html').tap(args => {
  20.       args[0].cdn = cdnMap
  21.       args[0].minify && (args[0].minify.minifyCSS = true) // 压缩html中的css
  22.       return args
  23.     })
  24.   }
  25. }

然后在index.html里添加

  1. <!-- 使用CDN的CSS文件 -->
  2. <% for (var i in
  3.   htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
  4.   <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
  5.   <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
  6. <% } %>
  7.   <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
  8. <% for (var i in
  9.   htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
  10.   <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  11. <% } %>

去除console

保存测试环境和本地开发环境的console

  1. npm i -D babel-plugin-transform-remove-console

在 babel.config.js 中配置

  1. // 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
  2. const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
  4. const plugins = [
  5.   [
  6.     'import',
  7.     { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
  8.   ]
  9. ]
  11. // 去除 console.log
  12. if (IS_PROD) {
  13.   plugins.push('transform-remove-console')
  14. }
  16. module.exports = {
  17.   presets: ['@vue/cli-plugin-babel/preset'],
  18.   plugins
  19. }

关于我

Image text
加我微信，邀你进入技术交流群，交流学习 😄 共同进步

如果喜欢请给我一个小♥♥ ⭐ （づ￣3￣）づ

感谢

vue-element-admin

ant-design-pro-vue

vue-h5-template