如何创建Vue3项目
发布时间：2025-01-17 13:01
一 使用 vue cli创建
1 首先需要保证vue-cli版本在4.5.0往上 在终端执行命令 vue -V查看版本
![\"\"](\"https://img-blog.csdnimg.cn/629f815fa4974895bdf1b3843e87e638.png\")
2 如果低于 4.5.0 执行 npm install -g @vue/cli 升级版本
3 创建项目 执行 vue create 项目名，然后选择vue3选项
![\"\"](\"https://img-blog.csdnimg.cn/4e02a63959e5458e8c2eec28b913fc89.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA77-h55m95pi855qE5pif4piG,size_9,color_FFFFFF,t_70,g_se,x_16\")
执行结果
![\"\"](\"https://img-blog.csdnimg.cn/626d699f1b964a4783be160ae2df994a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA77-h55m95pi855qE5pif4piG,size_15,color_FFFFFF,t_70,g_se,x_16\")
4 进入项目文件夹 执行npm run serve 运行项目
![\"\"](\"https://img-blog.csdnimg.cn/24c2caad0cce400c9f5513cc5dcdd9c2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA77-h55m95pi855qE5pif4piG,size_20,color_FFFFFF,t_70,g_se,x_16\")
二 使用vite 创建
什么是vite 新一代前端构建工具
优势:
开发环境中 无需打包 可以快速的冷启动
轻量快速热重载
按需编译
详细参见 vite 官网 ：https://vitejs.cn
创建步骤：
1 创建项目 执行 npm init vite-app 项目名
![\"\"](\"https://img-blog.csdnimg.cn/b8b69b18704c49fa9da98eb57cdbff37.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA77-h55m95pi855qE5pif4piG,size_11,color_FFFFFF,t_70,g_se,x_16\")
2 进入项目文件夹
3 安装依赖 执行 npm install
4 运行 执行 npm run dev
![\"\"](\"https://img-blog.csdnimg.cn/0f3646384cff4e72a45ddd81ce610277.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA77-h55m95pi855qE5pif4piG,size_20,color_FFFFFF,t_70,g_se,x_16\")