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)
});

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

我们看到官网有这么一段
Vue引入的ElementUi没有样式怎么办_第1张图片

我们将官网里面的链接复制出来,放到项目根目录的/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>
    
  body>
html>

Vue引入的ElementUi没有样式怎么办_第2张图片
然后就可以开开心心的使用样式了

你可能感兴趣的:(Vue)