Part2 基于Vite创建vue3项目脚手架

欢迎大家来到IT世界,在知识的湖畔探索吧!

欢迎大家来到IT世界,在知识的湖畔探索吧!

创建vue3项目脚手架

参考官网: 「链接」

注意: 需要提前安装Node.js与VSCode开发工具

参考我第一章节: Part1 Vue开发环境安装

创建步骤

• 创建文件夹,进入该文件夹后,执行 win+r ,输入 cmd 输入如下命令:

npm create vue@latest

• create-vue，它是 Vue 官方的项目脚手架工具。并根据提示进一步执行。

• 安装依赖并启动项目

具体命令如下:

cd

npm install

npm run dev

• 访问本地服务地址

http://localhost:5173/

• 项目打包

当项目需要部署到测试或者生产环境时，执行如下命令：

npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的部署版本

vue3项目结构

vue3项目常见的项目结构

my-vue3-app-1
├─ .editorconfig
├─ .gitattributes
├─ .gitignore # 在使用 Git 进行版本控制时，.gitignore 文件用来指定哪些文件或文件夹不应被提
交到 Git 仓库中。通常会忽略 node_modules/、构建输出文件、IDE 配置文件等。

├─ env.d.ts
├─ eslint.config.ts
├─ index.html
├─ package-lock.json
├─ package.json # 项目的配置文件，包含了项目的元数据、依赖项和脚本等信息。

├─ public #文件夹包含了应用程序的入口HTML文件，以及其他不需要经过编译的静态文件。

│ └─ favicon.ico
├─ README.md #项目的说明文件，通常包含项目的介绍、安装和运行说明以及其他相关信息。

├─ src # 文件夹是项目的主要源码目录。

│ ├─ api # ts文件

│ ├─ App.vue # 根组件

│ ├─ assets # 存放静态资源文件

│ │ ├─ base.css
│ │ ├─ logo.svg
│ │ └─ main.css
│ ├─ components # 用于存放全局和局部组件
 

│ │ ├─ HelloWorld.vue
│ │ ├─ icons
│ │ │ ├─ IconCommunity.vue
│ │ │ ├─ IconDocumentation.vue
│ │ │ ├─ IconEcosystem.vue
│ │ │ ├─ IconSupport.vue
│ │ │ └─ IconTooling.vue
│ │ ├─ TheWelcome.vue
│ │ └─ WelcomeItem.vue
│ ├─ main.ts # 用程序的入口文件。

│ ├─ router # 路由配置

│ ├─ utils # 用于存放工具函数

│ └─ views # 用于存放页面视图组件

├─ tsconfig.app.json
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts # 配置 Vite 开发服务器和构建工具。

欢迎大家来到IT世界,在知识的湖畔探索吧!