Ant Design 框架

一、环境搭建

前提：已经安装好了nodejs

下载地址：Download | Node.js

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

由于新版的nodejs已经集成了npm，所以安装nodejs时，npm也一并安装好了。可以通过输入 "npm -v"（查看npm版本） 来测试是否成功安装。

如果你安装的是旧版本的 npm，可以通过 "npm install npm -g" 命令来升级。

参考链接：Ant Design Vue

1.新建目录

用于存放ant项目，项目路径：D:\Users\01397470\Ant

2. 安装脚手架工具

D:\Users\01397470\Ant> npm install -g @vue/cli

3.创建vue项目

D:\Users\01397470\Ant> vue create antd-demo

此过程较慢，耐心等待吧~

4.启动项目

$ npm run serve

5.测试

在浏览器中输入： http://localhost:8080/   即可访问vue主页

二、Ant组件的使用

在ant官网中随意找个组件，将代码复制到新建的vue文件中，我这里只是测试下官网中的组件如何使用而已。

举个例子：比如我想使用ant官网中的table组件；官网地址：Ant Design Vue

1.安装ant

在vscode中打开刚新建好的ant项目，并在终端中执行：

$ npm i --save ant-design-vue

5.导入ant

在 src/main.js 中：

// 导入ant
import Antd from 'ant-design-vue';
// 导入ant样式
import 'ant-design-vue/dist/antd.css';
// 使用ant
Vue.use(Antd);

3.新建vue文件

在src/components目录下新建AntTable.vue文件，代码直接复制官网上的即可

4.使用组件

三部曲：导入组件 ---> 注册组件 ---> 使用组件

在src/App.vue文件中：

<template>
  <div id="app">

    <!-- 3.使用组件 -->
    <AntTable/>

  </div>
</template>


<script>

// 1.导入组件
import AntTable from './components/AntTable'

export default {
  name: 'App',
  components: {
    // 2.注册组件
    AntTable

  }
}
</script>

5.启动项目

$ npm run serve

6.测试

 在浏览器中输入： http://localhost:8080/