1. 程式人生 > >react搭建後臺管理系統(一)

react搭建後臺管理系統(一)

管理系 for menu port 文件中 segment 後臺管理 ans create

先準備工具:
  yarn安裝:
    npm install -g yarn #yarn也是包管理工具,只不過它構建效率更高
    官方使用教程:https://yarnpkg.com/lang/zh-hans/docs/cli/
安裝Semantic組件庫,react-semantic官方地址:https://react.semantic-ui.com/collections/message:
yarn add semantic-ui-react
yarn add semantic-ui-css
create-react-app semantic-demo
yarn start #初始demo,如果該組件庫不滿足需求可以安裝antd組件庫
使用semantic組件庫:
在使用之前我們先檢查下項目中node_module模塊是否有semantic-ui-react和semantic-ui-css組件
在index.js中引入組件:
import { Button,Form,Checkbox,Menu,Segment} from ‘semantic-ui-react‘
之後再相應的css文件中引入組件的css樣式文件:
import ‘semantic-ui-css/semantic.min.css‘;
如果需要引入外部的css:
require(‘./menuCus.css‘) #在相應的標簽中就能調用

react搭建後臺管理系統(一)