element-ui、ant-design-vue使用指南
一、element-ui
1.安装webpack
npm install -g webpack
2.安装vue-cli
vue-cli是什么？
vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。
使用步骤：
npm install -g vue-cli
使用vue-cli构建项目
vue init webpack project-name //创建一个基于webpack模板的名为project-name的项目
3.目前可用的模板包括：
browserify–全功能的Browserify + vueify，包括热加载，静态检测，单元测试。
browserify-simple–一个简易的Browserify + vueify，以便于快速开始。
webpack–全功能的Webpack + vueify，包括热加载，静态检测，单元测试。
webpack-simple–一个简易的Webpack + vueify，以便于快速开始。
安装项目依赖
cd project-name //进入项目目录npm install //安装项目依赖npm run dev //运行项目
此时在浏览器打开：localhost:8080即可看到欢迎页。
关于webpack和vue-cli的更多使用方法参见官方文档。
但是这个只能在本地跑，要如何在我们自己的服务器上访问呢？此时需要执行
npm run build
搭建开发环境
本来想用vue-cli重新创建项目，试了几次总是出现各种问题，没办法成功。最后在仔细查看 Element-UI 的官方文档的 快速上手 部分的时候发现 饿了么 团队给了一个他们自己的 项目模板 。于是我就用这个模板来尝试了下，结果成功了。所以，如果你不想太折腾的话，建议还是使用官方给的项目模板，可以省很多事。
第一步：安装项目模板
克隆/下载项目模板
将下载的模板放到你项目的根目录下
安装依赖
npm install
运行项目模板
npm run dev
此时在浏览器打开：localhost:8080即可看到欢迎页。
项目模板里已经把需要配置的文件都配置好了。
第二步：安装element-ui
第一步，我们成功安装了项目模板，接下来，我们需要安装element-ui到项目下。
npm i element-ui@next -D
开始使用
接下来我们就可以参照 Element-UI 的官方文档上手开发了。
例子
我们参照官方的按钮组件使用说明，在项目模板的基础上做一个按钮的例子。其它文件不需要改动，只修改App.vue文件的内容。代码如下：
App.vue
<template><div id="app"><img src="./assets/logo.png"><h1>{{ msg }}</h1><el-button @click.native="startHacking">Let's do it</el-button><div class="block"><span class="demonstration">显示默认颜色</span><span class="wrapper"><el-button type="success">成功按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button><el-button type="info">信息按钮</el-button></span></div><br/><div class="block"><span class="demonstration">hover 显示颜色</span><span class="wrapper"><el-button :plain="true" type="success">成功按钮</el-button><el-button :plain="true" type="warning">警告按钮</el-button><el-button :plain="true" type="danger">危险按钮</el-button><el-button :plain="true" type="info">信息按钮</el-button></span></div></div></template><script>export default {data () {return {msg: 'Use Vue 2.0 Today!'}},methods: {startHacking () {this.$notify({title: 'It Works',message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',duration: 6000})}}}</script><style>body {font-family: Helvetica, sans-serif;}</style>
二、ant-design-vue 环境搭建及入门
2.1环境搭建
1.首先需搭建vue环境
2.安装环境（根据官网）
npm install -g @vue/cli （建议国内不使用npm安装，使用cnpm这样会快点）cnpm install -g @vue/cli
3.新建一个项目
切换到需要创建项目文件夹下，运行创建项目命令
vue create antd-demo
这样项目就创建成功了
4.进入项目并启动
cd antd-demo
npm run serve
ant-design-vue 快速入手及常用标签
全局配置国际化文案
1、按钮
<a-button>按钮</a-button>
2、图标
<a-icon type="step-backward" />
3、输入框
<a-input></a-input>
4、单选框
<a-radio>Radio</a-radio>
5、分页
<a-pagination v-model="current" :total="50" />
6、卡片
<a-card title="Card Title">
7、布局
<a-layout>
侧边栏
a-layout-sider
头部导航栏、菜单、菜单标签
a-layout-header、a-menu、a-menu-item
内容栏
a-layout-content
底部栏
a-layout-footer
面包屑
a-breadcrumb、a-breadcrumb-item
内容不是很完整大家多多指教！
