模仿CSDN网站——Element-UI安装

Element-UI官网地址：https://element.eleme.cn/#/zh-CN

一、安装

在项目根目录下运行 npm i element-ui -S

二、完整引入

在main.js中写入以下内容：

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

以上代码便完成了Element的引入。需要注意的是，样式文件需要单独引入。

三、自定义主题色

在官网的主题菜单下，修改主题色为#CA0C16。

然后点击下载，解压后将index.css覆盖node_modules/element-ui/lib/theme-chalk/index.css，这样页面中的主题色就变成了CSDN官方主题色。

四、测试项目是否成功引入element-ui

在官网中找到单选框，按照模板引入到项目HelloWorld.vue中，网页中显示主题色正确，则引入成功。

之后，我们就可以进行页面设计与实现了。