![yma16-logo](https://i-blog.csdnimg.cn/blog_migrate/3c822665b8199f151b94601d552d1d31.gif#pic_center)
前言
大家好,我是yma16,本文分享vue2中引入ant design vue
初始化vue2项目
要初始化Vue2项目,请按照以下步骤:
-
确保您已经安装了Node.js和npm。
-
打开终端并导航到要创建项目的目录。
-
运行以下命令来初始化项目:
npm init
在初始化期间,您将被要求提供项目名称、版本号、描述等信息。您可以使用默认设置或根据需要进行更改。
- 运行以下命令来安装Vue和Vue CLI:
npm install vue vue-cli -g
- 使用Vue CLI创建Vue项目:
vue init webpack <project-name>
这将在当前目录下创建一个名为的新项目。
- 进入新创建的项目目录并安装依赖项:
cd <project-name>
npm install
- 运行以下命令来启动本地开发服务器:
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中的将这个组件添加,即可在主页上渲染
代码截图:
结束
本文分享到这结束,如有错误或者不足之处欢迎指出,感谢大家的阅读!