Vue3项目创建及相关配置

Vue是一种用于构建用户界面的JavaScript框架。它采用了一种称为MVVM（Model-View-ViewModel）的架构模式。

MVVM是一种将用户界面与业务逻辑和数据分离的设计模式。它包括三个部分：

Model（模型）：表示应用程序的数据和业务逻辑。在Vue中，模型通常是一个JavaScript对象。

View（视图）：表示用户界面。在Vue中，视图通常是使用HTML模板构建的。

ViewModel（视图模型）：充当模型和视图之间的中间层。它通过数据绑定机制将模型数据自动更新到视图上，并将用户交互事件传递给模型。在Vue中，ViewModel是由Vue实例扮演的。

Vue的核心思想是通过数据驱动视图，使得界面的渲染和更新更加简单高效。当模型数据发生变化时，Vue能够自动更新对应的视图。同时，用户在视图上的操作也能够通过ViewModel传递给模型进行处理。

安装配置nodejs

NPM的全称是Node Package Manager

中文名为Node.js包管理器，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。使用NPM可以方便地从一个全球的代码库中获取并安装Node.js模块，这些模块可以用于构建应用程序、工具和包等。开发者可以通过NPM来搜索、安装、更新和卸载各种Node.js模块。此外，NPM还提供了发布和共享代码、管理依赖、版本控制等功能，可以帮助开发者更方便地开发和分享代码。

1.安装nodejs参考：nodejs安装和环境配置

2.设置环境变量，在系统变量path中添加nodejs的安装路径

3.管理员身份运行cmd

node -v 查看node的版本
npm -v 查看npm的版本（新版的node安装自带安装npm）

设置镜像源：

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

创建Vue3项目

这里使用vite直接创建，vite是下一代前端开发与构建工具

1.使用npm直接初始化

npm create vite@latest

这里可能需要使用管理员身份并跳转盘符到需要创建vue项目的指定位置：

2.选择项目模板 Vue

3.选择语言结构 JavaScript

4.以管理员身份运行 VS Code 打开刚刚创建的项目文件夹 easyvuea，

使用 Ctrl键+波浪线~ 打开终端并输入命令，安装依赖包

npm install

5.启动项目

npm run dev

6.按住Ctrl键访问

项目结构

在 VS Code 中安装Vue扩展

vite.config.js 可以配置项目启动自动打开项目首页

