前后端分离(3)—创建项目,集成ant.design - 前端劝退师

前后端分离(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的一个按钮,就是下边的代码,粘过去!

<a-button type="primary">Primary</a-button>

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

这是因为我们只是将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 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏
未经允许不得转载:

作者: 前端劝退师, 转载或复制请以 超链接形式 并注明出处 前端劝退师
原文地址: 《前后端分离(3)—创建项目,集成ant.design》 发布于2019-7-31

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