React项目引入Arco Design,以及Arco Design Pro 架构

创建项目

创建 react-arco 项目

pnpm create vite my-vue-app --template react

安装 @arco-design/web-react

安装 react 版的 arco-design

基础使用

添加一个按钮,App.tsx

import "./App.css";
import { Button } from "@arco-design/web-react";
import "@arco-design/web-react/dist/css/arco.css";

function App() {
  return (
    <div className="App">
      <Button type="primary">hello arcoButton>
    div>
  );
}

export default App;

React项目引入Arco Design,以及Arco Design Pro 架构_第1张图片

按需加载

通过 vite 插件可以实现按需加载样式和图标。

pnpm i @arco-plugins/vite-react -D

引入,vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { vitePluginForArco } from '@arco-plugins/vite-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), vitePluginForArco()],
})

现在可以不用单独引入样式了!

// import "@arco-design/web-react/dist/css/arco.css";

Arco Design Pro 架构

Arco Design Pro 是开箱即用的中后台前端解决方案,要创建 Arco Design Pro 项目首先需要安装 Arco Cli。

Arco CLI

arco cli 是安装项目模版的工具,先运行以下命令安装之:

npm i -g arco-cli

下一步是以 Arco Design Pro 为模版创建一个新项目:

  1. 进入 packages 目录,新建项目
arco init admin
  1. 选择使用 React
? 请选择你希望使用的技术栈
❯ React
  Vue
  1. 选择 arco-design-pro
? 请选择所要创建项目的类型
  业务组件
  区块
  页面
  组件库
  Lerna Monorepo 项目
❯ Arco Pro 项目
  1. 选择开发框架 Vite
? 请选择你想要使用的开发框架 (Use arrow keys)
  Next (https://nextjs.org/)
❯ Vite (https://vitejs.dev/)
  Create React App (https://create-react-app.dev)

项目架构解析

目录结构说明

├── src
│   ├── assets                      # 静态资源
│   ├── components                  # 通用业务组件
│   ├── locale                      # 国际化语言包
│   ├── mock                        # 公共模拟数据
│   ├── pages                       # 页面模版
│   ├── store                       # redux状态管理
│   ├── style                       # 全局样式
│   ├── utils                       # 工具库
│   ├── context.tsx                 # 全局配置
│   ├── index.tsx                   # 入口文件
│   ├── layout.tsx                  # 布局页
│   ├── routes.ts                   # 路由配置
│   ├── settings.json               # 配置文件
│   ├── declaration.d.ts
│   └── vite-env.d.ts

国际化

分为全局和页面级别:

  • 全局:locale/index.ts
  • 页面:pages/xxx/locale/index.ts

mock

分为全局和页面级别:

  • 全局:mock/index.ts
  • 页面:pages/xxx/mock/index.ts

页面

pages自动注册为路由:

  • example/index.tsx -> /example
  • dashboard/workplace/index.tsx -> /dashboard/workplace

样式

基于less,分为全局和页面级:

  • 全局:style/global.less
  • 页面级:pages/style/xxx.module.less

你可能感兴趣的:(React,初学者学习前端,reactjs,前端)