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重构的分支，欢迎查看😄

安装

# 克隆项目
git clone https://github.com/weizhanzhan/antd-vue-admin.git

# 进入项目目录
cd antd-vue-admin

# 安装依赖
npm install
or
yarn

# 启动服务
npm run serve

部署

npm run build

Online

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

账号[email protected] 密码123456

功能

- 登录 / 注销
- 页面
  - 模块切换
  - dashboard
  - sideBar收缩和展开
  - 主题换肤
  - 中英文切换
  
- 侧边栏
  - 根据不同用户权限展示相应模块下的动态左侧菜单，模块切换，菜单更换

- 权限验证
  - 管理员页面 
  - 权限设置 

- 表格操作
  - 涉及平常业务遇到的相关表格操作（参考）

- Echarts
 - 滑动显示更多数据
 - 动态切换charts
 - map地图使用
 - video视频播放 AliyunPlayer
- Icons
 - 阿里iconfont
- TypeScript（已经加入）

顶部加载条

安装

yarn add nprogress
yarn add @types/nprogress

使用

router.beforeEach(()=>{
  NProgress.start()
})
router.afterEach(() => {
  NProgress.done()
})

抽取公共包，引入CDN

const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios'
}
const cdnMap = {
  css: [],
  js: [
      '//unpkg.com/[email protected]/dist/vue.min.js',
      '//unpkg.com/[email protected]/dist/vue-router.min.js',
      '//unpkg.com/[email protected]/dist/vuex.min.js',
      '//unpkg.com/[email protected]/dist/axios.min.js'
  ]
}
module.exports = {
  chainWebpack: config => {
    config.externals(externals)
    config.plugin('html').tap(args => {
      args[0].cdn = cdnMap
      args[0].minify && (args[0].minify.minifyCSS = true) // 压缩html中的css
      return args
    })
  }
}

然后在index.html里添加

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

去除console

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

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

在 babel.config.js 中配置

// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)

const plugins = [
  [
    'import',
    { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
  ]
]

// 去除 console.log
if (IS_PROD) {
  plugins.push('transform-remove-console')
}

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins
}

关于我

加我微信，邀你进入技术交流群，交流学习 😄 共同进步
如果喜欢请给我一个小♥♥ ⭐ （づ￣3￣）づ

感谢

vue-element-admin
ant-design-pro-vue
vue-h5-template