How to use antd in uniapp

With the continuous development of front-end technology, various excellent UI component libraries emerge in endlessly, and antd is one of them. antd is an open source UI component library based on React. It has features such as ease of use, aesthetics, and customizability, and has been widely used.

Uniapp is a cross-platform application framework based on Vue.js. It can develop multiple platforms (such as WeChat mini programs, H5, App) at the same time, and has the advantages of cross-platform and efficient development. So, how to use antd in uniapp? This article will introduce it to you in detail.

1. Create the uniapp project

First, we need to create a uniapp project locally. If you have already used uniapp, you can skip this step directly.

Execute the following command in the command line:

# 全局安装cli
npm install -g @vue/cli

# 创建uniapp项目
vue create -p dcloudio/uni-preset-vue my-project

# 进入项目目录
cd my-project

# 运行项目（微信小程序）
npm run dev:mp-weixin

Among the above commands, the first command is to install the global Vue CLI, and the second command is to create it using uni-preset-vue preset For a uniapp project named my-project, the third command is to enter the project directory, and the last command is to run the project.

If you want to run the project on other platforms (such as H5 or App), you can replace mp-weixin in the run command with h5 or app-plus.

2. Install antd

After creating the uniapp project, we need to install the required npm package in order to use antd.

Execute the following command in the command line:

npm install ant-design-vue --save

This command will download all resource files of antd and save them to the node_modules directory of the project.

3. Register antd component

After installing antd, we need to register the component in uniapp to use it.

Add the following code in the App.vue file:

<template>
  <div>
    <!-- 添加antd样式 -->
    <a-config-provider :locale="locale">
      <a-layout style="min-height: 100vh">
        <a-layout-content style="margin: 16px">
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-config-provider>
  </div>
</template>

<script>
import { ConfigProvider, Layout } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

export default {
  components: {
    'a-config-provider': ConfigProvider,
    'a-layout': Layout,
  },
  data() {
    return {
      // 设置antd语言为中文
      locale: 'zh-CN',
    };
  },
};
</script>

In the above code, we first introduced ConfigProvider and LayoutTwo components. At the same time, in the <template> tag, we added a a-config-provider tag, which is the configuration component of antd and is used to set antd language, theme, etc. In <script>, we registered the two components ConfigProvider and Layout to App.vue so that they can used throughout the application.

At the same time, we also need to globally register the antd component in the main.js file for use in the Vue component. Add the following code to the main.js file:

import Vue from 'vue';
import { Button, DatePicker } from 'ant-design-vue';
import App from './App';
import router from './router';
import store from './store';
import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false;

// 注册antd组件
Vue.use(Button);
Vue.use(DatePicker);

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

In the above code, we first introduced the Button and DatePicker components, and then These two components are globally registered in the Vue instance using the Vue.use function so that they can be used directly in the Vue component.

4. Use the antd component

After registering the antd component, we can use the antd component in the Vue component. The following is a simple example:

<template>
  <div>
    <a-button type="primary" @click="showModal">打开对话框</a-button>
    <a-modal v-model="visible" title="对话框标题">
      <p>对话框内容</p>
    </a-modal>
  </div>
</template>
<script>
import { Button, Modal } from 'ant-design-vue';
export default {
  components: {
    'a-button': Button,
    'a-modal': Modal,
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
  },
};
</script>

In the above code, we use antd's Button and Modal components in the Vue component. Among them, the <a-button> label is the label we customized in the Vue component, representing the Button component of antd; <a-modal>## The # tag represents the Modal component of antd. In this way, we can use the antd component directly in the Vue component.

In summary, these are the detailed steps for using antd in uniapp. Through the above steps, we can happily enjoy the antd component library in the uniapp project and improve the UI beauty and user experience of the application.

The above is the detailed content of How to use antd in uniapp. For more information, please follow other related articles on the PHP Chinese website!