01. 零基础小白直接上手Vue

1183 字约 3 分钟读完841 次阅读更新于 2026/5/3

本节课最终实现效果

前置内容

HTML、CSS、JS

https://www.runoob.com/

环境准备

Nodejs20+、Pycharm（VsCode）

Nodejs20： https://nodejs.org/zh-tw/download/

下载Pycharm：https://www.jetbrains.com/zh-cn/pycharm/download

镜像

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

使用官方的最简单脚手架

Vue 官网：https://cn.vuejs.org/

npm create vue@latest

安装完成：

学习：v-if v-for v-on( @ ) v-bind( : )

再 Pycharm 里面启动 vue 工程

卸载默认的调试工具 devtools

npm uninstall vite-plugin-vue-devtools

删除配置

集成 ELement-plus

官网：https://element-plus.org/zh-CN/

安装：

npm install element-plus -S

main.js 里面引入组件库

导入中文包

import zhCn from 'element-plus/es/locale/lang/zh-cn'

本节课 App.vue 的代码

<template>
  <div>
    <div style="text-align: center; font-size: 30px; margin-bottom: 20px; font-weight: bold">青哥哥带你学习FastAPI + Vue3</div>
    <div style="text-align: center; margin-bottom: 50px; font-size: 18px">学生信息管理页面（增删改查）</div>
    <div style="width: 70%; margin: 30px auto">
      <div style="margin-bottom: 10px">
        <el-input clearable @clear="load" style="width: 300px" v-model="data.name" placeholder="请输入姓名查询"></el-input>
        <el-button type="info" @click="load" style="margin-left: 5px; margin-right: 20px">搜索</el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </div>

      <div>
        <el-table border stripe :data="data.tableData" style="width: 100%">
          <el-table-column prop="no" label="学号" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="clazz" label="班级" />
          <el-table-column prop="major" label="专业" />
          <el-table-column prop="college" label="学院" />
          <el-table-column prop="phone" label="手机" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="address" label="地址" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="remove()">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 10px">
        <el-pagination background layout="total, prev, pager, next" @current-change="load" v-model:current-page="data.pageNum"
                       v-model:page-size="data.pageSize" :total="data.total" />
      </div>
    </div>
  </div>
</template>


<script setup>
import {reactive} from "vue";

const data = reactive({
  name: null,
  pageNum: 1,
  pageSize: 2,
  total: 4,
  tableData: []
})

const handleAdd = () => {
  // 新增数据
}

const handleEdit = (row) => {
  // 编辑行数据
  console.log(row)
}

const remove = (id) => {
  // 根据ID删除数据
}

const load = () => {
  data.tableData = [
      { no: '20231001', name: '小林1', clazz: '计科1班', major: '计算机科学与技术', college: '计算机学院', phone: '13899887766',
      email: 'xiaolin@163.com', address: '安徽合肥' },
    { no: '20231002', name: '小林2', clazz: '计科1班', major: '计算机科学与技术', college: '计算机学院', phone: '13899887766',
      email: 'xiaolin@163.com', address: '安徽合肥' },
    { no: '20231003', name: '小林3', clazz: '计科1班', major: '计算机科学与技术', college: '计算机学院', phone: '13899887766',
      email: 'xiaolin@163.com', address: '安徽合肥' },
    { no: '20231004', name: '小林4', clazz: '计科1班', major: '计算机科学与技术', college: '计算机学院', phone: '13899887766',
      email: 'xiaolin@163.com', address: '安徽合肥' },
  ]
}
load()  // 加载数据
</script>


<style scoped>

</style>