Element-UI

Element-UI简介

Element-UI 是饿了么前端出品的基于 Vue.js 的后台组件库，便于程序员进行页面的快速布局和构建。

官方网站：https://element-plus.gitee.io/#/zh-CN

Element-UI的使用

安装步骤

• 在当前项目下打开终端，安装依赖包，执行命令：npm i element-ui -S
• 打开 main.js 文件，导入 Element-UI 相关资源：

// 导入组件库 
import ElementUI from 'element-ui' 

// 导入组件相关样式 
import 'element-ui/lib/theme-chalk/index.css' 

// 配置Vue插件，将El安装到Vue上 
Vue.use(ElementUI);

需要使用哪些组件直接去官网拷贝对应代码到 App.vue 文件的template内即可。

Vue-CLI工程改造

• 删除 components 目录下的 HelloWorld.vue 组件
• 删除 App.vue 中的部分内容，只保留以下部分：

<template> 
<div id="app"></div> 
</template>

<style></style>

• 删除 router 文件下的路由文件 index.js 的部分内容，只保留以下部分：

import Vue from 'vue' 
import VueRouter from 'vue-router' 

Vue.use(VueRouter) 

const routes = []
const router = new VueRouter({ 
    routes 
})

export default router

• 删除views目录下的 About.vue 与 Home.vue

安装axios

• 通过npm命令安装：npm i axios
• 在main.js文件中导入 axios 相关资源：

// 引入axios 
import axios from 'axios' 

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