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>

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

Logo

前往低代码交流专区

更多推荐