ElementUI快速入门

什么是ElemenUI

ElementUI官网 官网介绍
基于 Vue 2.0 的桌面端组件库
常用于后台网站的搭建，无论前端还是后端都易于上手

Vue+ElementUI

1、新建项目
新建一个vue项目

2、安装
npm i element-ui -S
会在node_modules文件夹下引入相关的elemetui组件

2.1、完整引入

在 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 的引入。需要注意的是，样式文件需要单独引入。

2.2按需引入

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

3、配置路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；

a.安装 npm install vue-router --save

b.创建一个项目，目录结构：
|–src (项目主要操作目录)
|–|--assets（css/js等文件）
|–|--components（组件库）
|–|--router （路由）
|–|--static （静态资源文件）
|–|--views （页面文件夹）
|–|--App.vue
|–|--main,js
在router文件夹下（统一管理路由的文件夹）创建index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login/login'),
      meta: { title: