vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
目录
一、搭建vue3 项目前提条件
二、通过create-vue搭建vue3 项目
三、搭建一个 Vite 项目
四、构建一个 Vite + Vue 项目
五、打开Vue 项目管理器
六、Vite + Vue 项目目录结构
七、Vite.config.ts配置
一、搭建vue3 项目前提条件
前提条件
熟悉命令行已安装 16.0 或更高版本的 Node.js
（1）、检查node 和npm版本信息
同时按window+R键,输入cmd,打开命令提示符窗口
输入： node –v （查看本机安装的node版本）
输入： npm –v （查看本机安装的npm版本）
（2）、升级你的 Node 版本
如果提示没有安装node或Node.js 版本 较低，请升级你的 Node 版本。
详细教程可参阅下面链接文章：
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）https://blog.csdn.net/weixin_69553582/article/details/129584587
二、通过create-vue搭建vue3 项目
同时按window+R键,输入cmd,打开命令提示符窗口
进入你准备搭建vue3 项目的相应目录，例如本例目录地址：C:\00program\vue\vuelearn
输入：npm init vue@latest
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。
你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：
Vue.js - The Progressive JavaScript Framework
√ Project name: ... vueproject1
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
Scaffolding project in C:\00program\vue\vuelearn\vueproject1...
我们依次输入问题的答案，帮助创建项目：
Project name：------》项目名称，默认值：vue-project，可输入想要的项目名称，此处我写的是：vueproject1。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 an End-to-End Testing Solution?------》是否添加端到端测试？默认值No。Add ESLint for code quality? ------》是否添加ESLint来进行代码质量检查？默认值：No。
如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。
脚手架工程项目在指定位置被创建好。
在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
Done. Now run:
cd vueproject1
npm install
npm run dev
cd进入vueproject1目录后，依次输入以下命令，
npm install npm run dev
vite服务器启动，显示了项目地址，如下图：
我们在浏览器打开 http://localhost:5173/
显示页面如下图：
现在已经可以运行起一个 Vue 项目！
请注意，生成的项目中的示例组件使用的是组合式 API 和