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按钮-->
<a-button type="primary">Hello world</a-button>

在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 -g @vue/cli
1

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

.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,并写入下面内容

npm install -g @vue/cli
2

重新启动就ok了

修改babel配置

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

将style:true 改为 'css'

重新启动

npm run serve

就没问题

babel.config.js配置

npm install -g @vue/cli
4

定制主题

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

#

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

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

npm install -g @vue/cli
5

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

#

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

使用示例

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

npm install -g @vue/cli
6

布局

布局方式antd 有三种

Grid 栅格

Layout 布局

Space 间距

去掉头部

去App.vue注释掉

npm install -g @vue/cli
7

增加layout路由

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

npm install -g @vue/cli
8

Layout 布局

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

基础自定义触发器布局

./views/Layout.vue

npm install -g @vue/cli
9

运行

npm run serve

效果

可以看到高度没有铺满

高度铺满

vue create antd-demo
1

侧边布局

vue create antd-demo
2

效果