文章目录
- [1 Vue是什么](#1 Vue是什么)
- [2 前端运行环境和工具](#2 前端运行环境和工具)
- [3 环境搭建](#3 环境搭建)
-
- [3.1 node.js安装](#3.1 node.js安装)
- [3.2 Vite环境安装](#3.2 Vite环境安装)
- [4 Vue项目开发](#4 Vue项目开发)
-
- [4.1 Vue项目开发开发方式](#4.1 Vue项目开发开发方式)
- [4.2 Vue项目结构](#4.2 Vue项目结构)
- [4.3 启动Vue项目](#4.3 启动Vue项目)
- [4.4 Vue开发](#4.4 Vue开发)
- [4.4 Vue工程运行流程](#4.4 Vue工程运行流程)
1 Vue是什么
Vue是一款Web前端JavaScript 框架；
2 前端运行环境和工具
1、node.js 是一个开源跨平台的 JavaScript 运行时环境，可以理解成java中的jdk；
2、npm是JavaScript依赖包管理工具，可以进行前端项目的打包、依赖下载等，可以理解成java中的maven；
3、Vite是快速构建前端Vue项目的脚手架，可以理解为开发Spring Boot的Spring Initializr快速构建工具；
3 环境搭建
3.1 node.js安装
【解压即可用】
安装：解压即完成安装；(使用的是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项目；
执行该命令最终的效果就是会初始化一个新的项目，配置好必要的文件，并安装所有必要的依赖，包括安装好Vite本身（执行这个命令会自动安装vite，不需要手动安装vite）；
4 Vue项目开发
4.1 Vue项目开发开发方式
4.2 Vue项目结构
4.3 启动Vue项目
4.4 Vue开发
4.4 Vue工程运行流程
