ElementUI 是饿了么团队开发的，一套为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库
组件是组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等
Vue3.x 官网：https://element-plus.org/zh-CN/#/zh-CN
安装
安装 ElementUI 库 (在当前工程的目录下)，命令
1
npm install [email protected]
引入 ElementUI 组件库
1
2
3
4
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
入门使用
创建 src/views/element/elementView.vue 组件，从官网复制代码，如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<div>
<!-- 按钮 -->
<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>
</template>
<script>
export default {
}
</script>
<style>
</style>
在 App.vue 导入组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<div id="app">
<element-view></element-view>
</div>
</template>
<script>
import elementView from './views/element/elementView.vue'
export default {
components: { elementView },
}
</script>
<style></style>
针对其他组件亦是如此
导入 Axios
安装
1
npm install axios
导入
1
import axios from 'axios';
Vue 路由
Vue Router 是 Vue 的官方路由，组成：
- VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>：请求链接组件，浏览器会解析成链接标签<router-view>：动态视图组件，用于渲染展示与路由对应的组件
安装
命令
1
npm install [email protected]
定义路由
在 src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView // 上方导入方式
},
{
path: '/emp',
name: 'emp',
// 直接导入方式
component: () => import('../views/tlias/empView.vue')
},
{
path: '/redirect',
// 重定向
redirect: '/emp'
}
]
使用
在需要使用的地方
1
<router-link to="/dept">部门管理</router-link>
在 App.vue
1
2
3
4
5
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
在 main.js
1
2
3
4
5
6
import router from './router'
new Vue({
router, // 使用路由
render: h => h(App)
}).$mount('#app')
打包部署
命令
1
npm run build
命令执行完成后会生成 dist 目录，将该目录文件部署即可