Vue宏观理解

文章目录

1 Vue是什么
2 前端运行环境和工具
3 环境搭建
- 3.1 node.js安装
- 3.2 Vite环境安装
4 Vue项目开发
- 4.1 Vue项目开发开发方式
- 4.2 Vue项目结构
- 4.3 启动Vue项目
- 4.4 Vue开发
- 4.4 Vue工程运行流程

1 Vue是什么

Vue是一款Web前端JavaScript 框架；
官网：https://vuejs.org/

2 前端运行环境和工具

1、node.js 是一个开源跨平台的 JavaScript 运行时环境，可以理解成java中的jdk；
官网：https://nodejs.org/

2、npm是JavaScript依赖包管理工具，可以进行前端项目的打包、依赖下载等，可以理解成java中的maven；
官网：https://www.npmjs.com/

3、Vite是快速构建前端Vue项目的脚手架，可以理解为开发Spring Boot的Spring Initializr快速构建工具；
官网：https://cn.vitejs.dev/

在这里插入图片描述

3 环境搭建

3.1 node.js安装

【解压即可用】
下载：https://nodejs.org
安装：解压即完成安装；(使用的是zip压缩包)
【配置环境变量】
1、在 D:\dev\node-v20.12.0-win-x64 下创建2个文件夹：
node_global （依赖库）
node_cache （缓存）
2、在D:\dev\node-v20.12.0-win-x64目录下cmd进入dos窗口，执行：
npm config set prefix “D:\dev\node-v20.12.0-win-x64\node_global”
npm config set cache “D:\dev\node-v20.12.0-win-x64\node_cache”
3、查看有没有设置成功：
npm config get prefix
npm config get cache
配置环境变量Path，在Path变量中添加如下路径：
D:\dev\node-v20.12.0-win-x64
D:\dev\node-v20.12.0-win-x64\node_global
在任意目录打开dos窗口查看是否配置成功：
node -v
npm -v
注：Node.js已经自带npm，安装Node.js时即已安装了npm，故不需要再安装npm；
【配置npm仓库】

在使用npm命令时，默认是从国外的官方仓库下载依赖，下载速度可能会比较慢，甚至下载失败，我们通常更换为国内淘宝的npm仓库源，提高下载速度；
查看目前的npm仓库源（位置）：
npm config get registry
设置淘宝源：npm config set registry https://registry.npmmirror.com/
原来老的淘宝npm地址（http://registry.npm.taobao.org/）即将停止解析，所以建议使用新地址；
【测试环境】
安装一个js依赖包测试一下看看：
npm install axios -g #其中-g是全局安装的意思；
全局安装就会把axios模块安装到：
D:\dev\node-v20.12.0-win-x64\node_global 目录下；
如果不加-g就会安装到了当前执行命令所在的目录下：C:\Users\Administrator

3.2 Vite环境安装

npm create vite@latest
npm是Node Package Manager的缩写，是Node.js的一个包管理工具；
create是一个npm的命令，用于创建新的npm包；
vite@latest表示使用最新版本的vite；
npm create vite@latest命令用于使用npm包管理器创建一个新的Vite项目；