java学习19VUE

VUE

NPM

npm的全称是Node Package Manager

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

下载安装NODEJS(官网下载即可)

安装后即可以使用npm命令

设置镜像

npm config set registry https://registry.npm.taobao.org

 或https://mirrors.huaweicloud.com/repository/npm/

一个是淘宝镜像一个是华为镜像

查看是否已经成功设置镜像

npm config get registry

创建VUE3项目

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

vite的优点：

• 快速的开发体验：vite采用浏览器原生的模块化系统，避免了传统构建工具的静态打包和编译，从而提高了开发效率和构建速度。它还支持HotModuleReplacement(HMR)和快速刷新等功能，可以实时更新代码和预览修改效果，让开发者专注于开发过程中的实际需求
• 丰富的功能：vite对TypeScript、JSX、CSS等支持开箱即用，无需额外配置。它还提供了优化的构建选项，可以选择"多页应用"或"库"模式的预配置Rollup构建
• 灵活的API和完整TypeScript类型：vite提供完全类型化的API和灵活的API，使得开发者可以更加方便地使用它进行开发
• 插件化的架构：vite允许开发者通过插件来扩展其功能，这使得vite可以适应各种不同的项目需求
• 更好的兼容：vite使用ES Module作为模块系统，比CommonJS更现代化、更高效。同时，它还提供了兼容CommonJS的方案，使得一些依赖CommonJS的库也可以在vite中使用
• 轻量级的解决方案：vite是一个非常轻量级的解决方案，其核心代码非常小，这使得它可以在各种设备上快速运行，包括在低性能的设备上
• 社区支持：vite得到了广泛的社区支持和维护，这意味着开发者可以从社区中获得帮助和支持，并且可以快速地解决遇到的问题

1.使用npm安装yarn工具

npm install -g yarn

2.使用yarn安装vite vue项目填入项目名yarn create vite

也可以使用npm直接初始化npm create vite@latest

3.选择项目模板

4.选择语言结构

5.执行安装依赖包

用vscode打开创建的项目文件夹，打开终端

npm install

6.使用yarn dev启动项目

npm run dev

7.访问

配置路由

在views文件夹中创建所需要的vue文件

在src中创建router文件夹，在此文件夹中创建index.js文件，

router/index.js就是路由的配置文件

想要使用路由必须在该项目中安装vue-router组件

npm install vue-router

定义路由文件

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

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

访问

axios异步请求

在项目中安装axios

npm install axios

在src中新建文件夹util，新建文件http.js

在src中新建文件夹api，在文件夹中创建index.js

新建一个vue页面(做好路由)，发送请求

配置代理

绑定数据和函数

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

        使用ref函数声明响应式的值类型数据的初始值

        在setup函数中，对ref()函数声明的数据进行取值和赋值时，需要使用.value

        在template组件中使用ref()声明的数据，直接使用即可，不需要使用.value

使用reactive函数声明响应式引用对象

也可以使用ref声明应用对象

        如果要声明一个引用类型(对象或数组)的相应数据，推荐使用reactive函数声明

        ref()也可以，但是reactive声明的数据可以直接对属性赋值，但是ref声明的数据

        还是需要使用.value进行赋值

使用markRaw函数标记应用类型的数据，只相应自身对象，不要深入绑定相应，只能对该对象整体赋值，内部不做绑定，可以减少资源的消耗

        使用ref绑定的数据都会在vue中开启深度的绑定，但是一些纯展示型的数据是不会对内部数据进行修改的，可以使用markRaw标记该数据，已达到优化资源的效果

使用ElementUI

在VUE3中要使用element-plu，使用

npm install element-plus --save

命令安装

全局引入，在main.js中直接引入

import ElementPlus from 'element-plus'

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