repository·master·Indexed 27 days ago
https://github.com/vuecomponent/ant-design-vue-proAn out-of-the-box UI solution and Vue boilerplate for building enterprise applications based on Ant Design Vue 1.x for Vue 2. It includes specialized components like STable for automated data loading and IconSelector, as well as built-in support for async route mapping, permission logic, and dynamic theme color replacement via the ThemeColorReplacer plugin.
Ant Design Vue Pro for Vue 2 is an out-of-the-box UI solution and boilerplate for enterprise applications. It is based on Ant Design of Vue.
Note: If you require a Vue 3 version, please use Ant Design Vue Pro for Vue 3.
To run the linter and automatically fix style issues in the codebase, use the following command:
yarn run lintThe NumberInfo component is used in data cards to highlight specific business metrics. It displays a title, a total value, a subtitle, and a sub-total, along with a status indicator (up/down).
import NumberInfo from '@/components/NumberInfo'
export default {
components: {
NumberInfo
}
}The AvatarList component displays a group of user avatars, commonly used for project or team member lists. It supports controlling the size of the avatars and limiting the number of visible items.
import AvatarList from '@/components/AvatarList'
const AvatarListItem = AvatarList.Item
export default {
components: {
AvatarList,
AvatarListItem
}
}mock is disabled. To manage or use mock data, use the file located at src/mock/index.js.Add BundleAnalyzerPlugin to the configureWebpack.plugins array in your vue.config.js file to enable dependency analysis during the build process.
const path = require('path')
const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
function resolve (dir) {
return path.join(__dirname, dir)
}
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 依赖大小分析工具
new BundleAnalyzerPlugin(),
]
},
// ...
}The Ellipsis component automatically handles text overflow by adding an ellipsis. It supports two truncation modes: based on a maximum character length or a maximum number of lines.
To use it, import the component and register it in your Vue component.
import Ellipsis from '@/components/Ellipsis'
export default {
components: {
Ellipsis
}
}eslintConfig node from package.json and set lintOnSave to false in vue.config.js.The project uses load-on-demand for optimization. Configuration is handled in /src/main.js via the following imports:
import './core/lazy_use'import './core/use'For more detailed information, refer to the docs/load-on-demand.md file in the repository.
The Trend component is used to display trend indicators (up or down). By default, it uses green for upward trends and red for downward trends, which is suitable for most scenarios except for stock market contexts.
import Trend from '@/components/Trend'
export default {
components: {
Trend
}
}The STable component is a wrapper around the standard Ant Design Vue Table component. It simplifies pagination and data fetching by allowing you to pass a Promise directly to the :data prop. You do not need to manually handle pagination logic in your page component; the component handles it based on the returned Promise.
<template>
<s-table
ref="table"
:columns="columns"
:data="loadData"
/>
</template>
<script>
import STable from '@/components'
export default {
components: { STable },
data() {
return {
columns: [
{ title: 'Name', dataIndex: 'name' }
],
// loadData MUST return a Promise
loadData: parameter => {
return this.$http.get('/api/data', {
params: parameter
}).then(res => {
// The component expects the result structure to contain data, pageNo, and totalCount
return res.result
})
}
}
}
}
</script>The FooterToolbar is a fixed toolbar component positioned at the bottom of the content area. It remains stationary while the user scrolls, making it ideal for long pages where data collection or submission actions (like a 'Submit' button) need to be constantly accessible.
import FooterToolBar from '@/components/FooterToolbar'
export default {
components: {
FooterToolBar
}
}