Vue3项目创建及相关配置

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

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

  1. Model(模型):表示应用程序的数据和业务逻辑。在Vue中,模型通常是一个JavaScript对象。

  2. View(视图):表示用户界面。在Vue中,视图通常是使用HTML模板构建的。

  3. 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-menuactive-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.效果测试:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/394807.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

混合现实技术在虚拟培训、销售展示及教育科研等领域的应用方向

混合现实技术是虚拟现实技术的进一步发展方向&#xff0c;与传统的沉浸式虚拟现实技术相比混合现实技术能够为用户提供更多元化的观看场景。通过将虚拟物体与现实世界融合的全新形式为&#xff0c;包括虚拟训练、产品销售、教育科研等领域赋能。 混合现实技术中最为重要的是显示…

【JUC】并发编程与源码分析 1-7章

1 线程基础知识复习 1把锁&#xff1a;synchronized&#xff08;后面细讲&#xff09; 2个并&#xff1a; 并发&#xff08;concurrent&#xff09;&#xff1a;是在同一实体上的多个事件&#xff0c;是在一台机器上“同时”处理多个任务&#xff0c;同一时刻&#xff0c;其…

程序员保碗之策

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 1. **持续深化技术实力&#xff1a;从基础到前沿**夯实基础紧跟技术前沿跨领域融合 2. **提升实战能力&#xff1a;从项目到产品**参与实际项目自主实践产品思维 3. **建立个人品牌与影响力&#xff…

vs+qt一些问题

一直遇到的两个问题&#xff0c;今天解决了 1、 因为前后端分离&#xff0c;前端写完了&#xff0c;后端还在一直修改&#xff0c;但是每次都是单独打开的后端的sln&#xff0c;所以会出现这个&#xff0c;把前端的模块删掉就好了。 2、打开vs项目&#xff0c;很多报错&#…

sql注入靶场sqli-labs常见sql注入漏洞详解

目录 sqli-labs-less1 1.less1普通解法 1.在url里面填写不同的值&#xff0c;返回的内容也不同&#xff0c;证明&#xff0c;数值是进入数据库进行比对了的&#xff08;可以被注入&#xff09; 2.判断最终执行的sql语句的后面还有内容吗&#xff0c;并且能够判断是字符型的拼接…

MySQL:VIEW视图

概述 MySQL 视图&#xff08;View&#xff09;是一种虚拟存在的表&#xff0c;同真实表一样&#xff0c;视图也由列和行构成&#xff0c;但视图并不实际存在于数据库中。行和列的数据来自于定义视图的查询中所使用的表&#xff0c;并且是在使用视图时动态生成的。 数据库中只…

Unity物理模块 之 2D效应器

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正​ 1.什么是效应器 2D 效应器 - Unity 手册 2D 效应器是与 2D 碰撞器一起使用的组件&#xff0c;相当于预先编写好的插…

⭕️【论文阅读】《Interactive Class-Agnostic Object Counting》

[2309.05277] Interactive Class-Agnostic Object Counting (arxiv.org) code&#xff1a; cvlab-stonybrook/ICACount: [ICCV23] Official Pytorch Implementation of Interactive Class-Agnostic Object Counting (github.com) 目录 Abstract Abstract 我们提出了一个新…

【合并 K 个升序链表】python刷题记录

R4-分治篇 目录 最小堆方法 分治法 ps: 如果只是数组就很好处理了 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def mergeKLists(self, lists…

Spring AOP 源码剖析

一.AOP基础概念 切面&#xff08;Aspect&#xff09;&#xff1a;切面是跨越多个类的关注点模块化&#xff0c;如事务管理。切面由切点和通知组成。连接点&#xff08;Join Point&#xff09;&#xff1a;在程序执行过程中某个特定的点&#xff0c;如方法调用或异常抛出。在Sp…

kafka基础概念二

1.Kafka中主题和分区的概念 1.主题Topic 主题-topic在kafka中是一个逻辑的概念&#xff0c;kafka通过topic将消息进行分类。不同的topic会被订阅该topic的消费者消费 但是有一个问题&#xff0c;如果说这个topic中的消息非常非常多&#xff0c;多到需要几T来存&#xff0c;因…

区块链的搭建和运维4

区块链的搭建和运维4 (1) 搭建基于MySQL分布式存储的区块链 1.构建单群组网络节点 使用开发部署工具构建单群组网络节点&#xff0c;命令如下&#xff1a; bash build_chain.sh -l 127.0.0.1:4 -p 30300,20200,85452. 启动 MySQL 并设置账户密码 输入如下命令&#xff0c;…

关于Git使用不成功的问题解决方案记录

关于Git使用不成功的问题解决方案记录 前言代理连接不成功总结 前言 项目中建立了Git小仓库&#xff0c;但是在使用中出现了无法push新的代码&#xff0c;显示端口出现问题&#xff0c;发现网站和端口都没有问题&#xff0c;可以打开网站。但是还是连接失败&#xff0c;无法下…

MySQL笔记(十):MySQL管理

一、用户管理 #用户管理 -- 原因&#xff1a;当我们做项目开发时&#xff0c;可以根据不同的开发人员&#xff0c;赋给她相应的mysql操作权限。 -- 所以&#xff0c;mysql数据库管理人员&#xff08;root&#xff09;&#xff0c;根据需要创建不同的用户&#xff0c;赋给相应的…

android中打包apk体积优化方案

1.在配置文件AndroidManifest中新增 android:extractNativeLibs"true" 2.在模块build文件下配置支持的cpu,一般配置64的就行了,多配一种so库体积大一倍&#xff0c;择优。 ndk { abiFilters arm64-v8a } 3.在模块builde文件下配置混淆除去无用的资源文件 注:三种…

【Kubernetes】Deployment 的状态

Deployment 的状态 Deployment 控制器在整个生命周期中存在 3 3 3 种状态&#xff1a; 已完成&#xff08;Complete&#xff09;进行中&#xff08;Progressing&#xff09;失败&#xff08;Failed&#xff09; 通过观察 Deployment 的当前特征&#xff0c;可以判断 Deploym…

Win32注册表操作

注册表的概念 注册表是一个存储计算机配置信息的数据库&#xff0c;用于存储计算机上的硬件、安装的软件、系统设置以及用户账户配置等重要信息。对注册表的编辑不当可能会影响计算机的正常运行。应用程序可以调用API函数来对注册表进行增、删等操作。 注册表结构 运行Regedi…

Linux学习笔记:Linux基础知识汇总(个人复习版)

常用命令&#xff1a; 1、ls -a&#xff1a;显示所有文件&#xff08;包括隐藏文件&#xff09;&#xff0c;简洁版 -l&#xff1a;显示所有文件&#xff0c;详细版 -R&#xff1a;显示所有文件以及子目录下文件&#xff0c;简洁版 可以搭配使用。 2、netstat -i&#x…

priority_queue模拟实现【C++】

文章目录 全部的实现代码放在了文章末尾什么是适配器模式&#xff1f;准备工作包含头文件定义命名空间类的成员变量什么是仿函数&#xff1f;比较仿函数在priority_queue中的作用通过传入不同的仿函数可以做到大堆和小堆之间的切换通过传入不同的仿函数可以做到改变priority_qu…

书生.浦江大模型实战训练营——(三)Git基本操作与分支管理

最近在学习书生.浦江大模型实战训练营&#xff0c;所有课程都免费&#xff0c;以关卡的形式学习&#xff0c;也比较有意思&#xff0c;提供免费的算力实战&#xff0c;真的很不错&#xff08;无广&#xff09;&#xff01;欢迎大家一起学习&#xff0c;打开LLM探索大门&#xf…