组件网址http://element-cn.eleme.io/#/zh-CN
首先,VUE项目需要安装组件,
方式一npm:
进入项目根目录后执行
cnpm i element-ui -S
方式二:CDN
<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>
我在上一篇博客的基础上使用方式一,之后修改src下的main.js文件:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入Element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
//引用Element
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
注意:是 import 'element-ui/lib/theme-chalk/index.css'而不是 import 'element-ui/lib/theme-default/index.css'。
现在就可以在项目中直接引用Element了,如在HelloWord中加上:
<el-button type="primary" icon="el-icon-search">搜索</el-button>
npm run dev运行项目后可以看到: