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: '登录' }
    }
	]
})

普通vue路由声明式：
<router-link :to="{name:'index'}}"> 或者 <router-link to='/index'>
编程式：router.push(...)

方法一: this.$router.push({path:'路径')};

方法二：this.$router.push({name:'组件名')};

elementUI提供了导航组件NavMenu <el-menu :index="item.path"> </el-menu>
具体使用方法可以看官方文档。

在后台网站中常见的页面结构是头部信息栏侧边导航栏，中间内容页的结构。在配置了路由之后，内容页由<router-view></router-view>显示对应路由的内容

4、常用组件
注意：平时多用uni-app进行开发，使用的都是<view></view>标签。在该项目中注意要用<div></div>标签

<el-table :data="tableData">
    <el-table-column fixed prop="date" label="日期" width="150">
    </el-table-column>
    <el-table-column label="其他信息" >
    	<!-- 作用域插槽 -->
    	<template slot-scope="scope">
           <span>scope.name1</span>
           <span>scope.name2</span>
        </template>
    </el-table-column>
</el-table>

5、打包
npm run build 命令
会在项目的dist文件夹下生成静态页面文件，这个是网站所需要的显示文件

6、其他方面的介绍

比如国际化（支持多国语言）、

Element 兼容 vue-i18n@5.x，搭配使用能更方便地实现多语言切换。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
Vue.use(Element)
Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)

自定义主题(可以在官网自定义主题颜色然后下载）：

使用在线主题编辑器，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用.

其他

如果是前端开发，在做后台交互的时候，并不能直接后台渲染，需要自行封装请求。咱这用的axios，按照习惯写在了common.js中，在main.js加载并挂载。

Vue.prototype.request = (obj)=>{
      let {
        url = '',//请求链接
        method='POST',//请求方式
        data = {},//请求参数
        is_public=false,//是否需要公共参数
        headers = {'Content-Type':'application/json;charset=UTF-8'},//请求头设置
        success, //成功回调
        fail,//失败回调
        complete//接口成功请求回调
      } = obj;
      const reg = new RegExp("^http");
      const is_domainName = url.match(reg);
      let request_url = url;
      if(!is_domainName){
        request_url = Vue.prototype.url + request_url;
      }
      if(is_public){
        /**
        *  公共参数设置
		*/
      }
      axios({
        method:method,
        url: request_url,
        headers: headers,
        data: data
      }).then(res => {
        if(res.data.error_code == 0){
          success && success(res.data);
        }
        complete && complete(res.data);
      }).catch( err => {
        fail && fail(err);
      });