Element-UI

1. Element-UI介绍

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建Element-UI 官 方 站 点：https://element.eleme.cn/#/zh-CN

2. Element-UI使用

2.1 命令行方式安装

• 创建 一个新的项目
• 当前项目下打开终端, 安装依赖包 ,执行下面的命令

npm i element-ui -S

• 打开 main.js , 导入Element-UI 相关资源

main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等

//导入组件库

import ElementUI from 'element-ui'

 

//导入组件相关样式

import 'element-ui/lib/theme-chalk/index.css'

 

//配置Vue插件 将El安装到Vue上

Vue.use(ElementUI);

• 复制Element 按钮样式 到app.vue文件的 template下

<template>

<div id="app">

<!-- 测试elementUI -->

<el-row>

<el-button>默认按钮</el-button>

<el-button  type="primary">主要按钮</el-button>

<el-button  type="success">成功按钮</el-button>

<el-button type="info">信息按钮</el-button>

<el-button type="warning">警告按钮</el-button>

<el-button type="danger">危险按钮</el-button>

</el-row>

 

<div id="nav">

<router-link to="/">Home</router-link>|

<router-link to="/about">About</router-link>

</div>

<router-view />

</div>

</template>

• 启动项目 npm run serve, 查看页面

3. 安装axios

1）npm安装：使用npm下载axios包

npm i axios

2）在main.js文件中导入axios 相关资源

//引入axios

import axios from 'axios'

//Vue 对 象 使 用 axios Vue.prototype.axios = axios;

节选自拉钩教育JAVA系列课程。