SlugTeam

# 快速上手

# npm

# 安装

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

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

npm install --save-dev @tencent/slug-moment
1

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

import Vue from 'vue'
import SlugUI from '@tencent/slug-ui'
import SlugMoment from '@tencent/slug-moment'

Vue.use(SlugUI)
Vue.use(SlugMoment)
1
2
3
4
5
6

注意

在使用 Slug Moment 之前，你必须自行引入 全部依赖，如 Vue

# 使用

目录结构

test
  |- app.vue
  |- index.html
  |- index.js
1
2
3
4

index.html

<!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 Moment</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

index.js

import Vue from 'vue'
import SlugUI from '@tencent/slug-ui'
import SlugMoment from '@tencent/slug-moment'
import App from './app.vue'

Vue.use(SlugUI)
Vue.use(SlugMoment)

window.vm = new Vue({
  el: '#root',
  render: (h) => h(App),
})
1
2
3
4
5
6
7
8
9
10
11
12

# script 标签

# 安装

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

<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/slug-ui/v0.16/slug-ui.min.js"></script>
<script src="https://tiem-cdn.qq.com/slugteam/slug-moment/v1.0/slug-moment.min.js"></script>
1
2
3
4

# 使用

<!DOCTYPE html>
<html>
  <!-- ... -->
  <body>
    <!-- ... -->
    <div class="app--slug-moment">
      <smm-list></smm-list>
      <smm-add
        icon="//tiem-cdn.qq.com/sy/zhuoyao/ingame/images/submit.png"
      ></smm-add>
    </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/slug-ui/v0.16/slug-ui.min.js"></script>
    <script src="https://tiem-cdn.qq.com/slugteam/slug-moment/v1.0/slug-moment.min.js"></script>
    <script>
      SlugMoment.config.game = 'zhuoyao'
      SlugMoment.config.login = {
        type: 'msdk',
        msdk:
          '?areaid=2&partition=0&platid=1&roleid=40520350780&lng=113.944851&lat=22.547944&&algorithm=v2&version=3.2.15a&timestamp=1558942250&appid=1105641716&openid=1C9E33B63EA786FDBBA0C9019B502A5B&sig=b7929e18e8bc25f833117ef95d762ceb&encode=2&msdkEncodeParam=6C7E762EC968DAB72352F3C5DEFCD1976EECFE064DEEC644920EEC8490A7C90F8B8088B5D58370DA5CE45D4C0ACC75C78BF4194C124542773343F3F292EE682C3AA137C9A612C2DF0AEE58EA66F123A62166C85235537CAA5580D57999F86C41384B8F1DD627EA76619A2F4D5DF975F0199A2D81008AA85944F22D5698AACD855B140E52AA815F1FB7EB3CA431CF768ED26407AF4D7891E7FA8F47FBA6FB6F96BDE3B392115F4F605E9EBC2C7B41240F',
      }
      new Vue({
        el: '.app--slug-moment',
      })
    </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
24
25
26
27
28

← 全局配置 →