Vue3项目搭建教程

找到一个你想要创建Vue项目的目录(本文以C:\Users\XTT\Desktop\新建文件夹\project为例)。在此目录打开命令行,输入以下命令:
在这里插入图片描述

回车,如果是第一次用这种方式创建Vue3项目,命令行会提示安装 create-vue 包,如下图:
在这里插入图片描述

输入【y】,确认安装。安装完成后会自动进入Vue项目创建,如下图:
在这里插入图片描述
接下来会让我们依次输入以下几个问题的答案,帮助创建项目:

Project name:项目名称,默认值:vue-project,可输入想要的项目名称,此处不建议中文。
Add TypeScript? 是否加入TypeScript组件?默认值:No。
Add JSX Support? 是否加入JSX支持?默认值:No。
Add Vue Router for Single Page Application development? 是否为单页应用程序开发添加Vue Router路由管理组件?默认值:No。
Add Pinia for state management? 是否添加Pinia组件来进行状态管理?默认值:No。
Add Vitest for Unit testing? 是否添加Vitest来进行单元测试?默认值:No。
Add Cypress for both Unit and End-to-End testing? 是否添加Cypress来进行单元测试和端到端测试?默认值:No。
Add ESLint for code quality? 是否添加ESLint来进行代码质量检查?默认值:No。

在这里插入图片描述
完成以上步骤,一个全新的Vue3项目就创建好了。
接下来可以按照提示,启动项目。
在VCSode中打开刚创建的Vue项目目录,如下图:
在这里插入图片描述
在这里插入图片描述
打开终端,输入以下指令:

npm install

显示:
在这里插入图片描述
输入命令:

npm run dev

显示:
在这里插入图片描述
看到以上提示,项目启动成功。
打开浏览器,在地址栏输入 http://localhost:5173 即可打开项目。全新的Vue3初始页面,如下图:
在这里插入图片描述
到此为止,我们的Vue3项目就搭建完成了。新建的Vue3项目目录结构如下图:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_39877681/article/details/128110550