1.項(xiàng)目創(chuàng)建
確保你的機(jī)器中有Node.js和Git環(huán)境，如果沒(méi)有，參考如下文章：
Node.js安裝及環(huán)境配置
Git安裝配置教程
開始開發(fā)之前，請(qǐng)確認(rèn)本地環(huán)境中安裝好了 node， git 和 arco cli
其中 arco cli 是安裝項(xiàng)目模版的工具，請(qǐng)運(yùn)行以下命令安裝：
npm i -g arco-cli
在某一個(gè)文件夾下運(yùn)行Shell，運(yùn)行如下命令新建項(xiàng)目：
arco init klza(這個(gè)是你的項(xiàng)目名字)
選擇技術(shù)棧：
? 請(qǐng)選擇你希望使用的技術(shù)棧
React
? Vue
選擇 arco-design-pro 分類：
? 請(qǐng)選擇一個(gè)分類
業(yè)務(wù)組件
組件庫(kù)
Lerna Menorepo 項(xiàng)目
? Arco Pro 項(xiàng)目
等待安裝依賴。。。
看到以下輸出就是創(chuàng)建成功了
2.項(xiàng)目運(yùn)行
進(jìn)入到項(xiàng)目中，運(yùn)行代碼：
cd klza
npm run dev
訪問(wèn)地址，運(yùn)行成功！
可以看到，完整的模板是一個(gè)中臺(tái)管理系統(tǒng)樣例：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-643477.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-643477.html
3.目錄結(jié)構(gòu)
├── README.md
├── package.json
├── index.html
├── src
│ ├── api # 請(qǐng)求接口
│ ├── assets # 靜態(tài)資源
│ └── style 全局樣式
│ ├── components # 通用業(yè)務(wù)組件
│ ├── config # 全局配置(包含echarts主題)
│ └── settings.json # 配置文件
│ ├── directives # 指令集（如需，可自行補(bǔ)充）
│ ├── filters # 過(guò)濾器（如需，可自行補(bǔ)充）
│ ├── hooks # 全局hooks
│ ├── layout # 布局
│ ├── locale # 國(guó)際化語(yǔ)言包
│ ├── mock # 模擬數(shù)據(jù)
│ ├── views # 頁(yè)面模板
│ ├── router # 路由配置
│ ├── store # 狀態(tài)管理中心
│ ├── types # Typescript 類型
│ └── utils # 工具庫(kù)
│ └── App.vue # 視圖入口
│ └── main.ts # 入口文件
└── tsconfig.json
到了這里，關(guān)于一文帶你入門Arco Design，快速構(gòu)建一個(gè)Arco項(xiàng)目Demo的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
