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）
设置镜像源：

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

复制代码

---

创建Vue3项目

这里利用vite直接创建，vite是下一代前端开辟与构建工具
1.利用npm直接初始化

1. npm create vite@latest

复制代码

这里大概必要利用管理员身份并跳转盘符到必要创建vue项目的指定位置：
2.选择项目模板 Vue

3.选择语言结构 JavaScript

4.以管理员身份运行 VS Code 打开刚刚创建的项目文件夹 easyvuea，
利用 Ctrl键+波浪线~ 打开终端并输入下令，安装依靠包

1. npm install

复制代码

5.启动项目

1. 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路由组件

1. npm install vue-router

复制代码

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

1. import { createRouter,createWebHashHistory } from "vue-router";
3. const router=createRouter({
4.     history:createWebHashHistory(),
5.     routes:[
6.         {path:'/easya',component:()=>import("../views/easya.vue")}
7.     ]
8. });
9. export default router;

复制代码

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

1. import router from './router'

复制代码

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

6.访问

---

绑定命据和函数

更多vue干系的利用教程参考官网：Vue官网
vue3保举利用setup函数绑定命据
在easya.vue中编写代码：

• 利用ref函数声明相应式的值范例数据的初始值
  
• 在setup函数中，对ref()函数声明的数据举行取值和赋值时,必要利用.value
  
• 在template组件中利用ref()声明的数据，直接利用即可,不必要利用.value
  

1. <script setup>
2.     import {ref} from 'vue';
3.     const num=ref(12);
4.     const show=ref(true);
5.     const arr=ref([12,34,56,78]);
6.     const staffData=ref({});
7.     const changeNum=function(){
8.         console.log("changNum method")
9.         num.value=num.value+1;
10.     }
11.     const changeShow=()=>{
12.         show.value=!show.value;
13.     }
14. </script>
15. <template>
16.     <h1 v-text="num" v-if="show"></h1>
17.     <button @click="changeNum">按钮</button>
18.     <button @click="changeShow">是否显示</button>
20.     <div v-for="(item,index) in arr" class="box">{{ index }}:{{ item }}</div>
21. </template>
22. <style>
23.     .box{
24.         height: 50px;
25.         width: 50px;
26.         border: 1px solid black;
27.         margin: 10px;
28.     }
29. </style>

复制代码

---

axios异步哀求

1.在项目中安装axios，利用下令

1. npm install axios

复制代码

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

1. import axios from 'axios';
3. export default function (options) {
4.     //配置每次发送请求都从sessionStorage中获取名字叫token的数据,
5.     //添加到请求头部的Authorization属性中
7.     //Object.assign用于合并对象的数据
8.     options.headers = Object.assign(
9.         { Authorization: sessionStorage.getItem('token') },
10.         options.headers || {}
11.     );
12.     //axios()   返回一个promise对象，用于异步请求
13.     //options是一个对象，其中包含了许多用于配置请求的参数，
14.     //例如请求的url、请求方法（GET、POST等）、请求头等
15.     return axios(options)
16.         .then(({ status, data, statusText }) => {
17.             //该函数在请求成功并返回数据时被调用
18.             //status：HTTP状态码，例如200表示请求成功。
19.             //data：服务器返回的数据。
20.             // statusText：HTTP状态文本，例如"OK"表示请求成功。
21.             if (status == 200) {
22.                 return data;
23.             } else {
24.                 throw new Error(statusText);
25.             }
26.         })
27.         .catch(e=>{
28.             return Promise.reject(e);
29.             //return Promise.reject(e.message);
30.         });
31. }

复制代码

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

1. import http from '../util/http.js';
3. const API={
4.     get:(url)=>{return http({url:url,method:'get'})}
5. };
6. export default API;

复制代码

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

1. <script setup>
2.     import {ref,onMounted} from 'vue';
3.     import easyapi from '../api';
5.     const staffData=ref({});
6.     //在挂载页面时获取员工数据用于填入表中
7.     onMounted(async function(){
8.         let result=await easyapi.get("/api/staff");
9.         staffData.value=result.data;
10.         console.log(staffData.value);
11.     });
12.     //主动获取员工数据的方法
13.     const getData=async()=>{
14.         staffData.value=await easyapi.get("/api/staff");
15.         console.log(staffData.value);
16.     }
17.     //......
18. </script>
19. <template>
20.     <table>
21.         <tr><td>ID</td><td>CODE</td><td>NAME</td><td>SALARY</td></tr>
22.         <tr v-for="(item,index) in staffData"> <td>{{ item.id }}</td><td>{{ item.code }}</td><td>{{ item.name }}</td><td>{{ item.salary }}</td></tr>
23.     </table>
25.     <button @click="getData">获取数据</button>
26. </template>
27. <style>
28. </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 文件中设置如下代码：

1. export default defineConfig({
2.   plugins: [vue()],
3.   server:{
4.     // 配置vite冷启动项目自动使用浏览器访问首页
5.     open:true,
6.     proxy: {  
7.       '/api': {
8.         target: 'http://localhost:8080',
9.         changeOrigin: true,
10.         rewrite: (path) => path.replace(/^\/api/, ''),
11.       },
12.     }
13.   }
14. })

复制代码

---

利用ElementUI

具体利用教程参考官网：Element Plus
Element Plus是一个基于 Vue 3，面向计划师和开辟者的组件库
1.在Vue3中利用下令安装element-plu

1. npm install element-plus --save

复制代码

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

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

复制代码

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

1. <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>

1. <script setup>
2. </script>
4. <template>
5.     <div class="common-layout">
6.       <el-container>
7.         <el-header>Header</el-header>
8.         <el-container>
9.           <el-aside width="200px">
10.             <el-menu
11.         active-text-color="#ffd04b"
12.         background-color="#545c64"
13.         class="el-menu-vertical-demo"
14.         default-active="2"
15.         text-color="#fff"
16.         @open="handleOpen"
17.         @close="handleClose"
18.         router="true"
19.       >
20.         <el-sub-menu index="1">
21.           <template #title>
22.             <el-icon><location /></el-icon>
23.             <span>员工管理</span>
24.           </template>
25.           <el-menu-item-group title="Group One">
26.             <el-menu-item index="1-1" route="stafflist">员工列表</el-menu-item>
27.             <el-menu-item index="1-2">item two</el-menu-item>
28.           </el-menu-item-group>
29.           <el-menu-item-group title="Group Two">
30.             <el-menu-item index="1-3">item three</el-menu-item>
31.           </el-menu-item-group>
32.           <el-sub-menu index="1-4">
33.             <template #title>item four</template>
34.             <el-menu-item index="1-4-1">item one</el-menu-item>
35.           </el-sub-menu>
36.         </el-sub-menu>
37.         <el-menu-item index="2">
38.           <el-icon><icon-menu /></el-icon>
39.           <span>Navigator Two</span>
40.         </el-menu-item>
41.         <el-menu-item index="3" disabled>
42.           <el-icon><document /></el-icon>
43.           <span>Navigator Three</span>
44.         </el-menu-item>
45.         <el-menu-item index="4">
46.           <el-icon><setting /></el-icon>
47.           <span>Navigator Four</span>
48.         </el-menu-item>
49.       </el-menu>
50.           </el-aside>
51.           <el-main>
52.             <router-view></router-view>
53.           </el-main>
54.         </el-container>
55.       </el-container>
56.     </div>
57. </template>
59. <style>
60. </style>

复制代码

2.新建stafflist.vue用于获取后端的staff员工数据并存放到列表中展示，
在组件库找到符合的表格组件，这里简化了部门样式

1. <script setup>
2.     import {ref,onMounted} from 'vue';
3.     import easyapi from '../api';
4.     //定义绑定的数据
5.     const tableData=ref([]);
7.     //挂载页面时查询数据
8.     onMounted(async function(){
9.         let result=await easyapi.get("/api/staff");
10.         tableData.value=result.data;
11.     });
13. </script>
15. <template>
16.   <el-table
17.     :data="tableData"
18.     style="width: 100%"
19.   >
20.     <el-table-column prop="id" label="ID" width="180" />
21.     <el-table-column prop="code" label="编号" width="180" />
22.     <el-table-column prop="name" label="姓名" />
23.     <el-table-column prop="salary" label="薪资" />
24.   </el-table>
25. </template>
27. <script></script>

复制代码

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

1. import { createRouter,createWebHashHistory } from "vue-router";
3. const router=createRouter({
4.     history:createWebHashHistory(),
5.     routes:[
6.         {path:'/easyb',
7.             component:()=>import("../views/easyb.vue"),
8.             children:[{path:'/stafflist',component:()=>import("../views/stafflist.vue")}]
9.         }
10.     ]
11. });
12. export default router;

复制代码

4.结果测试：