使用Element UI(一)

1.1什么是Element UI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

• Element UI是基于Vue 2.0的
• Element UI 提供一组组件
• Element UI 提供组件的参考实例, 直接复制

1.2搭建环境

1.2.1创建vue项目

• 步骤一: 通过 vue-cli创建项目

vue create eui01

• 步骤二: 手动选择功能(Manually select features)
  
• 步骤三: 选择需要的组件
  Babel : JavaScript编译器, 用于版本兼容, 复制将 ES6+ 转换成 ES 5.
  Router : 路由
  Vuex : 组件数据共享
  Linter / Formatter : 代码规范以及格式化检查
  
• 步骤四: 当选择 Linter 组件后, 需要完成” Linter / Formatter ”配置, 此处选择ESLint标准配置
  
• 步骤五: 当选择 Linter 组件后, 在保存时进行检查”Lint on Save”
  
• 步骤六: 使用各个组件的配置,已独立文件的方式存在.
  
• 步骤七:是否保存当前配置
  
• 步骤八: 安装完成, 进入项目,并启动项目测试
  

1.2.2安装 element-ui组件

npm i element-ui

1.2.3Element UI 引入

官方提供了2种引入方式：完整引入、按需引入

• 完整引入：引入了eui所有的组件，学习时/开发时常用
• 按需引入：引入需要的组件，生产环境下使用。

完整引入

1. 导入 element ui 组件库
2. 导入 element ui css样式
3. 并将element ui 注册给vue

//修改main.js文件
import Vue from ‘vue’;
//1 eui组件

import ElementUI from 'element-ui';
// 2 eui 样式
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

// 3 注册给vue
Vue.use(ElementUI);

new Vue({
  el: '#app',				//自动挂载
  render: h => h(App)
});

对比 脚手架自动生成代码 （手动挂载和自动挂载，效果一样的）

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')			//手动挂载