【JavaWeb】Day18.Vue组件库Element

什么是Element

• Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
• 组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。
• 官网：Element - The world's most popular Vue UI framework

Element快速入门

安装ElementUI组件库 （在当前工程的目录下），在命令行执行指令：

npm install [email protected]

首先Ctrl+c终止任务，点击在集成终端中打开。

引入ElementUI组件库 

在main.js中引入ElementUI组件库 

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

Vue.use(ElementUI);

访问官网，复制组件代码，调整 

首先新创建一个.Vue项目，创建vue框架。Vue的组件文件每个组件由三个部分组成：<template> 、<script>、<style> 。

在打开官网复制代码，以button按钮为例。

因为默认情况下展示为根组件内容，所以要在app.vue中添加引用

注意如是2.X要下载vetur扩展 ，3.X下载valor扩展，自动导入组件。