VUE项目中引入Element组件快速开发

组件网址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运行项目后可以看到: