Vue引入的ElementUi没有样式怎么办

最新推荐文章于 2023-08-19 19:51:48 发布

舌尖上的蛋炒饭

最新推荐文章于 2023-08-19 19:51:48 发布

阅读量8.2k

点赞数 3

分类专栏： Vue

本文链接：https://blog.csdn.net/qq13933506749/article/details/119804187

版权

Vue 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

Vue引入的ElementUi没有样式怎么办

就像我的项目，明明按照官网的操作，全部引入了

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

但就是没有样式，就很奇怪，找了前端开发也没搞明白这个问题，但是提供了一个曲线救国的方法，那就是使用CDN的模式

我们看到官网有这么一段
在这里插入图片描述

我们将官网里面的链接复制出来，放到项目根目录的/public/index.html中

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在这里插入图片描述
然后就可以开开心心的使用样式了

舌尖上的蛋炒饭

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
Vue引入的ElementUi没有样式怎么办

Vue引入的ElementUi没有样式怎么办就像我的项目，明明按照官网的操作，全部引入了import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({ el: '#app', render: h => h(App)});
复制链接

扫一扫