ctrl+`打开终端管理器输入npm run dev启动项目尝试

配置路由

Vue是一种用于构建单页面应用程序（SPA）的JavaScript框架。SPA指的是只有一个HTML页面的应用程序，而不是多个页面之间的传统网页应用程序。

在传统的多页面应用程序中，每个页面都是独立的，用户每次点击链接都会重新加载整个页面。而在单页面应用程序中，只有一个页面，并且页面内容的切换是通过动态加载和更新组件来实现的。

Vue通过内置的Vue Router插件提供了路由功能来实现单页面应用程序的页面切换。Vue Router允许开发者定义不同路由对应的组件，并通过路由链接或者程序控制导航的方式进行页面切换。

1.创建views文件夹，并在其中创建所需要的vue文件：

2.在该项目中安装vue-router路由组件

npm install vue-router

3.在src中创建router文件夹，在文件夹中创建index.js文件，router/index.js就是路由的配置文件

import { createRouter,createWebHashHistory } from "vue-router";

const router=createRouter({
    history:createWebHashHistory(),
    routes:[
        {path:'/easya',component:()=>import("../views/easya.vue")}
    ]
});
export default router;

4.在main.js文件中引用路由配置

import router from './router'

5.在App.vue文件中添加路由占位符

6.访问

绑定数据和函数

更多vue相关的使用教程参考官网：Vue官网

vue3推荐使用setup函数绑定数据

在easya.vue中编写代码：

使用ref函数声明响应式的值类型数据的初始值
在setup函数中，对ref()函数声明的数据进行取值和赋值时,需要使用.value
在template组件中使用ref()声明的数据，直接使用即可,不需要使用.value

<script setup>
    import {ref} from 'vue';
    const num=ref(12);
    const show=ref(true);
    const arr=ref([12,34,56,78]);
    const staffData=ref({});
    const changeNum=function(){
        console.log("changNum method")
        num.value=num.value+1;
    }
    const changeShow=()=>{
        show.value=!show.value;
    }
</script>
<template>
    <h1 v-text="num" v-if="show"></h1>
    <button @click="changeNum">按钮</button>
    <button @click="changeShow">是否显示</button>

    <div v-for="(item,index) in arr" class="box">{{ index }}:{{ item }}</div>
</template>
<style>
    .box{
        height: 50px;
        width: 50px;
        border: 1px solid black;
        margin: 10px;
    }
</style>

axios异步请求

1.在项目中安装axios，使用命令

npm install axios

2.在src中新建文件夹util工具包，其中新建文件http.js，代码如下：

import axios from 'axios';

export default function (options) {
    //配置每次发送请求都从sessionStorage中获取名字叫token的数据,
    //添加到请求头部的Authorization属性中

    //Object.assign用于合并对象的数据
    options.headers = Object.assign(
        { Authorization: sessionStorage.getItem('token') },
        options.headers || {}
    );
    //axios()   返回一个promise对象，用于异步请求
    //options是一个对象，其中包含了许多用于配置请求的参数，
    //例如请求的url、请求方法（GET、POST等）、请求头等
    return axios(options)
        .then(({ status, data, statusText }) => {
            //该函数在请求成功并返回数据时被调用
            //status：HTTP状态码，例如200表示请求成功。
            //data：服务器返回的数据。
            // statusText：HTTP状态文本，例如"OK"表示请求成功。
            if (status == 200) {
                return data;
            } else {
                throw new Error(statusText);
            }
        })
        .catch(e=>{
            return Promise.reject(e);
            //return Promise.reject(e.message);
        });
}

3.在src中新建api文件夹，在文件夹中创建index.js封装获取url的方法，代码：

import http from '../util/http.js';

const API={
    get:(url)=>{return http({url:url,method:'get'})}
};
export default API;

4.在easya.vue页面中编写代码，发送请求

<script setup>
    import {ref,onMounted} from 'vue';
    import easyapi from '../api';

    const staffData=ref({});
    //在挂载页面时获取员工数据用于填入表中
    onMounted(async function(){
        let result=await easyapi.get("/api/staff");
        staffData.value=result.data;
        console.log(staffData.value);
    });
    //主动获取员工数据的方法
    const getData=async()=>{
        staffData.value=await easyapi.get("/api/staff");
        console.log(staffData.value);
    }
    //......
</script>
<template>
    <table>
        <tr><td>ID</td><td>CODE</td><td>NAME</td><td>SALARY</td></tr>
        <tr v-for="(item,index) in staffData"> <td>{{ item.id }}</td><td>{{ item.code }}</td><td>{{ item.name }}</td><td>{{ item.salary }}</td></tr>
    </table>

    <button @click="getData">获取数据</button>
</template>
<style>
</style>

Vue的 onMounted 是Vue 3中的一个生命周期钩子函数（Lifecycle Hook），它在组件挂载（Mount）到DOM之后被调用。使用onMounted可以在组件挂载到DOM后执行一些异步操作，比如发送网络请求、获取数据、设置事件监听等。

async 关键字用于声明一个函数是异步函数，即该函数可能会返回一个Promise对象，其中包含函数执行结果。

await 关键字只能在async函数中使用。它会使函数暂停执行，直到await后面的异步操作完成并返回结果。

Vue 3中的生命周期函数

onBeforeMount: 在组件挂载（即插入DOM）之前被调用。这个生命周期阶段通常用于在组件被渲染之前获取数据或执行其他准备工作。
onMounted: 在组件挂载之后被调用。这个生命周期阶段通常用于在组件已经插入DOM之后执行某些操作，例如启动动画或定时任务。
onBeforeUpdate: 在组件更新之前被调用。这个生命周期阶段通常用于在组件更新之前获取数据或执行其他准备工作，例如重新渲染之前的清理工作。
onUpdated: 在组件更新之后被调用。这个生命周期阶段通常用于在组件已经更新之后执行某些操作，例如根据新的数据重新渲染UI。
onBeforeUnmount: 在组件卸载（即从DOM中移除）之前被调用。这个生命周期阶段通常用于在组件卸载之前执行清理操作，例如取消事件监听器或定时任务。
onUnmounted: 在组件卸载之后被调用。这个生命周期阶段通常用于在组件已经从DOM中移除之后执行某些操作，例如清理资源或记录日志。

注意：默认情况下，浏览器会执行同源策略，即只允许来自相同源的请求访问资源，默认不允许跨域访问。这是为了防止恶意网站利用跨域请求窃取用户的敏感信息或执行恶意操作。

在某些情况下，我们可能需要允许不同源的请求访问后端资源。在Spring框架中，通过为后端控制类添加 @CrossOrigin 注解，可以控制浏览器是否允许跨域请求访问后端资源，并设置允许跨域请求的一些细节。

成功获取数据：

5.配置代理

为了避免因后端服务器迁移造成的麻烦，在 vite.config.js 文件中配置如下代码：

export default defineConfig({
  plugins: [vue()],
  server:{
    // 配置vite冷启动项目自动使用浏览器访问首页
    open:true,
    proxy: {  
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  }
})

使用ElementUI

具体使用教程参考官网：Element Plus

Element Plus是一个基于 Vue 3，面向设计师和开发者的组件库

1.在Vue3中使用命令安装element-plu

npm install element-plus --save

2.在main.js中引入代码如下并添加 use(ElementPlus)

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

3.在组件库中找到想要的样式，复制代码在easya.vue中使用，如警告按钮：

<el-button type="warning">Warning</el-button>

使用效果如下：

整合：

1.新建easyb.vue

从Element的组件库中找到布局容器的代码加到 template标签中

找到侧栏菜单，替换 Aside 标签内容

修改一级菜单的文本内容为员工管理，二级菜单的文本为员工列表

在菜单的 <el-menu> 标签上设置路由属性 router="true"

在员工列表的 <el-menu-item index="1-1"> 标签添加 route="stafflist" 用于跳转

在 <el-main> 标签之间添加路由占位符 <router-view></router-view>

<script setup>
</script>

<template>
    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router="true"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>员工管理</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1" route="stafflist">员工列表</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<style>
</style>

2.新建stafflist.vue用于获取后端的staff员工数据并存放到列表中展示，

在组件库找到合适的表格组件，这里简化了部分样式

<script setup>
    import {ref,onMounted} from 'vue';
    import easyapi from '../api';
    //定义绑定的数据
    const tableData=ref([]);

    //挂载页面时查询数据
    onMounted(async function(){
        let result=await easyapi.get("/api/staff");
        tableData.value=result.data;
    });

</script>

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="code" label="编号" width="180" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="salary" label="薪资" />
  </el-table>
</template>

<script></script>

3.在router文件夹下的index.js中配置路由：新增 children:[...]

import { createRouter,createWebHashHistory } from "vue-router";

const router=createRouter({
    history:createWebHashHistory(),
    routes:[
        {path:'/easyb',
            component:()=>import("../views/easyb.vue"),
            children:[{path:'/stafflist',component:()=>import("../views/stafflist.vue")}]
        }
    ]
});
export default router;

4.效果测试：