element ui ,Ant design vue

用element ui搭建后台基础框架

element ui和iview都是vue常用的框架，今天用了一下element ui搭建了一个基础版的后台框架，这里就和大家分享下，首先看一下效果图：

实现步骤：

1、项目使用vue-cli脚手架2搭建，怎么创建脚手架之前博客已经写过，首先引入element-ui,我这里使用较多，就全局引入了，方式如下：

使用如下命令安装

npm i element-ui -S
main.js里面引入

import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);
2、background.vue

此文件你还需要安装less、动画transition、css里面还引入了一个variable.styl

variable.styl如下，放在assets下的css文件夹下：

// 背景色
$color-background = #f5f5f5

// 主题色
$color-theme = #ED6D00
$color-theme-1 = #1eb7a7

// 蒙层
$color-layer = rgba(0, 0, 0, 0.4)
$color-layer-1 = rgba(255, 255, 255, 0.4)

// 字体颜色，由浅到深
$color-text-1 = #333333
$color-text-2 = #666666 // 与字体“huawenxihei”搭配
$color-text-3 = #999999
$color-text-4 = #d3d3d3
$color-text-5 = #ffffff

// 边框颜色
$color-border = #E0E0E0
$color-white = #ffffff
// 阴影
$box-shadow = 0 0 12px #dfdfdf
// 分割线（横线、竖线）颜色
$color-divider = #e2e2e2

// 价格颜色, 星级评分颜色
$color-price = #00ceb9
$color-level = #ff9c00

$font-size-large = 20px
$font-size-title = 15px
$font-size-desc = 13px
$font-size-small = 11px

// 板块间间距
$margin-bottom-module = 10px
$margin-top-module = 10px

// 板块内边距 板块内部上下边距为20px; 板块内元素间左右边距为10px;

// 图片类圆角5px, 其他圆角3px
$border-radius-img = 5px
$border-radius-other = 3px

Ant design vue

Ant Design是蚂蚁金服体验技术部打磨出一个服务于企业级产品的设计体系，通过模块化解决方案降低生产成本。前端实现涵盖了react vue angular等三大框架。

ANTD PRO VUE是Ant Design的vue 实现，开发企业级后台产品。

安装
ant pro vue 是一套基于Ant Design Vue的中后台管理控制台的脚手架。
直接从GitHub仓库中直接安装最新的脚手架代码。

$ git clone --depth=1 https://github.com/sendya/ant-design-pro-vue.git my-project
1
目录结构
├── public
│ └── logo.png # LOGO
| └── index.html # Vue 入口模板
├── src
│ ├── api # Api ajax 等
│ ├── assets # 本地静态资源
│ ├── config # 项目基础配置，包含路由，全局设置
│ ├── components # 业务通用组件
│ ├── core # 项目引导, 全局配置初始化，依赖包引入等
│ ├── router # Vue-Router
│ ├── store # Vuex
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── views # 业务页面入口和常用模板
│ ├── App.vue # Vue 模板入口
│ └── main.js # Vue 入口 JS
│ └── permission.js # 路由守卫(路由权限控制)
├── tests # 测试工具
├── README.md
└── package.json

本地开发
(1) clone到本地后安装依赖
$ npm install
(2) 运行

$ npm run serve
启动浏览器访问 http:localhost:8000.看到首页登录页就OK
(3) 根据业务修改代码进行开发。

路由
(1) 在目录src下的config目录的router.config.js统一配置管理路由。

(2) vue路由是通过创建一个路由实例对象注册到vue实例中，菜单生成是根据路由配置的。在vue-router的配置上新增另一些参数。

1.hideChildrenInMenu用于隐藏不需要的菜单中展示的子路由个人设置。

2.hidden可以在菜单中不展示这个路由，包括子路由。效果可以查看other下的路由配置。

3.meta.title和meta.icon分别代表生成菜单项的文本和图标。

4.meta.permission 采取配置此路由的权限，如果配置了将会验证内部用户的权限，并决定是否展示*（放置在下）。

5.meta.hiddenHeaderContent可以强制当前页面不显示PageHeader组件中的页面带的面包屑和页面标题栏

(3) 实例

{
path: ‘/form’, //路径
redirect: ‘/form/base-form’, //重定向到
component: PageView, //组件
meta: { title: ‘表单页’, icon: ‘form’, permission: [ ‘form’ ] }, //菜单名称，icon,路由权限验证
children: [
{
path: ‘/form/base-form’,
name: ‘BaseForm’,
component: () => import(’@/views/form/BasicForm’), //路由懒加载模式
meta: { title: ‘基础表单’, keepAlive: true, permission: [ ‘form’ ] } //权限匹配
},
{
path: ‘/form/step-form’,
name: ‘StepForm’,
component: () => import(’@/views/form/stepForm/StepForm’),
meta: { title: ‘分步表单’, keepAlive: true, permission: [ ‘form’ ] }
},
{
path: ‘/form/advanced-form’,
name: ‘AdvanceForm’,
component: () => import(’@/views/form/advancedForm/AdvancedForm’),
meta: { title: ‘高级表单’, keepAlive: true, permission: [ ‘form’ ] }
}
]
},

布局
(1) 在Any Design 抽离了常用通用布局，放在layouts目录.

1. BasicLayout：基础页面布局，包含了头部导航，侧边栏和通知栏

2. UserLayout：抽离出用于登陆注册页面的通用布局

3. PageView：基础布局，包含了面包屑，和中间内容区 (slot)

4. RouterView：空布局，专门为了二级菜单内容区自定义

5. BlankLayout：空白的布局

(2) Ant Design 布局组件

1. Grid组件，它支持flex布局，基于行（row） 列（col）,总结一下几个常用组件的属性
   pull 栅格向左移动格数 number 0
   push 栅格向右移动格数 number 0
   span 栅格占位格数，为 0 时相当于 display: none number -
   sm ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object -
   md ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object -
   lg ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object -
2. Layout 组件 ,他是页面整体布局，被抽象出来放到components 和 Layout文件夹。

新增页面
(1) 新建页面在src/views下建一个vue文件，如果有相关页面，可以新建一个文件夹放置相关文件。

(2) 然后将组件在路由中定义好就可以访问页面。

(3) 最后在newPage中写业务代码

新增业务组件
(1) 业务组件的特征是只负责相对独立，稳定的功能，没有单独的路由配置,可能是静态的，也可能包含自己的state。不涉及vuex,只是父子单向数据流。

(2) 在src/components下新建一个以组件名命名的文件夹，在文件夹下面建index.js和index.less，下面是一个例子

{{ desc }}

(3) 使用

{{ context }}

10 样式
(1) 默认使用less,这样是为了防止样式全局污染。

(2) 在src/global.less设置全局样式

(3) 可以用 /deep/ 对组件进行样式穿透

11 serve side交互
(1) 请求流程
1.UI 组件交互操作；
2.调用统一管理的 api service 请求函数；
3.使用封装的 request.js 发送请求；
4.获取服务端返回；
5.更新 data。

(2) 为了方便管理维护，所有统一的请求都放在@src/api文件夹。
(3) 在@/src/utils/request.js中对axios 进行封装,目的是，便于统一出路post get 等请求参数，请求头。
例子：
// 根据用户 id 获取用户信息
export function getUser (id) {
return axios({
url: ${api.user}/${id},
method: ‘get’
})
}

    <template>
        <div>
            <a-button @click="queryUser"></a-button>

            <a-table :dataSource="list">
            </a-table>
        </div>
    </template>

    <script>
    import { getUser } from '@/api/user'

    export default {
        data () {
            return {
                id: 0,
                queryParam: {
                    pageSize: 10,
                    pageNo: 1,
                    username: ''
                },
                info: {}
            }
        },
        methods: {
            queryUser () {
                const { $message } = this
                getUser(this.id).then(res => {
                    this.info = res.data
                }).catch(err => {
                    $message.error(`load user err: ${err.message}`)
                })
            }
        }
    }
    </script>