{"id":21558,"library":"mcl-ui-framework","title":"MCL UI Framework","description":"A Vue 3 + TypeScript UI component library built on Element Plus, tailored for Chinese enterprise middle-backend systems. Current stable version is 1.0.12, released as an alpha-quality package with sparse documentation and no changelog. It offers layout components (header, sidebar, content), theme toggling (multiple colors, dark mode with localStorage persistence), and routing integration via meta properties. Compared to alternatives like Ant Design Vue or Naive UI, it provides a simpler API but lacks community adoption and maturity.","status":"active","version":"1.0.12","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue","ui","framework","element-plus"],"install":[{"cmd":"npm install mcl-ui-framework","lang":"bash","label":"npm"},{"cmd":"yarn add mcl-ui-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add mcl-ui-framework","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 3 reactivity and component system.","package":"vue","optional":false},{"reason":"Bundles Element Plus components; required at runtime for internal UI.","package":"element-plus","optional":false}],"imports":[{"note":"Default import for plugin; CJS require may not work due to ESM-first packaging.","wrong":"const MclUI = require('mcl-ui-framework')","symbol":"MclUI","correct":"import MclUI from 'mcl-ui-framework'"},{"note":"Component is registered globally via plugin; named exports are not documented.","wrong":"import { MclLayout } from 'mcl-ui-framework'","symbol":"mcl-layout","correct":"import 'mcl-ui-framework' // then use <mcl-layout> globally"},{"note":"CSS file path is dist/mcl-ui-framework.css; other paths may not exist.","wrong":"import 'mcl-ui-framework/styles/index.css'","symbol":"theme CSS","correct":"import 'mcl-ui-framework/dist/mcl-ui-framework.css'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport router from './router';\nimport MclUI from 'mcl-ui-framework';\nimport 'mcl-ui-framework/dist/mcl-ui-framework.css';\n\nconst app = createApp(App);\napp.use(router);\napp.use(MclUI);\napp.mount('#app');\n\n// Vue component template:\n// <template>\n//   <mcl-layout :routes=\"router.options.routes\" :use-external-routes=\"true\" :router=\"router\">\n//     <router-view />\n//   </mcl-layout>\n// </template>","lang":"typescript","description":"Full setup: install plugin, import CSS, and use layout component with Vue Router."},"warnings":[{"fix":"Pin exact version and monitor repository for breaking changes.","message":"Package is in early alpha (1.0.x) with no stable release; API may change.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Run npm install element-plus@latest","message":"Element Plus is a required peer dependency; not installing it will cause runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use app.use(MclUI) and rely on global registration.","message":"Using named imports like { MclLayout } may not work; components are globally registered via plugin.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always import from 'mcl-ui-framework/dist/mcl-ui-framework.css' or check latest docs.","message":"The CSS file path changed from 'dist/mcl-ui-framework.css' to something else in undocumented versions.","severity":"breaking","affected_versions":"<1.0.10"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure Vue 3 is installed and import MclUI from 'mcl-ui-framework'.","cause":"MclUI plugin not properly imported or vue not installed.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'install')"},{"fix":"Call app.use(MclUI) after creating app and before mounting.","cause":"Plugin not registered via app.use(MclUI) or component name misspelled.","error":"[Vue warn]: Failed to resolve component: mcl-layout"},{"fix":"npm install element-plus@latest","cause":"Element Plus not installed or not listed in dependencies.","error":"Module not found: Error: Can't resolve 'element-plus'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}