SlugTeam

# 安装

# npm

在单页（大型）应用中使用 Slug Antd，我们推荐使用 npm 安装，npm 能很好地和 webpack 等模块打包器配合使用。

使用 npm 或 tnpm 命令进行安装：

# React

npm install --save-dev @tencent/slug-antd-react
1
import 'antd/dist/antd.css'
import React from 'react'
import ReactDOM from 'react-dom'
import { Layout } from 'antd'
import { SadHeader } from '@tencent/slug-antd-react'
1
2
3
4
5

注意

在使用 Slug Antd 之前，你必须自行引入 全部依赖，如 Ant Design React 以及它的样式文件

# Vue

npm install --save-dev @tencent/slug-antd-vue
1

Slug Antd 作为一个 Vue 插件，在模块化的打包系统中，必须显式地通过 Vue.use() 来安装：

import 'ant-design-vue/dist/antd.css'
import Vue from 'vue'
import Antd from 'ant-design-vue'
import SlugAntd from '@tencent/slug-antd-vue'

Vue.use(Antd)
Vue.use(SlugAntd)
1
2
3
4
5
6
7

注意

在使用 Slug Antd 之前，你必须自行引入 全部依赖，如 Ant Design Vue 以及它的样式文件

# script

在浏览器中使用 script 标签直接引入文件，并使用全局变量 SlugAntd

# React

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>Slug Antd</title>
    <link
      rel="stylesheet"
      href="https://tiem-cdn.qq.com/slugteam/libraries/antd/v4/antd.min.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://tiem-cdn.qq.com/slugteam/libraries/axios/v0/axios.min.js"></script>
    <script src="https://tiem-cdn.qq.com/slugteam/libraries/react/v16/react.production.min.js"></script>
    <script src="https://tiem-cdn.qq.com/slugteam/libraries/react/v16/react-dom.production.min.js"></script>
    <script src="https://tiem-cdn.qq.com/slugteam/libraries/antd/v4/antd.min.js"></script>
    <script src="https://tiem-cdn.qq.com/slugteam/components/antd/v0/react/index.min.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const { Layout, Menu } = antd
const { SadHeader, SadNav, SadProduct } = SlugAntd

ReactDOM.render(
  <Layout className='slug-antd'>
    <SadHeader
      className='header'
      isNeedIndex
      logo={
        <a className='home' href='/'>
          <div className='logo'></div>
          <h1>互娱营销云</h1>
        </a>
      }>
      <Menu className='menu' theme='dark' mode='horizontal'>
        <Menu.Item>
          <a target='_blank' href='https://moss.oa.com/docs/'>
            使用手册
          </a>
        </Menu.Item>
      </Menu>
    </SadHeader>
  </Layout>,
  document.getElementById('root')
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

注意

在使用 Slug Antd 之前，你必须自行引入 全部依赖，如 Ant Design React 以及它的样式文件

# Vue

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>Slug Antd</title>
    <link
      rel="stylesheet"
      href="https://tiem-cdn.qq.com/slugteam/libraries/antdv/v1/antd.min.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://tiem-cdn.qq.com/slugteam/libraries/axios/v0/axios.min.js"></script>
    <script src="https://tiem-cdn.qq.com/slugteam/libraries/vue/v2/vue.min.js"></script>
    <script src="https://tiem-cdn.qq.com/slugteam/libraries/moment/v2/moment.min.js"></script>
    <script src="https://tiem-cdn.qq.com/slugteam/libraries/antdv/v1/antd.min.js"></script>
    <script src="https://tiem-cdn.qq.com/slugteam/components/antd/v0/vue/index.min.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <a-layout class="slug-antd">
    <sad-header class="header" isNeedIndex>
      <template #logo>
        <a class="home" href="/">
          <div class="logo"></div>
          <h1>互娱营销云</h1>
        </a>
      </template>
      <a-menu class="menu" theme="dark" mode="horizontal">
        <a-menu-item key="使用手册">
          <a target="_blank" href="https://moss.oa.com/docs/">使用手册</a>
        </a-menu-item>
      </a-menu>
    </sad-header>
  </a-layout>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意

在使用 Slug Antd 之前，你必须自行引入 全部依赖，如 Ant Design Vue 以及它的样式文件

← 使用 →