day7_vite 啊哈哈啊哈哈哈哈哈

day7_vite

vite(工具集 前端工程化项目使用的工具) 是vue官方退出的 编译 运行 工具

单页面应用 (全局只有一个页面 分别写一个个组件 由工具整体编译 通过js做内容替换)

1安装node.js

js运行时工具 脱离浏览器的js代码 都需要它才能运行

安装目录尽量不要改 目录中不要带中文

检查npm是否安装成功

2安装pnpm 包安装工具

https://pnpm.nodejs.cn/installation/ 官网

全局安装pnpm包管理工具

npm install -g pnpm@latest-10

安装完成

3vite安装

https://cn.vitejs.dev/guide/ vite官网

安装vite 创建vite项目

pnpm create vite

注意:这个命令会安装vite 创建项目 在要创建项目的目录敲命令

安装完成

4.创建vite项目

选择选项

项目会自动创建 自动启动

vite服务器默认端口 5173

项目创建完成

5vite项目目录结构

需要项目编码时 写的 主要时src源码目录

把欢迎的多余文件删掉 只留这几个文件

6vite项目相关命令

1项目启动

启动测试环境 启动vite自带服务器 (开发时使用)
pnpm run dev
需要进入项目目录 有package.json文件的目录 才能使用

2项目关闭

控制台中 ctrl+c 杀当前进程

注意 ctrl+c不是复制 复制 鼠标左键拖中 点右键 再点右键 粘贴

3(根据package.json文件)安装全部依赖库

重建当前项目的依赖库

pnpm install

4项目打包

把当前项目打包到dist目录中 配合其他服务器 在生产环境(正式上线)中使用

pnpm run build

7通过开发工具启动关闭项目