关于element-ui样式无法显示的问题+解决办法

问题描述:
新建的一个Vue.js项目(编辑工具WebStrom),
我的环境:

  • node.js环境(npm包管理器)
  • vue-cli 脚手架构建工具 cnpm install -g vue-cli
  • cnpm npm的淘宝镜像
    项目中导入Element-UI框架
  • 安装: npm install element-ui -S
  • 项目中导入,修改main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

此时我可以编写element-ui的代码,但是element组件没有样式:
像这样:
关于element-ui样式无法显示的问题+解决办法_第1张图片解决之后:
先贴图,解决之后样式如下:
关于element-ui样式无法显示的问题+解决办法_第2张图片
原因是因为我的项目没有配置主题:

  • 安装主题生成工具
npm i element-theme -g
  • 安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码
npm i element-theme-chalk -D
npm i https://github.com/ElementUI/theme-chalk -D 

问题解决!

你可能感兴趣的:(Element-UI,vue)