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项目；
执行该命令最终的效果就是会初始化一个新的项目，配置好必要的文件，并安装所有必要的依赖，包括安装好Vite本身（执行这个命令会自动安装vite，不需要手动安装vite）；
4 Vue项目开发
4.1 Vue项目开发开发方式
4.2 Vue项目结构
4.3 启动Vue项目
4.4 Vue开发
4.4 Vue工程运行流程
原文地址：https://blog.csdn.net/kaikai_sk/article/details/144432576
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！