Ant Design Vue的初始化,按需加载,定制主题,布局

官方资源

#官网
https://www.antdv.com/docs/vue/introduce-cn/

安装和初始化项目

安装vue的脚手架工具

npm install -g @vue/cli

创建antd-demo Vue项目

这种方式就是vue-cli 3

vue create antd-demo

上图是让你选择默认的vue2，vue3，还是自定义构建，因为我不喜欢eslint，所有我选择自定义构建、

配置如下

最后配置

若安装缓慢报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。

安装完成，会有一个antd-demo文件夹，如

这时候表示vue的项目骨架已经搭建完成了

安装ant-design-vue组件

进入刚才生成的antd-demo文件夹，执行

npm i --save ant-design-vue

安装完成后打开package.json，可以查看组件版本

hello world

这是一个简单的Demo

全局引入组件

我这边使用全局引入，你也可以使用局部引入

文档：https://www.antdv.com/docs/vue/getting-started-cn/

找到src下的main.js 引入如图所示

main.js

import Vue from 'vue'
import App from './App.vue'

//引入antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false

//全局引入
Vue.use(Antd);


new Vue({
  render: h => h(App),
}).$mount('#app')

使用button组件

修改app.vue


Hello world

在antd-demo目录运行

npm run serve

如上图表示运行成功，接着访问上图的链接http://localhost:8081/

如下图表示正常

高级配置-使用 babel-plugin-import 按需加载

前面我们已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。

此时我们需要对 vue-cli 的默认配置进行自定义。

https://www.antdv.com/docs/vue/use-with-vue-cli-cn/#高级配置

安装

npm install babel-plugin-import --dev

关于修改Beble配置的问题

官网上只有vue-cli 2/3的配置提示，但是我查询了一下我本机的配置

vue-cli 4 了，然后我仔细观察

嗯，应该按照vue-cli 3的配置来没问题

babel.config.js配置

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    //配置babel-plugin-import
    plugins: [
        [
            "import",
            {libraryName: "ant-design-vue", libraryDirectory: "es", style: true}
        ]
    ]
}

main.js修改成按需加载组件

import Vue from 'vue'
import App from './App.vue'

//引入antd
/*import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';*/

//只引入button组件
import { Button } from 'ant-design-vue'

Vue.config.productionTip = false

//全局引入
//Vue.use(Antd);
//组件引入, 并配置按需加载
Vue.component(Button.name, Button);

new Vue({
  render: h => h(App),
}).$mount('#app')

Failed to resolve loader: less-loader的问题

上面配置完了，重新运行

npm run serve

发现提示

Failed to resolve loader: less-loader
You may need to install it.

这个问题有两种

  • 安装less的方式

  • 不使用less的方式

安装less的方式

安装

npm install less less-loader --save-dev

安装完了，重新启动还是报错

.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
Error in D:\myCode\antd-demo\node_modules\ant-design-vue\es\style\color\bezierEasing.less (line 110, column 0)

参考：https://www.antdv.com/docs/vue/customize-theme-cn#在-vue-cli-3-中定制主题

项目根目录下新建文件vue.config.js,并写入下面内容

// vue.config.js for less-loader@6.0.0
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

重新启动就ok了

修改babel配置

不推荐,因为定制主题也要用到less

将style:true 改为 'css'

重新启动

npm run serve

就没问题

babel.config.js配置

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    //配置babel-plugin-import
    plugins: [
        [
            "import",
            {libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css'}
        ]
    ]
}

定制主题

https://www.antdv.com/docs/vue/customize-theme-cn/

Ant Design Vue 的样式变量 #

antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。

以下是一些最常用的通用变量，所有样式变量可以在 这里 找到。

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

如果以上变量不能满足你的定制需求，可以给我们提 issue。

定制方式 #

我们使用 modifyVars 的方式来进行覆盖变量。下面将针对不同的场景提供一些常用的定制方式。

使用示例

修改vue.config.js,没有就新建

// vue.config.js for less-loader@6.0.0
module.exports = {
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    modifyVars: {
                        'primary-color': '#1890ff', // 全局主色
                        'link-color': '#1890ff', // 链接色
                        'success-color': '#52c41a', // 成功色'
                        'warning-color': '#faad14', // 警告色
                        'error-color': '#f5222d', // 错误色
                        'font-size-base': '14px', // 主字号
                        'heading-color': 'rgba(0, 0, 0, 0.85)', // 标题色
                        'text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
                        'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文本色
                        'disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色
                        'border-radius-base': '4px', // 组件/浮层圆角
                        'border-color-base': '#d9d9d9', // 边框色
                        'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // 浮层阴影
                    },
                    javascriptEnabled: true,
                },
            },
        },
    },
};

布局

布局方式antd 有三种

  • Grid 栅格
  • Layout 布局
  • Space 间距

去掉头部

去App.vue注释掉

增加layout路由

在antd-demo\src\router\index.js中增加

{
    path: '/layout',
    name: 'layout',
    component: () => import( '../views/Layout.vue')
}

Layout 布局

文档：https://www.antdv.com/components/layout-cn/

基础自定义触发器布局

./views/Layout.vue

运行

npm run serve

效果

可以看到高度没有铺满

高度铺满
.ant-layout{
  height: 100%;
}

侧边布局

效果

AntDesignVue

相关

ant design vue 打开的各种下拉框随着页面滑动

Ant Design Vue table行点击事件

标签