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都要引入~

<link href="https://cdn.bootcss.com/antd/4.0.0-alpha.6/antd.css" rel="stylesheet">
<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 里的配置

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

👆 這是官方給的模板

但是會報錯！！！！！！！！（嘔。。。）

錯誤信息： 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"位置。

這樣修改：

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

修改成：

new Vue({
  render: h => h(App),
}).$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

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <a-button type="primary">Button></a-button>
  </div>
</template>


<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    // HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';

// import Button from 'ant-design-vue/lib/button';
Vue.config.productionTip = false;

Vue.use(Antd);
// Vue.component(Button.name, Button);


/* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   components: { App },
//   template: '<App/>',
// });
// 將main.js中的代碼修改如下就可以
new Vue({
  render: h => h(App),
}).$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樣式）

import React, { Component } from 'react';
import Button from 'antd/es/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export 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>

src--test--t.js

import React from 'react'
import { Button } from 'antd';
class T extends React.Component{
    render() {
        return (
          <div>
          <Button type="primary">Primary</Button>
          <Button>Default</Button>
          <Button type="dashed">Dashed</Button>
          <Button type="danger">Danger</Button>
          <Button type="link">Link</Button>
          </div>
        )
      }
}
export default T;

app.js

import React from 'react';
import './App.css';
import T from './test/t.js'

function App() {
  return(
    <T></T>
  );
}

export default App;

效果圖

補充：在當前組件中使用antd提供的組件時， 當前組件名不能和引入的組件名相同（重名）

emmm 像這樣引入button組件時，給當前組件命名為 class Button extends React.Component 會報錯