# 快速上手
碼農云Admin 致力于提供給程序員**愉悅**的開發體驗。
> 在開始之前，推薦先學習 [Vue](https://cn.vuejs.org/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正確安裝和配置了 [Node.js](https://nodejs.org/) v8.9 或以上。官方指南假設你已了解關于 HTML、CSS 和 JavaScript 的中級知識，并且已經完全掌握了 Vue 的正確開發方式。如果你剛開始學習前端或者 Vue，將 UI 框架作為你的第一步可能不是最好的主意。
## 在線演示
最簡單的使用方式瀏覽碼農云官網，整個碼農云都是基于碼農云Admin進行開發打造
- [](https://www.manong.cloud)
### 碼農云Admin是基于Ant Design Pro UI打造
默認已經安裝了ant-design-vue
### 關于ant-design-vue 引入以及使用
具體的操作可以參考[Ant Design Of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 官方文檔
**完整引入**
```jsx
import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
import cloud from 'cloud-vue'
Vue.prototype.$cloud = cloud.connect({
AppID: "<AppID>",
AppSecret: "<AppSecret>"
});
Vue.config.productionTip = false;
Vue.use(Antd);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>',
});
```
以上代碼便完成了 Antd 的引入。需要注意的是，樣式文件需要單獨引入。
**局部導入組件**
```jsx
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/>',
});
```
> 你可以在左側菜單選用更多組件。
### 4. 組件列表
[完整組件列表](https://github.com/vueComponent/ant-design-vue/blob/master/site/components.js)
## 兼容性
Ant Design Vue 支持所有的現代瀏覽器和 IE9+。
對于 IE 系列瀏覽器，需要提供 [es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。
如果你使用了 babel，強烈推薦使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 和 [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) 來替代以上兩個 shim。
> 避免同時使用 babel 和 shim 兩種兼容方法，以規避 [#6512](https://github.com/ant-design/ant-design/issues/6512) 中所遇問題
## 按需加載
如果你在開發環境的控制臺看到下面的提示，那么你可能使用了 `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.
```
> 
可以通過以下的寫法來按需加載組件。
```jsx
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](https://github.com/ant-design/babel-plugin-import) 來進行按需加載，加入這個插件后。你可以仍然這么寫：
```jsx
import { Button } from 'ant-design-vue';
```
插件會幫你轉換成 `ant-design-vue/lib/xxx` 的寫法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 屬性可以做到模塊樣式的按需自動加載。
> 注意，babel-plugin-import 的 `style` 屬性除了引入對應組件的樣式，也會引入一些必要的全局樣式。如果你不需要它們，建議不要使用此屬性。你可以 `import 'ant-design-vue/dist/antd.css` 手動引入，并覆蓋全局樣式。
## 配置主題和字體
- [改變主題](/docs/vue/customize-theme-cn)
- [使用本地字體](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
## 小貼士
- 你可以享用 `npm` 生態圈里的所有模塊。
- 雖然 Vue 官方推薦模板編寫組件，不過對于復雜組件，[jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)未必不是一個更好的選擇。
