# 開始使用
重要的東西寫在前面-碼農云Admin 致力于提供給程序員**愉悅**的開發體驗。
> 碼農云是基于Ant Design Pro 開發的一套是企業級中后臺前端/設計解決方案，幫助程序猿可以更好更快的開發后臺，碼農云Admin搭配manong.cloud數據庫實現云開發，一個前端程序員就能撐起一個后臺
**本項目默認你有一定的 Vue 基礎和 Antd 使用經驗,如果你對這些還不熟悉，我們建議你先查閱相關文檔**[Vue](https://cn.vuejs.org/)、[Ant Design Vue](https://vue.ant.design/)
## 目錄結構
我們基于上述目標和提供了以下的典型模板，并據此構建了一套基于[Ant Design Pro](https://pro.loacg.com/)搭配云數據庫，構建的的中后臺管理控制臺，它可以幫助你快速搭建企業級中后臺產品原型。
~~~
- Dashboard
- 分析頁
- 監控頁
- 工作臺
- 表單頁
- 基礎表單頁
- 分步表單頁
- 高級表單頁
- 列表頁
- 查詢表格
- 標準列表
- 卡片列表
- 搜索列表（項目/應用/文章）
- 詳情頁
- 基礎詳情頁
- 高級詳情頁
- 結果
- 成功頁
- 失敗頁
- 異常
- 403 無權限
- 404 找不到
- 500 服務器出錯
- 個人頁
- 個人中心
- 個人設置
- 帳戶
- 登錄
- 注冊
- 注冊成功
~~~
## 前序準備
你的本地環境需要安裝[node](http://nodejs.org/)和[git](https://git-scm.com/)。我們的技術棧基于[ES2015+](http://es6.ruanyifeng.com/)、[Vue.Js](https://vuejs.org/)、[Vuex](https://vuex.vuejs.org/)、[Vue-Router](https://router.vuejs.org/)、[g2](https://antv.alipay.com/zh-cn/g2/3.x/index.html)和[antd-vue](https://vue.ant.design/docs/vue/introduce-cn/)，提前了解和學習這些知識會非常有幫助。
## 安裝
從 GitHub 倉庫中直接安裝最新的腳手架代碼。
~~~bash
$ git clone --depth=1 https://github.com/sendya/ant-design-pro-vue.git my-project
$ cd my-project
~~~
## 目錄結構
我們已經為你生成了一個完整的開發框架，提供了涵蓋中后臺開發的各類功能和坑位，下面是整個項目的目錄結構。
~~~bash
├── public
│ └── logo.png # LOGO
| └── index.html # Vue 入口模板
├── src
│ ├── api # Api ajax 等
│ ├── assets # 本地靜態資源
│ ├── config # 項目基礎配置，包含路由，全局設置
│ ├── components # 業務通用組件
│ ├── core # 項目引導, 全局配置初始化，依賴包引入等
│ ├── router # Vue-Router
│ ├── store # Vuex
│ ├── utils # 工具庫
│ ├── locales # 國際化資源
│ ├── views # 業務頁面入口和常用模板
│ ├── App.vue # Vue 模板入口
│ └── main.js # Vue 入口 JS
│ └── permission.js # 路由守衛(路由權限控制)
├── tests # 測試工具
├── README.md
└── package.json
~~~
## 本地開發
安裝依賴。
~~~bash
$ yarn install
~~~
> 如果網絡狀況不佳，可以使用[cnpm](https://cnpmjs.org/)進行加速，并使用`cnpm`代替`yarn`
> 或者設置 yarn 的 npm 加載源，如`yarn config set registry https://registry.npm.taobao.org`
~~~bash
$ yarn run serve
~~~
啟動完成后會自動打開瀏覽器訪問[http://localhost:8000](http://localhost:8080/)，你看到下面的頁面就代表成功了。
接下來你可以修改代碼進行業務開發了，我們內建了典型業務模板、常用業務組件、全局路由等等各種實用的功能輔助開發，你可以繼續閱讀和探索左側的其他文檔。
