1. Introduction

Github： github.com/coreui/core…

• 安裝依賴

  npm install

• 啟動

  npm start

• 修改port，package.json

  "start": "set PORT=3002 && react-scripts start",

2.Develop Custom Page

2.1 Create Custom Page

• 在View目錄創建Demo Floder

• 在Demo Folder下創建.js file，可以從其他目錄複製文件過來，記得修改const和export

• 配置router.js

• 配置_nav.js

router.js

//Demo
const Demo01 = React.lazy(() => import('./views/demo/Demo01'))
const Demo02 = React.lazy(() => import('./views/demo/Demo02'))


const routes = [

  { path: '/widgets', name: 'Widgets', element: Widgets },

  { path: '/demo/demo01', name: 'Demo01', element: Demo01 },

  { path: '/demo/demo02', name: 'Demo02', element: Demo02 },

]

_nav.hs

const _nav = [
  {
    component: CNavItem,
    name: 'Dashboard',
    to: '/dashboard',
    icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
    badge: {
      color: 'info',
      text: 'NEW',
    },
  },
  {
    component: CNavTitle,
    name: 'Nolan',
  },
  {
    component: CNavGroup,
    name: 'Demo',
    to: '/demo',
    icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
    items: [
      {
        component: CNavItem,
        name: 'Demo01',
        to: '/demo/demo01',
      },
      {
        component: CNavItem,
        name: 'Demo02',
        to: '/demo/demo02',
      },
    ],
  },
  {
    component: CNavTitle,
    name: 'Theme',
  }
]

2.2 Icon

直接用名字導進來，就可以用了

import {
  cilBell,
  cilCalculator,
  cilChartPie,
  cilCursor,
  cilDescription,
  cilDrop,
  cilNotes,
  cilPencil,
  cilPuzzle,
  cilSpeedometer,
  cilStar,
  cilShieldAlt,
} from '@coreui/icons'

icon: <CIcon icon={cilShieldAlt} customClassName="nav-icon" />,

2.3 Error

第一步：

打开vscode设置，或者直接快捷键 Ctrl +, 在搜索栏输入 prettier，然后找到 End Of Line 这个选项设置为 auto

第二步：

.prettierrc.js添加配置endOfLine：auto

module.exports = {
  semi: false,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  endOfLine: "auto"
};

第三步：

针对git全局配置做了处理，之后的仓库拉取就不会出现类似问题

git config --global core.autocrlf false

第四步：

修改.eslintrc.js,"prettier/prettier": 'off'

rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
    "linebreak-style": [0 ,"error", "windows"],
    "prettier/prettier": 'off',
  },