十一、Vue3

一、Vue介绍

Vue.js 是一个构建用户界面的 JavaScript 框架，Vue.js 的核心思想是“数据驱动视图”。它通过简单、灵活的 API 和响应式的数据绑定方式，实现了组件化、模块化的开发方式，使得开发者可以更加高效地构建 Web 应用程序。

二丶第一个vue程序

1、下载node.js
node.js是javascript运行时环境

2、安装vue3，即安装vue-cli

npm install -g @vue/[email protected]

3、创建一个项目
方法一

vue create my-project

运行

npm run serve

方法二(推荐)

npm create vite@latest

接下来会提示你输入项目名称
运行

npm run dev

运行成功页面

三、Axios

Vue并没有提供通信功能，所以要使用axios来实现前后端通信

import axios from 'axios';
axios.get('/api/data')
  .then(function (response) {
    // 处理请求成功时的逻辑
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理请求失败时的逻辑
    console.log(error);
  });

四、Router

在前端开发中，页面的跳转导航和状态管理都是非常重要的功能。Vue框架提供了一个名为Vue Router的插件，可用于方便地实现单页Web应用（Single Page Application）的导航和路由。

五、ElementUI

ElementUI是一个基于Vue.js的UI组件库，提供了一套常用的UI组件和交互方式，包括表单、弹窗、日期选择、分页、下拉框等，还支持国际化、自定义主题等功能。

下面是一个使用ElementUI进行表单提交和校验的基本示例：



  
    
    
    
    
    
  
  
    

      
        
          
        
        
          
        
        
          提交