ElementUI快速入门
- 什么是ElemenUI
- Vue+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);
});
