Vue和Element Plus

发表于 2026-01-15 更新于昨天

作者 Administrator

13~17 分钟 阅读

Vue工程化

环境准备

在搭建Vue项目前，需要保证环境中存在Nodejs，访问Node.js — Download Node.js®官网下载Nodejs

下载完毕后，打开一个新的CMD窗口，输入以下命令验证是否安装成功：

node -v

如果输出版本信息，表明安装成功；否则需要检查系统环境变量中是否存在nodejs，或者重新下载并安装

安装完Nodejs后，还需要对其进行配置操作：

npm config set prefix "E:\Program Files\nodejs"

这条命令用于设置 npm 全局安装路径。默认情况下，npm 安装的模块会存放在 C:\Users\用户名\AppData\Roaming\npm 目录下，挤占系统盘容量

注意，一定要确保以上路径为Nodejs的安装目录

设置完npm安装路径后，还要切换镜像源，默认的镜像源服务器在海外，下载速度会偏慢，通过切换国内镜像源可以很好的解决这个问题：

npm config set registry https://registry.npmmirror.com

Vue项目简介

创建vue项目：

npm create vue@3.3.4

创建完项目后，还需要进入项目并执行npm install命令进行依赖下载（初始化操作）

第一次创建项目并进行初始化操作后，可以通过：

npm run dev

启动项目，并在浏览器中访问页面检查项目有无异常

项目结构

vite.config.js：Vue项目的配置信息，如端口号等
package.json：项目配置文件，包括项目名、版本号、依赖包、版本等
node_modul目录：下载的第三方包存放的目录
**src目录**：源代码存放目录
main.js：入口文件
App.vue：根组件
componenets目录：组件目录，存放通用组件
assests：静态资源目录，存放图片、样式文件等

Vue项目开发流程

示例：

<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
    </div>

    <button @click="showTel">点击显示手机号码</button>
    <button @click="changeName">点击修改姓名</button>
    <button @click="changeAge">点击修改年龄</button>
</template>

<script lang="ts" setup name="MyPerson">
    // 导入
    import { ref } from 'vue';

    // 数据
    let name = ref("张三");
    let age = ref(18);
    let tel: string = "138xxxxxxxx";

    console.log(`姓名为：${name.value}`);
    console.log(`年龄为：${age.value}`);


    // 方法
    function showTel(): void {
        alert(tel);
    }

    function changeName(): void {
        name.value = "李四";
    }

    function changeAge(): void { 
        age.value++;
    }

onMounted(() => {
        console.log("Vue Mounted ...")
    })

</script>

setup：是一个标识，告诉Vue需要进行一些预处理，让我们可以更简洁的使用组合式API
ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性value
onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行
注意事项：在Vue中的组合式API使用时，是没有this对象的，this对象是undefined

ElementPlus

ElementPlus是Vue组件库，使用步骤如下：

创建Vue项目
在项目下安装ElementPlus：npm install element-plus@2.4.4 --save
main.js中引入ElementPlus（参照官方文档）：

// 引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app');

访问ElementPlus官方文档，复制组件代码进行细微修改即可

组件使用要点

表格组件使用的关键地： - 表格组件使用时关键点在于清楚表格中绑定的数据data，以及每一列要展示的属性信息

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
...
]
</script>

分页组件中的相关属性可以查看官方文档，并通过提供的示例代码了解即可

默认ElementPlus的组件是英文的，如果希望使用中文语言，在main.js中进行以下修改：

import locale from 'element-plus/lib/locale/lang/zh-cn' // 注意!!!这句必须跟在const app= xxxx 之后 app.use(ElementPlus, { locale }); 3. Dialog对话组件使用的关键点

通过model-value/v-model给定的boolean值，来控制Dialog的显示与隐藏 4. 表单组件使用的关键点：
表单项数据采集：v-model数据绑定
表单数据提交：事件绑定

前端 Vue ElementPlus

许可协议: CC BY 4.0