一、环境搭建
前提:已经安装好了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/