使用Vue3+Vite+Typescript 开发实践（一）项目搭建

目录

提示：使用Vue3+Vite 项目实践，Vue3-bate 版本已经发布，Vite 作为Vue家族的一员主要定位于替代当前的Webpack，用来编译、运行、打包项目，区别于Webpack vite运行编译速度非常快，给我们开发者带来极致的开发体验

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vite是什么？

vite 是一款基于web开发构建工具，基于ES 原生module 模块和Rollup 实现，优点就是快快快

二、项目搭建

1. 环境准备

node 版本 （不低于10.16.0）

2. 创建项目

npm i vite -g
npm init vite-app vite-demo # vite-demo 为项目名称
cd vite-demo
npm i

创建成功：

安装依赖：

目录结构：

node_modules : 项目依赖包文件夹
public：开放文件夹（区别于vue-cli index.html移动到项目根目录下）
src： 源代码
	assets：静态资源文件夹
	components：项目通用组件
	App.vue: 项目的根组件
	index.css： 项目样式
	main.js: 项目入口 ，可以在package.json 中配置 main 选项
	.gitignore: git 忽略配置
	index.html 组件渲染的挂载点，项目唯一的html文件
	package-lock.json:当前环境实际使用的依赖版本及来源（如果修改package.json 实际上还需要 npm install才能修改依赖）
	package.json: 项目依赖版本定义及配置

运行项目：

npm run dev

浏览器访问，默认端口为3000

至此项目搭建完毕！！

总结

提示：以上内容主要介绍vite的作用，和使用vite搭建项目结构，仅供参考，如有问题，欢迎斧正！！