npm - @mc-markets/ui - Versions diffs - 1.1.2 → 1.1.3 - Mend

@mc-markets/ui 1.1.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/QUICK_FIX_STYLE.md ADDED Viewed

@@ -0,0 +1,78 @@
+# 🚀 样式问题快速修复
+## 问题
+组件正常工作，但样式没有加载。
+## 快速解决方案（30秒）⚡
+### 第一步：打开你的 `main.js` 文件
+找到项目的入口文件（通常在 `src/main.js` 或 `src/main.ts`）
+### 第二步：添加这一行代码
+```js
+// src/main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+// ✅ 添加这一行
+import '@mc-markets/ui/dist/style.css'
+createApp(App).mount('#app')
+```
+### 第三步：重启开发服务器
+```bash
+# 按 Ctrl+C 停止
+# 然后重新启动
+npm run dev
+```
+## ✅ 完成！
+现在样式应该正常显示了。
+---
+## 为什么需要手动导入？
+虽然 resolver 配置了 `importStyle: true`，但某些情况下 `sideEffects` 可能不生效。手动导入是最可靠的方式。
+## 完整配置示例
+```js
+// src/main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+// Element Plus 样式（如果使用）
+import 'element-plus/dist/index.css'
+// @mc-markets/ui 样式 ⭐
+import '@mc-markets/ui/dist/style.css'
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
+```
+## 配置建议
+由于已经手动导入样式，可以在 `vite.config.js` 中关闭 resolver 的自动导入：
+```js
+// vite.config.js
+Components({
+  resolvers: [
+    McMarketsUiResolver({
+      importStyle: false  // ⬅️ 设为 false，避免重复导入
+    })
+  ]
+})
+```
+更多详细信息请查看 [STYLE_IMPORT_GUIDE.md](./STYLE_IMPORT_GUIDE.md)

package/STYLE_IMPORT_GUIDE.md ADDED Viewed

