Ant design在vue，react的引入

文章地址: https://www.cnblogs.com/sandraryan/

最近由于一些不可描述的原因要研究一下Ant design这个前端框架。

祭上官网： https://ant.design/index-cn

ant Design是蚂蚁金服搞的~ 对应的还有一个ant design pro~ （好像是要付钱的）

同时ant design可以用于不同项目，vue react angular，用法基本上差不多，但是配置方法不同

引入

cdn引入

附上我用的cdn的官网链接（https://www.bootcdn.cn/）

css和js都要引入~

1<link href="https://cdn.bootcss.com/antd/4.0.0-alpha.6/antd.css" rel="stylesheet">
2<script src="https://cdn.bootcss.com/antd/4.0.0-alpha.6/antd.js"></script>

安装ant design项目

👇 这个安装方法是对的（我用的是对的）

使用npm安装到本地

1、首先你要下载了node 和npm

2、终端全局安装antd，输入npm install antd-init -g

3、创建ant-demo 输入mkdir antd-demo 创建antd-demo

4、cd进入创建的文件夹

5、安装npm依赖 antd-init --type plain-react

安装的时候会有个提醒：antd-init@2 仅适用于学习和体验 antd，如果你要开发项目，推荐使用 create-umi 进行项目初始化。

umi 蚂蚁金服开源的企业级React框架，并不是UI框架。使用 umi 作为编译工具。其实 umi 不仅仅是一个编译工具，它同时也是一个前端框架。它对社区的webpack react-router等进行的封装，使得我们可以基于它快速搭建一个 React 项目，方便你快速启动项目

6、npm start 打开页面（和react文件启动页面指令一样）

端口号 http://localhost:8000/

打开后这样子的，默认就是一个日历选择器的demo

vue中安装ant design

1. 安装vue脚手架 npm install -g @vue/cli

2. 初始化一个项目 vue create 项目名称

3. 进入文件夹，使用组件 npm i --save ant-design-vue

4. 然后修改main.js 里的配置

1import Vue from 'vue';
2import Antd from 'ant-design-vue';
3import App from './App';
4import 'ant-design-vue/dist/antd.css';
5Vue.config.productionTip = false;
6
7Vue.use(Antd);
8
9/* eslint-disable no-new */
10new Vue({
11  el: '#app',
12  components: { App },
13  template: '<App/>',
14});

👆 这是官方给的模板

但是会报错！！！！！！！！（呕。。。）

错误信息： You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
我查了一下，因为vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式，指向了"dist/vue.runtime.common.js"位置。

这样修改：

1new Vue({
2  el: '#app',
3  components: { App },
4  template: '<App/>',
5});

修改成：

1new Vue({
2  render: h => h(App),
3}).$mount('#app')

这是vue升级到2.0之后就有的特点。

参考资料： https://blog.csdn.net/wxl1555/article/details/83187647

然后你就可以运行终端打开项目 npm run serve

打开之后就是这个样子惹

然后按照文档 yarn add ant-design-vue

然后就报错了。。。。。。（脏话）

发现json文件里没有dev，研究了好几个方法，决定还是补个包~ npm i

最后从大佬处得知： vue-cli3新建的项目本来就没有dev命令的

然后运行成功了

配置一下，试一试能不能用ant design了

可以了 : )

我把初始helloworld 屏蔽了，没屏蔽这张图片

做测试的代码

app.vue

1<template>
2  <div id="app">
3    <img src="https://my.oschina.net//u/4415923/blog/3336798/assets/logo.png">
4    <a-button type="primary">Button></a-button>
5  </div>
6</template>
7
8
9<script>
10// import HelloWorld from './components/HelloWorld.vue'
11
12export default {
13  name: 'app',
14  components: {
15    // HelloWorld
16  }
17}
18</script>
19
20<style>
21#app {
22  font-family: 'Avenir', Helvetica, Arial, sans-serif;
23  -webkit-font-smoothing: antialiased;
24  -moz-osx-font-smoothing: grayscale;
25  text-align: center;
26  color: #2c3e50;
27  margin-top: 60px;
28}
29</style>

main.js

1import Vue from 'vue';
2import Antd from 'ant-design-vue';
3import App from './App';
4import 'ant-design-vue/dist/antd.css';
5
6// import Button from 'ant-design-vue/lib/button';
7Vue.config.productionTip = false;
8
9Vue.use(Antd);
10// Vue.component(Button.name, Button);
11
12
13/* eslint-disable no-new */
14// new Vue({
15//   el: '#app',
16//   components: { App },
17//   template: '<App/>',
18// });
19// 将main.js中的代码修改如下就可以
20new Vue({
21  render: h => h(App),
22}).$mount('#app')

react中安装ant design

首先你要自己安装一个react项目

安装node ，有就跳过。

用npm 安装 create-react-app工具，自动地在本地目录中创建react项目。

npm install -g create-react-app

全局安装create-react-app脚手架工具，使用命令创建新的react项目。

create-react-app 文件夹名

在文件夹中部署npm，导入react-dom依赖包.

cd 文件夹：

npm init （然后一路回车）

npm install --save react react-dom ( 在该目录下导入react和react-dom）

npm install --save react-router-dom （react路由，以后会用到）

安装styled-copmonents 工具包 npm i styled-components --save

打开 npm start 成功√

1. 安装ant design在react项目中 npm install antd --save

2. 修改app.js的内容为：

（引入react 组件，按需引入组件，引入css样式）

1import React, { Component } from 'react';
2import Button from 'antd/es/button';
3import './App.css';
4
5class App extends Component {
6  render() {
7    return (
8      <div className="App">
9        <Button type="primary">Button</Button>
10      </div>
11    );
12  }
13}
14
15export default App;

这个时候页面是一个很普通的button

3. 修改 src/App.css，在文件顶部引入，antd自带的样式才会生效 ：

antd/dist/antd.css。

~~~~~~~然后button就有样式了~~~~~

4. 在对应组件引入ant design import { Button } from 'antd'; （以button为例子）这属于按需引入，需要哪个种组件引入哪个组件

5. 对应组件html中写代码 <Button type="primary">Primary</Button>

1src--test--t.js
2
3import React from 'react'
4import { Button } from 'antd';
5class T extends React.Component{
6    render() {
7        return (
8          <div>
9          <Button type="primary">Primary</Button>
10          <Button>Default</Button>
11          <Button type="dashed">Dashed</Button>
12          <Button type="danger">Danger</Button>
13          <Button type="link">Link</Button>
14          </div>
15        )
16      }
17}
18export default T;
19
20app.js
21
22import React from 'react';
23import './App.css';
24import T from './test/t.js'
25
26function App() {
27  return(
28    <T></T>
29  );
30}
31
32export default App;

效果图

补充：在当前组件中使用antd提供的组件时，当前组件名不能和引入的组件名相同（重名）

emmm 像这样引入button组件时，给当前组件命名为 class Button extends React.Component 会报错

Ant design在vue，react的引入

文章地址: https://www.cnblogs.com/sandraryan/

引入

安装ant design项目

vue中安装ant design

react中安装ant design

评论区

相关推荐

Ant design在vue，react的引入

文章地址: https://www.cnblogs.com/sandraryan/

引入

**安装ant design项目 **

vue中安装ant design

react中安装ant design

评论区

相关推荐

安装ant design项目