Vite搭建一个Vue3项目

本文基于window系统开发，Node版本为v18.12.1，请确保你的Node版本不低于18

本文使用技术栈及版本如下：

构建工具：Vite

前端框架：Vue3

路由工具：Vue Router

状态管理：Pinia

UI框架：Naive UI

Css框架：Sass

HTTP工具：Axios

一、使用Vite快速构建项目

1. 使用vite构建命令构建VUE项目，如果提示需要下载create-vite按Y回车即可。

npm  init vite

开始构建项目，配置如下

 Project name：kail-admin  // 输入你的项目名称
 Select a framework: Vue   // 选择Vue
 Select a variant: TypeScript // 使用typescript

完成提示

Scaffolding project in E:\Personal project\PC\kail-admin...

Done. Now run:

  cd kail-admin
  npm install
  npm run dev

启动项目

cd kail-admin // 进入文件目录
npm install   // 加载依赖
npm run dev   // 启动项目

完成提示如下

  VITE v5.2.8  ready in 512 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

点击链接或浏览器输入http://localhost:5173/看到以下页面即vue3项目搭建成功