Vue项目中引入ElementUI组件

1. 创建Vue项目

请参考【PhpStorm创建Vue项目】一文。

2. 安装Element-UI

打开PhpStorm的命令行，执行命令：

npm install element-ui -S

将element-ui组件安装到项目下，如图：

安装成功后，在项目的node_modules目录下，会自动生成一个element-ui目录，其结构如下：

3. 引用elementUI

3.1 引入elementUI

在main.js中引入elementUI，内容如下：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3.2 引入自定义主题（可选）

主题链接：https://element.eleme.cn/#/zh-CN/theme

在element-ui官网下载自定义主题，重命名后将其复制到项目的node_modules/element-ui/lib目录下，如图：

然后，在main.js中引入即可：

4. 测试

在src目录下，新建一个views目录，然后在其下面，创建一个header.vue文件，如图：

header.vue文件的内容如下：

注意：template标签下，有且只能有一个根元素。

然后，在App.vue中引入header.vue，如图：

启动项目，最终的效果如下：