网站开发 网站设计世界搜索引擎公司排名
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'
