快速开始

在开始之前，推荐先学习 Vue 和 ES2015，并正确安装和配置了Vue CLI 3.X 和 Node.js v8.9 或以上。此文档假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 Vue 的正确开发方式。

一、创建一个项目

运行以下命令来创建一个新项目：

$ vue create ofa-demo

然后根据提示做项目配置，如需了解更多，可查看官方教程。

若安装缓慢或报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。

二、安装项目包

使用组件库

1. 安装 ant-design-vue

$ npm i --save ant-design-vue
# OR
$ yarn add ant-design-vue

2. 引入 ant-design-vue 方式

在项目（ofa-demo）目录src下的main.js文件

方式一：完整引入组件：
import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

以上代码便完成了 Antd 的引入。需要注意的是，样式文件需要单独引入。

方式二：局部导入组件：
import Vue from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';

Vue.config.productionTip = false;

/* v1.1.2 */
Vue.component(Button.name, Button);
Vue.component(Button.Group.name, Button.Group);

/* v1.1.3+ 自动注册Button下组件，如Button.Group */
Vue.use(Button);

Vue.prototype.$message = message;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});
方式三（推荐）：按需加载组件：

如果你在开发环境的控制台看到下面的提示，那么你可能使用了 import { Button } from 'ant-design-vue'; 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

提示

可以通过以下的写法来按需加载组件。

import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件

如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载，加入这个插件后。你可以仍然这么写：

import { Button } from 'ant-design-vue';

插件会帮你转换成 ant-design-vue/lib/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。

组件列表：

完整组件列表

注意，babel-plugin-import 的 style 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 import 'ant-design-vue/dist/antd.css 手动引入，并覆盖全局样式。

其他包安装

参考 package.json

{
  "name": "tcc-ofa-common",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@antv/data-set": "^0.10.2",
    "@tinymce/tinymce-vue": "^3.0.1",
    "animate.css": "^3.7.2",
    "ant-design-vue": "^1.4.3",
    "axios": "^0.19.0",
    "clipboard": "^2.0.4",
    "codemirror": "^5.49.0",
    "core-js": "^2.6.5",
    "crypto-js": "^3.1.9-1",
    "enquire.js": "^2.1.6",
    "js-cookie": "^2.2.1",
    "lodash.get": "^4.4.2",
    "lodash.pick": "^4.4.0",
    "md5": "^2.2.1",
    "moment": "^2.24.0",
    "nprogress": "^0.2.0",
    "qr-code-with-logo": "^1.1.0",
    "slide-verify": "^0.5.1",
    "vue": "^2.6.10",
    "vue-ls": "^3.2.1",
    "vue-router": "^3.0.3",
    "vuedraggable": "^2.23.2",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-plugin-eslint": "^3.12.0",
    "@vue/cli-plugin-unit-mocha": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.1",
    "babel-plugin-import": "^1.12.2",
    "chai": "^4.1.2",
    "compression-webpack-plugin": "^3.0.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mockjs": "^1.0.1-beta3",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}

配置主题和字体

兼容性

支持所有的现代浏览器和 IE9+。

对于 IE 系列浏览器，需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。

如果你使用了 babel，强烈推荐使用 babel-polyfill 和 babel-plugin-transform-runtime 来替代以上两个 shim。

安装
组件库