@@ -0,0 +1,368 @@
+# 样式导入指南
+如果使用 resolver 后组件正常显示但样式缺失，可以尝试以下几种解决方案。
+## 方案 1：手动导入全局样式（推荐）⭐
+在你的项目入口文件（如 `main.js` 或 `main.ts`）中手动导入样式：
+### CSS 方式
+```js
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+// 手动导入 @mc-markets/ui 样式
+import '@mc-markets/ui/dist/style.css'
+createApp(App).mount('#app')
+```
+### SCSS 方式
+```js
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+// 手动导入 @mc-markets/ui SCSS 样式
+import '@mc-markets/ui/styles/index.scss'
+createApp(App).mount('#app')
+```
+> **💡 提示**: 这是最可靠的方式，确保样式在应用启动时就被加载。
+## 方案 2：通过 Vite 配置导入
+在 `vite.config.js` 中配置：
+```js
+import { defineConfig } from 'vite'
+export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        // 如果使用 SCSS
+        additionalData: `@use "@mc-markets/ui/styles/index.scss" as *;`
+      }
+    }
+  }
+})
+```
+或者在 CSS 中导入：
+```css
+/* src/style.css 或 src/main.css */
+@import '@mc-markets/ui/dist/style.css';
+```
+然后在 `main.js` 中导入这个 CSS 文件：
+```js
+import './style.css'
+```
+## 方案 3：修改 Resolver 配置
+确保 resolver 配置正确：
+```js
+// vite.config.js
+import Components from 'unplugin-vue-components/vite'
+import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
+export default defineConfig({
+  plugins: [
+    Components({
+      resolvers: [
+        McMarketsUiResolver({
+          importStyle: true,        // 确保为 true
+          styleType: 'css',         // 'css' 或 'scss'
+        })
+      ]
+    })
+  ]
+})
+```
+> **注意**: `sideEffects` 在某些版本的 unplugin-vue-components 中可能不完全支持。
+## 方案 4：检查 unplugin-vue-components 版本
+确保使用的是较新版本：
+```bash
+npm list unplugin-vue-components
+```
+如果版本低于 0.24.0，建议升级：
+```bash
+npm install -D unplugin-vue-components@latest
+```
+## 方案 5：单独导入样式到 HTML
+在 `index.html` 中添加：
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Your App</title>
+  <!-- 方式 1: 如果已发布到 CDN -->
+  <!-- <link rel="stylesheet" href="https://cdn.example.com/@mc-markets/ui/dist/style.css"> -->
+  <!-- 方式 2: 通过 Vite 处理（推荐） -->
+  <link rel="stylesheet" href="/node_modules/@mc-markets/ui/dist/style.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>
+```
+> **注意**: 这种方式需要确保路径正确，在生产环境可能需要调整。
+## 完整示例
+### 项目结构
+```
+your-project/
+├── src/
+│   ├── main.js           # 入口文件
+│   ├── App.vue
+│   └── views/
+│       └── Home.vue
+├── vite.config.js
+└── package.json
+```
+### main.js（推荐配置）
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+// ✅ 方法1：直接导入 CSS（最简单）
+import '@mc-markets/ui/dist/style.css'
+// ✅ 方法2：导入 SCSS（需要配置 SCSS 预处理器）
+// import '@mc-markets/ui/styles/index.scss'
+const app = createApp(App)
+app.mount('#app')
+```
+### vite.config.js
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
+export default defineConfig({
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [
+        McMarketsUiResolver({
+          importStyle: false,  // ⚠️ 如果手动导入了样式，设为 false 避免重复
+          // importStyle: true, // 或者设为 true 尝试自动导入
+        })
+      ],
+      dts: 'src/components.d.ts'
+    })
+  ],
+  // 如果使用 SCSS
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "sass:math";`
+      }
+    }
+  }
+})
+```
+### App.vue 或其他组件
+```vue
+<template>
+  <div class="app">
+    <h1>测试 @mc-markets/ui</h1>
+    <!-- 直接使用，无需导入 -->
+    <m-button type="primary">主要按钮</m-button>
+    <m-button type="success">成功按钮</m-button>
+    <m-input v-model="value" placeholder="请输入" />
+    <m-select v-model="selected">
+      <m-option label="选项1" value="1" />
+      <m-option label="选项2" value="2" />
+    </m-select>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+// 注意：组件不需要手动导入
+const value = ref('')
+const selected = ref('')
+</script>
+```
+## 样式优先级问题
+如果样式导入了但效果不对，可能是优先级问题。可以尝试：
+### 1. 调整导入顺序
+```js
+// main.js
+import 'element-plus/dist/index.css'  // Element Plus 样式在前
+import '@mc-markets/ui/dist/style.css' // 自定义样式在后（优先级更高）
+```
+### 2. 使用 !important（不推荐）
+```css
+/* 在你的全局样式中 */
+.m-button {
+  /* 你的自定义样式 */
+  background-color: #409eff !important;
+}
+```
+### 3. 增加选择器权重
+```vue
+<style scoped>
+/* 增加选择器层级 */
+.app .m-button {
+  /* 你的自定义样式 */
+}
+</style>
+```
+## 调试技巧
+### 检查样式是否加载
+打开浏览器开发者工具：
+1. **Network 标签页**：查找 `style.css`，确认是否被加载
+2. **Elements 标签页**：检查 `<head>` 中是否有样式标签
+3. **Console 标签页**：查看是否有样式加载错误
+### 查看生成的代码
+检查浏览器中实际加载的代码：
+```js
+// 在浏览器 Console 中运行
+document.querySelectorAll('style, link[rel="stylesheet"]').forEach(el => {
+  console.log(el.outerHTML || el.textContent.substring(0, 100))
+})
+```
+## 常见问题
+### Q1: 样式完全没加载
+**解决方法**：
+1. 在 `main.js` 中手动导入 `import '@mc-markets/ui/dist/style.css'`
+2. 重启开发服务器
+3. 清除浏览器缓存
+### Q2: 部分样式不生效
+**解决方法**：
+1. 检查是否有 CSS 优先级冲突
+2. 确保没有被其他样式覆盖
+3. 使用浏览器开发者工具检查实际应用的样式
+### Q3: SCSS 导入报错
+**解决方法**：
+```bash
+# 确保安装了 sass
+npm install -D sass
+# 然后在 main.js 中导入
+import '@mc-markets/ui/styles/index.scss'
+```
+### Q4: 生产环境样式丢失
+**解决方法**：
+1. 确保在 `main.js` 中导入样式
+2. 检查 `vite.config.js` 的 build 配置
+3. 确认 `package.json` 中 `files` 字段包含样式文件
+## 推荐方案总结
+### 🌟 最佳实践（推荐）
+```js
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+// 1. 手动导入样式（最可靠）
+import '@mc-markets/ui/dist/style.css'
+// 2. 如果使用 Element Plus，确保顺序正确
+// import 'element-plus/dist/index.css'
+// import '@mc-markets/ui/dist/style.css'
+const app = createApp(App)
+app.mount('#app')
+```
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
+export default defineConfig({
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [
+        McMarketsUiResolver({
+          importStyle: false  // 手动导入了，这里设为 false
+        })
+      ]
+    })
+  ]
+})
+```
+这样可以确保：
+- ✅ 样式一定会被加载
+- ✅ 开发和生产环境一致
+- ✅ 样式加载时机可控
+- ✅ 避免重复导入
+## 需要帮助？
+如果以上方法都不行，请检查：
+1. `@mc-markets/ui` 版本（应该是 1.1.2 或更高）
+2. 浏览器控制台是否有错误
+3. Network 标签页中样式文件的加载情况
+4. 尝试清除 `node_modules/.vite` 缓存后重启

package/TEST_RESOLVER.md ADDED Viewed

@@ -0,0 +1,251 @@
+# 测试 Resolver 是否工作
+## 快速测试步骤
+### 1. 在你的项目中创建测试页面
+在 `src/views` 或 `src/pages` 目录下创建 `TestMcUi.vue`：
+```vue
+<template>
+  <div class="test-mc-ui">
+    <h1>测试 @mc-markets/ui Resolver</h1>
+    <!-- 使用 M 开头的组件 -->
+    <div class="test-section">
+      <h2>按钮测试</h2>
+      <m-button type="primary">主要按钮</m-button>
+      <m-button type="success">成功按钮</m-button>
+    </div>
+    <div class="test-section">
+      <h2>输入框测试</h2>
+      <m-input v-model="inputValue" placeholder="测试输入" />
+      <p>值: {{ inputValue }}</p>
+    </div>
+    <div class="test-section">
+      <h2>选择器测试</h2>
+      <m-select v-model="selectValue" placeholder="请选择">
+        <m-option label="选项1" value="1" />
+        <m-option label="选项2" value="2" />
+      </m-select>
+    </div>
+    <div class="test-section">
+      <h2>表单测试</h2>
+      <m-form>
+        <m-form-item label="用户名">
+          <m-input v-model="username" />
+        </m-form-item>
+      </m-form>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+// 注意：不需要手动导入组件，resolver 会自动处理
+// import { MButton, MInput } from '@mc-markets/ui'
+const inputValue = ref('')
+const selectValue = ref('')
+const username = ref('')
+</script>
+<style scoped>
+.test-mc-ui {
+  padding: 20px;
+}
+.test-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+.test-section h2 {
+  margin-top: 0;
+}
+</style>
+```
+### 2. 访问测试页面
+访问这个页面后，重新检查 `components.d.ts` 文件，应该会看到类似这样的内容：
+```ts
+declare module 'vue' {
+  export interface GlobalComponents {
+    // ... 其他组件
+    MButton: typeof import('@mc-markets/ui')['MButton']
+    MInput: typeof import('@mc-markets/ui')['MInput']
+    MSelect: typeof import('@mc-markets/ui')['MSelect']
+    MOption: typeof import('@mc-markets/ui')['MOption']
+    MForm: typeof import('@mc-markets/ui')['MForm']
+    MFormItem: typeof import('@mc-markets/ui')['MFormItem']
+  }
+}
+```
+### 3. 验证自动导入
+如果看到上面的类型定义，说明 resolver 工作正常！你应该能够：
+✅ 在模板中直接使用 `<m-button>`、`<m-input>` 等组件
+✅ 无需手动 import
+✅ 组件样式自动加载
+✅ TypeScript 类型提示正常
+### 4. 检查配置
+如果没有生成类型定义，请检查你的 `vite.config.js`：
+```js
+import Components from 'unplugin-vue-components/vite'
+import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
+export default {
+  plugins: [
+    Components({
+      resolvers: [
+        McMarketsUiResolver({
+          importStyle: true,
+          styleType: 'css'
+        })
+      ],
+      // 确保 dts 路径正确
+      dts: 'src/components.d.ts'
+    })
+  ]
+}
+```
+### 5. 常见问题排查
+#### 问题：组件没有被识别
+**解决方法**：
+1. 确保组件名称使用 `M` 开头（大写）
+2. 重启开发服务器 `npm run dev`
+3. 删除 `node_modules/.vite` 缓存
+#### 问题：类型定义没有生成
+**解决方法**：
+1. 检查 `dts` 配置路径是否正确
+2. 确保 `unplugin-vue-components` 版本 >= 0.24.0
+3. 查看控制台是否有错误信息
+#### 问题：样式没有加载
+**解决方法**：
+```js
+// 手动导入样式
+import '@mc-markets/ui/dist/style'
+// 或者在 vite.config.js 中配置
+McMarketsUiResolver({
+  importStyle: true,
+  styleType: 'css'  // 或 'scss'
+})
+```
+### 6. 查看构建结果
+构建项目查看是否按需加载：
+```bash
+npm run build
+```
+检查 `dist` 目录，只有使用的组件会被打包进去。
+## 直接测试 Resolver
+你也可以直接测试 resolver 函数：
+```js
+// test-resolver.js
+import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
+const resolver = McMarketsUiResolver({
+  importStyle: true,
+  styleType: 'css'
+})
+// 测试不同组件
+console.log('MButton:', resolver.resolve('MButton'))
+console.log('MInput:', resolver.resolve('MInput'))
+console.log('MTable:', resolver.resolve('MTable'))
+console.log('ElButton:', resolver.resolve('ElButton')) // 应该返回 undefined
+```
+运行：
+```bash
+node test-resolver.js
+```
+预期输出：
+```js
+MButton: {
+  name: 'MButton',
+  from: '@mc-markets/ui',
+  sideEffects: '@mc-markets/ui/dist/style'
+}
+MInput: {
+  name: 'MInput',
+  from: '@mc-markets/ui',
+  sideEffects: '@mc-markets/ui/dist/style'
+}
+// ...
+ElButton: undefined
+```
+## 支持的所有组件
+确保以下组件名称都是 **M 开头**（而不是 m 开头）：
+- `MIcon`
+- `MButton`
+- `MInput`
+- `MForm`
+- `MFormItem`
+- `MTooltip`
+- `MSelect`
+- `MOption`
+- `MOptionGroup`
+- `MPagination`
+- `MRadio`
+- `MRadioGroup`
+- `MRadioButton`
+- `MSwitch`
+- `MTag`
+- `MAlert`
+- `MDialog`
+- `MNotification`
+- `MMessage`
+- `MNotifiMessage`
+- `MDatePicker`
+- `MEmpty`
+- `MTable`
+- `MTableColumn`
+- `MBanner`
+- `MTabs`
+- `MTabPane`
+- `MTabCard`
+- `MTabCardItem`
+- `MBreadcrumb`
+## 注意事项
+⚠️ **重要**：组件名称必须使用 PascalCase（大驼峰）格式：
+- ✅ 正确：`<MButton>` 或 `<m-button>` (在模板中会自动转换)
+- ✅ 正确：`<MFormItem>` 或 `<m-form-item>`
+- ❌ 错误：`<mButton>`
+- ❌ 错误：`<mbutton>`
+在 Vue 模板中，`<m-button>` 会被自动转换为 `MButton` 组件名。