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

@mc-markets/ui 1.1.1 → 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 (9) 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/RESOLVER_USAGE.md CHANGED Viewed

@@ -17,6 +17,8 @@ npm install -D unplugin-vue-components
 ### Vite 配置
+#### ES 模块方式（推荐）
 在你的 `vite.config.js` 或 `vite.config.ts` 中：
 ```js
@@ -41,6 +43,33 @@ export default defineConfig({
 })
 ```
+#### CommonJS 方式
+如果你的配置文件使用 CommonJS 格式：
+```js
+const { defineConfig } = require('vite')
+const vue = require('@vitejs/plugin-vue')
+const Components = require('unplugin-vue-components/vite')
+const { McMarketsUiResolver } = require('@mc-markets/ui/resolver')
+module.exports = defineConfig({
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [
+        McMarketsUiResolver({
+          importStyle: true,
+          styleType: 'css'
+        })
+      ]
+    })
+  ]
+})
+```
+> **💡 提示**: Resolver 自动支持 ES 模块和 CommonJS 两种格式，无需额外配置。
 ### Webpack 配置
 在你的 `webpack.config.js` 中：

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` 缓存后重启