Ant Design 环境搭建,创建一个demo

 

通过 npm 使用 React

如果你的系统还不支持 Node.js 及 NPM 可以参考 

使用 webpack。

国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

<h3 id="使用命令行工具">使用命令行工具<a href="https://pro.ant.design/docs/getting-started-cn#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7" rel="nofollow">#

<pre class="has">
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了:

使用命令行工具

<pre class="has">
$ cnpm install [name]

更多信息可以查阅:


使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目:

使用命令行工具

<pre class="has">
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

如果 构建报错可参考: 

至此 React 开发环境集成完毕,接下来创建 Ant Design 项目;

使用命令行工具

你可以使用集成化的命令行工具 

<pre class="has">
$ npm install ant-design-pro-cli -g
$ mkdir my-project && cd my-project
$ pro new # 安装脚手架

创建项目和脚手架完毕,通过命令行找到你的项目路径

如上图,因为个人创建的路径不一样,所以就用图表示了,找到路径以后执行   npm start  运行项目。

完成。

第二次创建的话,直接在命令行输入:

$ pro new # 安装脚手架  (先到你想要创建项目的目录)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


过滤器:就是筛选filters: [ { text: '全部', value: '' }, { text: '通过', value: '通过' }, { text: '拒绝', value: '拒绝' }, { text: '待处理', value: '待处理' }, ], onFilter: (value, record) =&gt; record.c...
好处: 就是可以实现 响应式 拉伸行(row) 列(col)col要直接在row下基本理解:span="多少" //最大24格子 一行是24格子 一个 row 里面的col 的span加起来24就占满了&lt;a-row&gt; &lt;a-col :span="12"&gt;col-12&lt;/a-col&gt; &lt;a-col :span="12"&gt;col-12&lt;/a-col&gt; &lt;a-col :sp...
创好vue 项目npm 下载antnpm i --save ant-design-vue@next完整引入main文件下添加import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';.use(Antd)这样就ok了使用的时候就是正常复制代码使用按需引用...
外面套个from 标签就好了。
antDesign表单函数配置分析用getFieldDecorator包起来的高阶组件进行扩展getFieldDecorator(name,options)(component)对组件进行name注册,传入opotions配置以及回调里传入底层组件component自定义表单验证思路:用装饰器来扩展底部组件在装饰器里写入对事件的处理
之前在vue页面中引入axios使用,本篇在mainjs中引入1、mainjs中引入axios,设置基础urlimportaxiosfrom'axios'axios.defaults.baseURL='https://localhost:8080/'Vue.prototype.axios=axios2、在vue页面中,注意axios前需要加this.methods:{login(){letthat
先直接上核心代码:this.goToHomePage换成自己逻辑自己写的时候直接把this.goToHmoPage()换成自己的逻辑就行了,还有注意一点的是: 需要传个空函数,不然会报错在componentWillMount移除事件监听是防止浪费内存影响性能。最后在antdesign实现enter回车的方式如下: htmlT
Jeecg-Boot是一款基于SpringBoot+代码生成器的快速开发平台!采用前后端分离架构:SpringBoot,Ant-Design-Vue,Mybatis,Shiro,JWT。强大的代码生成器让前端和后台代码一键生成,不需要写任何代码,保持jeecg一贯的强大,绝对是全栈开发福音!!JeecgBoot在提高UI能力的同时,降低了前后分离的开发
&lt;template&gt; &lt;div&gt; &lt;a-pagination show-quick-jumper v-model:current=&quot;current1&quot;
表单验证详解 &lt;template&gt; &lt;!-- 第一个坑 :model=&quot;formState.youForm&quot; 一定要写成这样 不要写成:model=&quot;f
&lt;template&gt; &lt;a-table :columns=&quot;columns&quot; :data-source=&quot;data&quot; :row-selecti
下载 ui库 yarn add ant-design-vue 默认是全局引入,打包后体积很大, 非常影响首屏加载速度, 按需加载 下载按需加载的插件;推荐使用cnpm cnpm install bab
表单验证遇见的坑 01 如果你受控数据是这样写的话 const formState= reactive({ youForm:{ youNaNe:&#39;&#39;, useSlectValue: &
Ant Design Vue中Table对齐方式显示省略号 &lt;template&gt; &lt;!-- bordered 表示表格中的边框 pagination=&quot;false&quot
&lt;a-drawer :title=&quot;myTitle&quot; placement=&quot;right&quot; :visible=&quot;visible&quot; @cl
InputNumber 有值但是验证却不能够通过 今天遇见这样一个问题,InputNumber 输入框中有值 但是却却提示验证不能够通过 后来经过分析,怀疑是数据类型不正确, 后面经过验证,果然是数据
Select 选择器进行搜索 &lt;template&gt; &lt;div&gt; &lt;a-form-item label=&quot;分类:&quot;&gt; &lt;a-select p
&lt;template&gt; &lt;a-tree-select v-model:value=&quot;value&quot; &quot;width: 320px&quot; :t
1.创建子组件 &lt;template&gt; &lt;a-drawer :title=&quot;drawerInfo.customTitle&quot; :placement=&quot;pla
&lt;template&gt; &lt;div class=&quot;clearfix&quot;&gt; {{ fileList }} &lt;a-upload list-type=&quot;