使用Vite搭建前端框架
·
一、使用Vite创建项目
1、全局安装Vite
pnpm create Vite

2、输入项目命名

3、输入包的名称

4、选择要创建的框架类型

5、选择使用js或者ts

6、是否使用rolldown打包

当前rolldown处于实验阶段,用于替代原本的rollup打包工具,目的是提升打包效率,但现阶段尚不稳定。
7、是否使用pnpm install安装nodeModules目录下的必须包,并运行项目


8、创建完成

二、 使用命令行创建vite
1、执行命令行
pnpm create vite vue3 --template vue

2、执行后续操作
跳过上面的第1、2步,在命令行中输入项目名称vue3,后续操作与一相同
三、代码结构

1、.vscode
必要的插件安装配置
2、node_modules
项目所需的依赖包
3、public
静态文件存放,通常放公共配置文件、图片等
4、src
src为主要开发代码文件目录
通常包含assets(静态文件存放)、apis(接口)、components(公共组件)、router(路由)、utils(公共函数)、store (状态管理)、hook(钩子函数)、views(主要页面组件)app.vue(根组件)、main.ts(入口文件)、styel.css(主样式表)等
5、.gitignore
git代码修改提交记录
6、index.html
入口页面
7、package.json
依赖包文件
8、readme.md
项目介绍
9、ts.config
ts 配置文件
10、vite.config.ts
vite配置文件
更多推荐
所有评论(0)