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 Vu

舌尖上的蛋炒饭

8373人浏览 · 2021-08-19 16:01:52

舌尖上的蛋炒饭 · 2021-08-19 16:01:52 发布

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>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^