标签: core-ui

我正在尝试使用此处Core UI's找到的反应模板构建反应仪表板。

CSS

.top-stick {
    position: sticky !important;
    position: -webkit-sticky;
    top: 5rem;
    overflow-y: auto;
    height: calc(100vh - 5rem);
}

JSX

<div className="animated fadeIn">
  <Row className="app-scrollable-body">
    <Col xs="12" sm="4" md="3" className="top-stick">
      <Card className="toic">
        <CardBody>
          Lorem ipsum dolor sit amet
        </CardBody>
      </Card>
    </Col>
    <Col xs="12" sm="8" md="9">
      <Card>
        <CardHeader>Card title</CardHeader>
        <CardBody>
        Lorem ipsum dolor sit amet
        </CardBody>
      </Card>
    </Col>
  </Row>
  <div className="app-fixed-footer">
    <span>
      <a href="https://coreui.io">CoreUI</a> &copy; 2018
      creativeLabs.
    </span>
    <span className="ml-auto">
      Powered by{" "}
      <a href="https://coreui.io/react">CoreUI for React</a>
    </span> …

所以我正在开发一个全新的项目，使用 Vue 3 和 Volar 作为 VSCode 的扩展。我正在使用一个组件库 CoreUI。所以在我的main.ts我现在有这个代码。

import { createApp } from 'vue'
import App from './App.vue'
import CoreuiVue from '@coreui/vue'

const app = createApp(App);
app.use(CoreuiVue);

现在这意味着在任何其他 SFC 中我可以使用任何 CoreUI 组件，例如<CAlert color="primary">A simple alert!</CAlert>，而无需导入它。

它编译得很好。在编译过程中，我没有收到来自 TypeScript 或 ESLint 的关于没有正确导入组件的抱怨。因此，这些工具似乎知道这些组件现在在全球范围内可用。

然而，Volar 却不是这样，它是CAlert这样描述的：

换句话说，它无法识别CAlert也不能给我任何智能感知，比如它的属性和属性类型是什么。

我怎样才能让 Volar 明白所有 CoreUI 的组件都是全局可用的？

当我导航到仪表板时收到以下警告！！

Warning: `Reference` should not be used outside of a `Manager` component.

我将在我的 laravel 项目中安装此管理面板https://coreui.io/（免费版本）。它包含一个具有以下依赖项的 package.json 文件：

    "dependencies": {
    "@coreui/coreui": "^2.1.5",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "1.2.0",
    "@coreui/icons": "0.3.0",
    "bootstrap": "^4.2.1",
    "chart.js": "2.7.3",
    "core-js": "^2.6.1",
    "flag-icon-css": "^3.2.1",
    "font-awesome": "4.7.0",
    "jquery": "3.3.1",
    "pace-progress": "1.0.2",
    "perfect-scrollbar": "^1.4.0",
    "popper.js": "^1.14.6",
    "simple-line-icons": "2.4.1"
  },

因此，我将把这些依赖项放入我的 package.json 中并运行 npm install和npm run dev。我的项目的packaje.json是

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot …

我需要将项目从 vue 2 升级到 vue3 我正在使用 coreui 模板。其中我升级了 vue、vuex、vue-router。但是当我为该项目提供服务时，它在控制台中显示以下错误。

未捕获（承诺中）类型错误：无法读取未定义的属性“_c”

终端没有错误。我已经用 vue3 语法更新了所有 router、vuex、vue。

谢谢你的帮助

第一次，我使用免费的 coreUi React.js 管理模板。

我试图更改标题和侧边栏徽标，但我无法理解如何更改它。

文件路径： src\containers\TheSidebar.js

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  CCreateElement,
  CSidebar,
  CSidebarBrand,
  CSidebarNav,
  CSidebarNavDivider,
  CSidebarNavTitle,
  CSidebarMinimizer,
  CSidebarNavDropdown,
  CSidebarNavItem
} from "@coreui/react";

import CIcon from "@coreui/icons-react";

// sidebar nav config
import navigation from "./_nav";

const TheSidebar = () => {
  const dispatch = useDispatch();
  const show = useSelector(state => state.sidebarShow);

  return (
    <CSidebar
      show={show}
      onShowChange={val => dispatch({ type: "set", sidebarShow: val })}
    >
      <CSidebarBrand className="d-md-down-none" to="/">
        <CIcon
          className="c-sidebar-brand-full" …

只是在我的项目中从webdevelopment（来自android）开始，我试图分配变量，因为在许多教程中都提到了“：root”的帮助：

:root{
--accentColor: #20a8d8;
--primary: #96a1a5;
--secondary: #415a72;
--bgColorrr:#1e2e38;
}

但这根本没有用。将其更改为“：host”后，它可以正常工作-有人可以解释一下：root不工作的原因是什么？

可能值得一提：我在自定义组件上使用了它（角度5），并且正在使用CoreUI（以防有些CSS出现）

当我使用 CoreUI ChartBar 时，

            data={{
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                    {
                        label: 'GitHub Commits',
                        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
                    },
                ],
            }} type={'bar'} />

我收到错误。**图表.esm.js：5354

   Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.
at new Chart (chart.esm.js:5354:1)
at renderChart (CChart.tsx:160:1)
at CChart.tsx:242:1
at commitHookEffectListMount (react-dom.development.js:23049:1)
at invokePassiveEffectMountInDEV (react-dom.development.js:25044:1)
at invokeEffectsInDev (react-dom.development.js:27304:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27283:1)
at flushPassiveEffectsImpl (react-dom.development.js:27007:1)
at …