antd vue 多个下拉 联动_Vue项目实战学习（二）使用antd组件库

使用步骤直接看最后面的总结。

一、引入antd：

现在从 yarn 或 npm 安装并引入 ant-design-vue。

安装

$ yarn add ant-design-vue

或者

cnpm install --save ant-design-vue--save：将保存配置信息到pacjage.json的dependencies节点中。 --save-dev：将保存配置信息到pacjage.json的devDependencies节点中。dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它

完整引入全部组件main.js中全局引入并注册

import Antd from 'ant-design-vue'

import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)完整引入成功

完整引入实际上加载了全部的 antd 组件的样式(对前端性能是个隐患)局部导入组件

import { Button, message } from'ant-design-vue';

import 'ant-design-vue/dist/antd.css'

Vue.use(Button)

Vue.prototype.$message = message局部引入成功

import { Button } from 'ant-design-vue';的写法引入了 antd 下所有的模块，这会影响应用的网络性能

完整组件列表​github.com

按需加载

//手动引入 一个一个的引入每一个组件的js和css 比较麻烦

import Button from'ant-design-vue/lib/button'; //加载js

import'ant-design-vue/lib/button/style'; //加载less 我使用这个引入样式文件失败

或者 ant-design-vue/lib/button/style/css //加载 css 这个引入成功

import message from'ant-design-vue/lib/message'; //加载js

import'ant-design-vue/lib/message/style/css';

Vue.use(Button)

Vue.prototype.$message = message

引入antd组件后就可以直接在项目中使用了。

ant button

ant button

// @ is an alias to /srcimport HelloWorld from "@/components/HelloWorld.vue";

export default {

name: "home",

components: {

HelloWorld

},

methods: {

info () {

this.$message.info('This is a normal message');

},

}

};

以上三种方式都是在main.js导入后就可以直接在项目中使用了。

使用babel-plugin-import 按需加载(推荐)

像上面那样手动按需加载一个个的引入非常繁琐，如果你使用了 babel，那么可以使用babel-plugin-import来进行按需加载。

npm install babel-plugin-import --savebabel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

加入这个插件后。你可以仍然这么写：

import { Button } from'ant-design-vue'; //babel-pplugin-import会帮你加载js和css

插件会帮你转换成 ant-design-vue/lib/xxx 的写法。修改babel.config.js

module.exports = {

presets: ["@vue/app"],

plugins: [

[

"import",

{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }

]

]

};然后在需要使用相关组件的页面引入并注册即可按需加载

hello world

import { Button } from 'ant-design-vue';

export default {

components:{ AButton:Button },

}

这个时候理论上应该是OK的，但是，运行后：

纳尼？找不到模块？我是按官方文档来的呀？

官方文档Ant Design Vue​vue.ant.design

然后百度问题，在一篇博文看到：需要将less降为2.x版本

吓得我赶紧看看自己的配置：

然后下载了2.7.2版本的less，修改配置，OK;

注意如果在main.js中用Vue.use()的话则是全局引入，在项目中就可以直接使用了；

不常用的就可以使用局部引入的方式，在用到的.vue文件中使用import引入

像上面的button在Home.vue中局部引入，而message已经全局引入可以在所有组件使用了。

最后总结一下按需引入的步骤：

1.创建项目

vue create antd

2.进入项目

cd antd

3.安装antdesign组件库

cnpm install ant-design-vue --dev

4.安装babel-plugin-import插件

cnpm install babel-plugin-import --dev

5.安装less2.7.2版本

cnpm install less@2.7.2 --dev

6.在mian.js引入按钮和消息提示组件

import { Button, message } from "ant-design-vue";

Vue.use(Button);

Vue.prototype.$message = message;

7.修改babel.config.js

module.exports = {

presets: ["@vue/app"],

plugins: [

[

"import",

{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }

]

]

};

8.将package.json中的less版本改为2.7.2

9.运行项目，使用Home.vue使用按钮组件。

试试按需引入成功