Vue 入门学习：环境搭建与 Element UI 组件使用

一、引言

Vue.js 是一个流行的 JavaScript 前端框架，它以简洁、灵活和高效的特点受到广大开发者的喜爱。本文将带领大家从 Vue 的环境搭建开始，逐步深入了解 Vue 的基本使用，并详细介绍 Element UI 中一些常用组件的使用方法，帮助大家快速入门 Vue 开发。

二、Vue 运行环境搭建

（一）安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它使得我们可以在服务器端运行 JavaScript 代码，同时也是 Vue 开发所依赖的环境。

1. 前往 Node.js 官方网站（Node.js --- Run JavaScript EverywhereNode.js --- 在任何地方运行 JavaScriptNode.js --- Run JavaScript Everywhere）下载适合自己操作系统的安装包。
2. 按照安装向导进行安装，安装过程中可以选择默认配置。

（二）验证 Node.js 和 npm 安装

安装完成后，打开命令提示符（Windows）或终端（Mac/Linux），输入以下命令：

node -v
npm -v

如果正确安装，将分别显示 Node.js 和 npm 的版本号。

（三）安装 Vue CLI

Vue CLI 是一个官方提供的脚手架工具，用于快速搭建 Vue 项目。

在命令提示符或终端中执行以下命令进行全局安装：

npm install -g @vue/cli

然后启动项目：

npm run serve

此时，在浏览器中访问 http://localhost:8080，看到 Vue 项目的默认欢迎页面，这意味着 Vue 开发环境已经搭建成功。

三、Element UI 组件使用

Element UI 是一套基于 Vue.js 的桌面端组件库，提供了丰富的组件，能够帮助我们快速构建美观且功能强大的前端界面。在使用 Element UI 之前，需要先将其安装到我们的 Vue 项目中

主要组件使用教程

1. 输入框（Input）

• 在 Vue 组件的模板中，使用 <el-input> 标签来创建一个输入框。

  <template>
  <el-input v-model="inputValue" placeholder="请输入内容"></el-input>

  你输入的内容是：{{ inputValue }}

  </template> <script> export default { data() { return { inputValue: '' }; } }; </script>

• v-model 指令用于实现双向数据绑定，使得输入框中的值与组件的 data 中的 inputValue 同步更新。

2. 选择器（Select）

• 使用 <el-select> 标签创建选择器，配合 <el-option> 标签来定义选项。

  <template>
  <el-select v-model="selectedOption" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select>

  你选择的是：{{ selectedOption }}

  </template> <script> export default { data() { return { selectedOption: '', options: [ { value: 'option1', label: '选项 1' }, { value: 'option2', label: '选项 2' }, { value: 'option3', label: '选项 3' } ] }; } }; </script>

• v-model 绑定选择器的选中值，通过 v-for 循环遍历 options 数组来生成选项列表。

3. 单选框（Radio）

• 使用 <el-radio-group> 标签包裹多个 <el-radio> 标签来创建单选框组。

  <template>
  <el-radio-group v-model="radioValue"> <el-radio :label="1">男</el-radio> <el-radio :label="2">女</el-radio> </el-radio-group>

  你选择的性别是：{{ radioValue === 1? '男' : '女' }}

  </template> <script> export default { data() { return { radioValue: 1 }; } }; </script>

• v-model 绑定单选框组的选中值，每个 <el-radio> 的 :label 属性用于标识每个单选框的值。

4. 多选框（Checkbox）

• 类似单选框，使用 <el-checkbox-group> 包裹多个 <el-checkbox> 来创建多选框组。

  <template>
  <el-checkbox-group v-model="checkedValues"> <el-checkbox :label="1">苹果</el-checkbox> <el-checkbox :label="2">香蕉</el-checkbox> <el-checkbox :label="3">橙子</el-checkbox> </el-checkbox-group>

  你选择的水果是：{{ checkedValues }}

  </template> <script> export default { data() { return { checkedValues: [] }; } }; </script>

• v-model 绑定一个数组，用于存储选中的多选框的值。

5. 计数器（InputNumber）

• 使用 <el-input-number> 标签创建计数器。

  <template>
  <el-input-number v-model="count" :min="1" :max="10"></el-input-number>

  当前数量是：{{ count }}

  </template> <script> export default { data() { return { count: 1 }; } }; </script>

• v-model 绑定计数器的值，:min 和 :max 属性分别设置计数器的最小值和最大值。

6. 日期时间选择器（DatePicker）

• 使用 <el-date-picker> 标签创建日期选择器，通过 type 属性可以指定选择日期、时间或日期时间。

  <template>
  <el-date-picker v-model="date" type="date" placeholder="选择日期" ></el-date-picker>

  你选择的日期是：{{ date }}

  </template> <script> export default { data() { return { date: '' }; } }; </script>

• 如果要选择时间，可以将 type 属性设置为 time；如果要选择日期时间，可以设置为 datetime。