Element-ui快速入门

第一步：确保你有Vue.js环境

Element-UI是基于Vue的，所以首先得有个Vue的环境。如果你还没准备好，别担心，跟着这样做：

1. 安装Node.js：先去nodejs.org下载并安装Node.js，它会自带npm（Node包管理器），我们需要它来安装Element-UI。

2. 创建Vue项目：打开命令行工具（比如Windows的cmd或PowerShell，Mac的Terminal），运行以下命令安装Vue CLI（Vue的命令行工具），然后创建新项目：

npm install -g @vue/cli

vue create my-element-app

其中my-element-app是你的项目名，可以换成你喜欢的名字。

3. 进入项目目录：

cd my-element-app

第二步：安装Element-UI

接下来，我们要把Element-UI这个大宝贝请进项目里：

npm install element-ui --save

这段命令会让npm帮你下载Element-UI，并把它添加到项目的依赖中。

第三步：在Vue项目中使用Element-UI

打开项目中的src/main.js文件，我们需要在这里引入Element-UI：

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 引入Element-UI的样式 Vue.use(ElementUI); // 让Vue用上Element-UI

第四步：开始构建你的界面

现在，你可以在Vue的组件里直接使用Element-UI的组件了。比如，想加一个按钮，就这么写：

<template> <div> <el-button type="primary">点击我</el-button> </div> </template> <script> export default { } </script>

el-button就是Element-UI里的按钮组件，type="primary"是让它变成主要颜色的样式。

第五步：看看效果

npm run serve

这会启动一个本地服务器，你可以在浏览器访问http://localhost:8080/看到你的页面，上面应该有一个美美的按钮了。