Ant Design Pro入門教程 安裝框架
介紹一下Ant Design Pro,說白了就是基於React的一套腳手架,UI是 Ant Design ,框架是 Ant Design Pro
腳手架安裝完成,執行起來的樣子:
下面我們來看看怎麼安裝這套後臺管理系統
安裝
有兩種方式進行安裝:
直接 clone git 倉庫#
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project
$ npm install ant-design-pro-cli -g
$ mkdir my-project && cd my-project
$ pro new # 安裝腳手架
安裝完以上的其中一步以後:
本地開發#
安裝依賴。
$ npm install
如果網路狀況不佳,可以使用 cnpm 進行加速。
$ npm start
注意:
1.如果使用git 需要提前下載 安裝 git
2.如果使用npm 需要提前下載 Node.JS
上述兩個網站 進入 找對應版本,不做多餘贅述。
相關推薦
Ant Design Pro入門教程 安裝框架
介紹一下Ant Design Pro,說白了就是基於React的一套腳手架,UI是 Ant Design ,框架是 Ant Design Pro 腳手架安裝完成,執行起來的樣子: 下面我們來看看怎麼安裝這套後臺管理系統 安裝 有兩種方式進行安裝
004-ant design pro安裝、目錄結構、項目加載啟動
assets ocs win 領域 org 參考 des 布局 class 一、概述 1.1、腳手架概念 編程領域中的“腳手架(Scaffolding)”指的是能夠快速搭建項目“骨架”的一類工具。例如大多數的React
關於ant design pro框架找js頁面的問題
ant design pro 怎樣找對應的js頁面 相信第一次用ant design pro的朋友可能會對裡面的對應頁面關係給搞混,因為它不像h5裡連線是可以看到的, 下面就為大家分享下它的對應的js頁面是在哪。 程式碼在src目錄下,在locales資料夾下可以看到裡面有好幾個資料
Ant Design Pro快速入門
在上一篇文章中,我們介紹瞭如何構建一個Ant Design Pro的環境。 同時講解了如何啟動服務並檢視前端頁面功能。 在本文中,我們將簡單講解如何在Ant Design Pro框架下實現自己的業務功能。 目錄結構淺談 首先,我們來簡單瞭解一下整個專案的目錄結構及其中
CMS管理後臺入門指南-(Ant-Design-Pro-v2-0)
目標:實現一個基礎模組 基礎模組 基礎模組的定義 基礎模組(瞭解一個基礎模組包含哪些基本功能,包括基本功能的展示方式等) 基礎模組中前置知識準備 各功能元件介紹(瞭解各個模組使用到的元件以及元件的在使用過程中的注意事項) 查詢操作的基本元件 Fo
基本業務操作的相關組件渲染---基於Ant-Design-Pro-2-0-的CMS管理後臺入門系列
oda 基因 mage github 數據分析 釘釘 money nsh .com 查詢操作實現效果 拉取項目 luwei.web.study-ant-design-pro, 切換至 query 分支,可看到查詢操作實現效果 如圖所示 image 深入學習和了解組件:
創建頁面---基於Ant-Design-Pro-2-0-的CMS管理後臺入門系列
啟動項 表情 在一起 項目 cms 系列 .com att git 拉取項目 luwei.web.study-ant-design-pro, 切換至 page 分支,可看到創建頁面的效果 啟動項目 前置:安裝完依賴包,若未安裝,請移步 安裝項目依賴包 運行命令啟動項
react ant design pro 安裝
$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1 $ cd ant-design-pro $ npm install $ npm start # 訪問 http://localhost:8000
極客react之Ant Design Pro系列快速入門(七)-- 使用新的佈局
定義一個新的佈局 loayout資料夾定義佈局的js檔案和less樣式檔案 /common/router.js中定義使用新佈局的路徑 '/data': { component: dynamicWrapper(app, [], () => import('..
極客react之Ant Design Pro系列快速入門(八)-- 使用echarts
使用echarts 安裝echarts和react的echarts模組 npm install --save echarts 匯入echarts // 引入 ECharts 主模組 import echarts from 'echarts/lib/echa
以ant design pro示例框架為基礎的前端開發小結
如上圖,為ant design pro基本機構,最外層還有一個重要檔案.roadhogrc.mock.js。在該框架中,執行的基本邏輯如下:先搭建路由,src/common下有menu和router兩個檔案,先在menu裡寫入預備在slider裡邊展示的路徑,然後在route
ant-design-pro 從入門到使用
1、學習經歷 用了兩週的時間學習nodejs,nodejs是一個指令碼語言,有過js基礎,所以上手很簡單。首先看nodejs開發文件,基本的語法自己也都實現了一遍。然後,第二週用websocket 和串列埠通訊,實現了點選螢幕監控訊號燈的功能。第三週開始看a
002-ant design pro 布局
篩選 html imp 我們 mas app 路由 http span 一、概述 參看地址:https://pro.ant.design/docs/layout-cn 其實在上述地址ant-design上已經有詳細介紹,本文知識簡述概要。 頁面整體布局是一
003-ant design pro 路由和菜單
部分 doc angle line board 面包屑 腳手架 封裝 ebp 一、概述 參看地址:https://pro.ant.design/docs/router-and-nav-cn 二、原文摘要 路由和菜單是組織起一個應用的關鍵骨架,我們的腳手架提供了
006-ant design pro 樣式
module text patch 導致 multipl 應該 back wid round 一、概述 參看地址:https://pro.ant.design/docs/style-cn 基礎的 CSS 知識或查閱屬性,可以參考 MDN文檔。 二、詳細介紹
010-ant design pro advanced 圖表
mage water 分享 rtc 分享圖片 cit nod 繪制 wave 一、概述 原文地址:https://pro.ant.design/docs/graph-cn Ant Design Pro 提供了由設計師精心設計抽象的圖表類型,是在 BizCharts 圖表
013-ant design pro advanced 錯誤處理
title 相關 amp desc mar esp 封裝 tle resp 一、概述 原文地址:https://pro.ant.design/docs/error-cn 二、詳細 2.1、頁面級報錯 2.1.1、應用場景 路由直接引導到報錯頁面,比如你輸入
ant-design-pro 之 Login 組件
con user 密碼 驗證 調用 pass des login asc 1.引入 // 引入 ant-design-pro import Login from ‘ant-design-pro/lib/Login‘; /** * UserName 賬號 * Passw
ant design pro開發碰到的跨域問題
跨域問題 為了讓admin管理系統適應手機版,決定對首頁及各個功能頁進行升級。以前用admin antd design作為腳手架進行開發發現對手機版支援不好。這次用ant design的pro版進行開發,從新搭建前端開發框架。 之前框架用axios作為請求網路的基礎元件,碰到了一些跨域問題,在我的另一篇裡
ROS入門教程-安裝並配置ROS環境(Kinetic 版本)
**安裝並配置ROS環境(Kinetic 版本) ** 說明 本教程詳細描述了ROS的安裝與環境配置。 此為 Ubuntu16.04 + Kinetic安裝說明 官方安裝ROS說明 http://wiki.ros.org/Installation/Ubuntu?