首页 > 其他分享 >2024-07-15 vue组件发布npm后,再使用,样式不见了?==》查看样式是否在dist包里,有的话应该就是样式没引用

2024-07-15 vue组件发布npm后,再使用,样式不见了?==》查看样式是否在dist包里,有的话应该就是样式没引用

时间:2024-07-15 17:18:44浏览次数:15  
标签:npm vue dist 样式 app 组件 import

哎,嗯。。。emmm。。。

好,问题就是这样的,最近写了vue组件打算上到npm,然后上是上了,但是样式却没有生效??

左上角是组件样式本地调试的截图,可以看到是生效的,右上角的截图是我在别的项目引用了我写的这个库,结果样式却没有生效。

我打包后的文件列表如下:

 注意:style.css包含了所有的样式,但实际上被引用后并没有生效。

 原因:样式文件需要手动引入。我记得u-view组件库就是在引入了uview后还要引入它的css文件。问题就出在这里。
 解决方案:找到你的dist的样式文件路径,把它引入到main.js文件里,如:

import { createApp } from 'vue'

import App from "./App.vue";

import Iuniko from 'iuniko-ui';
import '/node_modules/iuniko-ui/dist/style.css'

const app = createApp(App);

app.use(Iuniko);
app.mount('#app');

哈哈,这问题刚开始时困扰了我大半天,后来还是掘金大佬提点了小子一下才知道原来问题在这里。

 

标签:npm,vue,dist,样式,app,组件,import
From: https://www.cnblogs.com/iuniko/p/18303552

相关文章

  • vue项目使用element组件库
    在一个尚未与逆行的项目中安装——右键项目,选中在集成终端中打开 输入[email protected]或者npmielement-ui-S回车(下载需要等待一段时间)运行完成后打开node_modules,如果可以找到element-ui则安装成功 使用——在main.js中加入如下代码//引......
  • 深入探索 Vue 3 组合式 API:高效管理响应式状态与跨组件通信
    随着Vue3的发布,组合式API(CompositionAPI)引入了更灵活、更强大的状态管理和逻辑复用方式。本文将深入探讨如何使用组合式API管理响应式状态和实现跨组件通信,并通过具体的代码示例展示其应用场景。一、组合式API简介组合式API是Vue3中的一种新的API风格,它通过......
  • Vue 中ref()与 reactive() 的区别
    在Vue3中,组合式API(CompositionAPI)引入了新的响应式系统,使得状态管理和逻辑复用变得更加灵活和强大。ref()和reactive()是组合式API中两个重要的响应式工具,它们各自有不同的使用场景和特性。在这篇博客中,我们将深入探讨ref()和reactive()的区别,并通过代码示例展示它......
  • Vite + Vue 3 + Electron 中 Express 的集成指南
    在Vite+Vue3+Electron中使用Express在现代前端开发中,Vite和Vue3提供了快速的开发体验,而Electron则使得我们能够构建跨平台的桌面应用程序。有时,我们需要在Electron应用中集成一个后端服务器来处理复杂的逻辑或与数据库交互。Express是一个轻量级且灵活的Node.j......
  • 全面掌握 Vue 路由:从基础到进阶
    标题:全面掌握Vue路由:从基础到进阶在现代前端开发中,单页面应用(SPA)已经成为主流,而路由作为SPA的核心功能之一,起着至关重要的作用。Vue.js作为一个流行的前端框架,其官方路由库vue-router提供了强大且灵活的路由管理功能。本文将深入探讨Vue路由的使用,包括基础配置、动态路......
  • d3.js+vue生成动力图
    本文主要实现了动力图中:    节点的显示;        节点与节点之间关系的连接,以及对应的关系类型的显示;    节点的拖拽;    图谱的缩放1.先上效果:2.以下是完整的代码部分:<template><divref="chart"className="ggraph"></div></templ......
  • 【vue深入学习第2章】Vue.js 中的 Ajax 处理:vue-resource 库的深度解析
    Vue.js中的Ajax处理:vue-resource库的深度解析在现代前端开发中,Ajax请求是与后端进行数据交互的关键技术。Vue.js作为一个渐进式JavaScript框架,提供了多种方式来处理Ajax请求,其中vue-resource是一个较为常用的库。尽管vue-resource在Vue2.x之后不再是官方推荐的......
  • 2024-07-15 记录一则vue网站优化的小技巧
    vite+vue+某框架写的网站可以通过配置vite.config.js中的build.rollupOptions.output.manualChunks来手动分割指定的包到指定的文件夹内,然后在网站入口文件按照需求引入比如:build:{rollupOptions:{output:{manualChunks:{antd......
  • vue3中的props和emit
    首先我们要明确props和emit是在父子组件(嵌套组件)中使用的。想要在父组件中渲染出子组件里的内容,需要在父组件中导入子组件,并在模板中渲染子组件。那父子组件中如何通信呢?就需要使用到props和emit。props当子组件要接受父组件传递的数据信息时,也可以说是父组件传递数据给子......
  • vue ui + 项目创建 (基于vue脚手架创建项目)
    =======================注意全程都不要关闭cmd窗口========================= 在想要创建项目的文件目录输入cmd回车,再输入vueui (如果出现报错,可能是因为有hadoop,存在hadoop的环境变量会报错,但也能打开网页)出现下图创建——》在此创建新项目 如下图,项目名不要有中文......