vue3+vite搭建项目

本文指导如何使用npm创建Vite项目,介绍了项目初始目录结构,强调了Vite项目相比Vue-cli的简化配置,并提到了必要的自定义配置步骤,如API、静态资源、组件等文件夹的设立。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

创建项目

这次使用npm创建:

 npm init vite@latest

输入 npm init vite@latest 命令后,按照提示输入项目名称,框架,语言js/ts等,如图:
在这里插入图片描述
然后,按照按照流程执行
切换到项目目录 (cd…)
初始化项目/下载依赖 (npm i)
运行项目 (npm run dev)
项目就创建成功啦,但是此时你会发现,vite项目比起vue-cli创建的项目来说,携带的插件很少,创建时少了可选项操作。所以一些配置项还是需要自己来配置。

项目初始目录如下:
在这里插入图片描述
index.html 项目的入口;
package.json 管理项目依赖和配置的文件;
public 放置静态资源,比如 logo 等图片;
vite.config.js Vite 相关所有工程化的配置;
src 就是工作的重点,我们需要在 src 目录下细化项目规范。并且大部分的代码都在 src 目录下管理和书写。如:

  1. 建立api文件夹,处理数据请求
  2. 建立assets文件夹,存放静态资源
  3. 建立components文件夹,存放封装的组件
  4. 建立views文件夹,存放页面
  5. 建立router文件夹,处理路由配置
  6. 建立store文件夹,vuex数据;
  7. 建立util文件夹,放置工具函数
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值