vue2_引入Ant design vue

ant design vue

• • 前言
  • • vue2引入ant
    • main.js文件
    • 入口
    • vue组件的引入
    • vue各个组件的显示
  • 结束

前言

大家好，我是yma16，本文分享vue2中引入ant design vue
初始化vue2项目
要初始化Vue2项目，请按照以下步骤：

1. 确保您已经安装了Node.js和npm。
2. 打开终端并导航到要创建项目的目录。
3. 运行以下命令来初始化项目：

npm init

在初始化期间，您将被要求提供项目名称、版本号、描述等信息。您可以使用默认设置或根据需要进行更改。

4. 运行以下命令来安装Vue和Vue CLI：

npm install vue vue-cli -g

5. 使用Vue CLI创建Vue项目：

vue init webpack <project-name>

这将在当前目录下创建一个名为的新项目。

6. 进入新创建的项目目录并安装依赖项：

cd <project-name>
npm install

7. 运行以下命令来启动本地开发服务器：

npm run dev

vue2引入ant

首先需要安装 ant-design-vue，可以通过以下命令进行安装：

npm install ant-design-vue --save

或者

yarn add ant-design-vue

安装完成后，需要在 main.js 中引入并使用组件库：

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

Vue.use(Antd);

注意：'ant-design-vue/dist/antd.css' 用于引入 ant design 的样式文件，如果你的项目中已经有 ant design 的样式文件，可以不引入该文件。

之后，就可以在项目中使用 ant design 的组件了，例如：

<template>
  <a-button type="primary">Primary Button</a-button>
</template>

以上代码将会渲染一个 Primary Button 的 ant design 按钮。

当然，如果你只想在单个组件中引入 ant design，可以在该组件中单独引入并使用组件库。例如：

<template>
  <div>
    <a-button type="default">Default Button</a-button>
  </div>
</template>

<script>
import { Button } from 'ant-design-vue';

export default {
  components: {
    'a-button': Button
  }
}
</script>

以上代码同样可以渲染一个 Default Button 的 ant design 按钮。

main.js文件

渲染的vue
截图如下：

入口

src/app.vue
截图如下：

vue组件的引入

代码配置如下：

<script>
import HelloWorld from './components/HelloWorld.vue'//vue的路径

export default {
  name: 'App',
  components: {//vue的组件导入
    HelloWorld
  }
}

</script>

代码截图：

vue各个组件的显示

在components下创建vue文件，在app.vue中的将这个组件添加，即可在主页上渲染
代码截图：

结束

本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！