下方点击出项上方对应的插件_前后端分离(3)—创建项目,集成ant.design

打开你的脚手架主界面。

点击上面的创建，选择一下你要创建的目录(大姐你好好选，别以后找不到项目目录)。

点击下面的创建项目按钮(原谅色的)

第一步：

输入你的项目名(wozhendeyaoesile)，包管理器选择npm哈。

然后点击下一步

这个选择默认就好，没什么技术含量，点击创建项目。

然后就出现了下面的框，耐心等待就行了

然后出来这个界面就代表成功了

好了 上面是创建vue项目的方法，下面才是加入ant.design的方法。

脚手架提供了一个相对比较方便的功能 就是可视版安装依赖插件

点击左边的依赖按钮，右上角有个安装依赖。

然后重点来了，出来搜索框 搜索：ant-design-vue

然后点一下安装ant-design-vue.

安装完以后 点击左边的依赖 就可以出来ant-design-vue了

现在按照下图进行点击

现在你就发现你的项目在启动中了 ，启动完毕 点击这个按钮可以快速打开你的项目。

你会惊喜的发现，没错，一看确实看不到任何安装完ant.design的迹象，就是这样的

但是你需要将antdesign调用才可以起作用的哈。

其实目前这个页面展示的是APP.vue

现在你得好好听课了。

我们把app.vue里面template下面的内容都删掉，只留下一个div。看上面那个图哈。

我们写一个ant.design的一个按钮，就是下边的代码，粘过去！

Primary

这个按钮是不是难看的一笔？并且还报错。。。

这是因为我们只是将ant组件安装进去了，并没有调用。

你现在要弄懂一件事情，就是按需调用，一个vue程序由N多不同的组件去构成的，ant.design算一个组件的话，你要考虑这个组件是不是所有页面都要用，还是每个页面都需要用，如果说这个功能我们只在特定的页面里面去用的话，那就可以在指定页面去引用。但是像ant.design或者是iview这样的UI框架的话，是100%全部页面都要用到的啊，别发蒙，很好理解。理解了这块知识，你就可以去调用了。

就像上面说的，ant组件是全局的，一定要在所有的页面都得注册。这就提到了一个全部页面的公共页面，根目录下面的，main.js。这个js文件 是全局公共加载的，不知道你了不了解这块。所以我们ant组件也要在main.js里面去注册一下，需要下面这样引用：

import Antd from 'ant-design-vue'

上面那行代码是引用，但是没有使用！还需要加一行使用代码。

Vue.use(Antd);

这样就讲ant.design的框架组件引进去了，但是你只是引了一些方法，没有调用样式，所以还需要调用样式

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

上面三步做完就大功告成了，再回来看一下效果，emmmmm，有官方效果了。

控制台也不报错了哈。

总结一下，今天的内容是教你怎么安装vue脚手架，怎么使用脚手架创建项目，怎么引入公共组件和样式，下面是ant.design的官方文档，参考一下里面的元素自己动手操作一下。

网址：https://vue.ant.design/components/button-cn/

课后作业：请按照上述方法创建项目(woshizhendee)并引入antdesign的组件和样式，将下面图中的select调到页面显示。

友情提示：官方文档中有一个小图标是展开示例代码哦，别傻乎乎的自己写半天，复制粘贴就行。

学习要慢慢吸收。

本文最后更新于2019-7-31，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！