vite+vue3+ts+axios+pinia之一如何创建你的第一个 Vue3 应用脚手架

前提条件： 已安装 16.0 或更高版本的 Node.js。

确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令 (不要带上 > 符号), “//”后面的文字不要在命名行上输入。

E:\hkz_dev\vue3>npm create vue@latest

Need to install the following packages:

create-vue@3.8.0

Ok to proceed? (y) y //回车

Vue.js - The Progressive JavaScript Framework

? 请输入项目名称： ? vue-project //入你的项目名

E:\hkz_dev\vue3>npm create vue@latest

Need to install the following packages:

create-vue@3.8.0

Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue3-demo-admin

√ 是否使用 TypeScript 语法？ ... 否 / 是

√ 是否启用 JSX 支持？ ... 否 / 是

√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是

√ 是否引入 Pinia 用于状态管理？ ... 否 / 是

√ 是否引入 Vitest 用于单元测试？ ... 否 / 是

√ 是否要引入一款端到端（End to End）测试工具？ ? 不需要

√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是

√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是

正在构建项目 E:\hkz_dev\vue3\vue3-demo-admin...

=============== 补充说明 begin===================

为了组件下载快，设置国内镜像站：

// 设置镜像(淘宝镜像最新地址)

npm config set registry https://registry.npmmirror.com

// 还原镜像地址为默认地址

npm config set registry https://registry.npmjs.org/

// 获取镜像地址

npm config get registry

=============== 补充说明 end===================

项目构建完成，可执行以下命令：

cd vue3-demo-admin

npm install

npm run format

npm run dev

目录结构

你现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和 <script setup>，而非选项式 API。下面是一些补充提示：

推荐的 IDE 配置是 Visual Studio Code + Volar 扩展。如果使用其他编辑器，参考 IDE 支持章节。

更多工具细节，包括与后端框架的整合，我们会在工具链指南进行讨论。

要了解构建工具 Vite 更多背后的细节，请查看 Vite 文档。

如果你选择使用 TypeScript，请阅读 TypeScript 使用指南。

当你准备将应用发布到生产环境时，请运行：

> npm run build

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

npm run dev

VITE v4.5.0 ready in 429 ms

? Local: http://localhost:5173/

? Network: use --host to expose

? press h to show help

Shortcuts

press r to restart the server

press u to show server url

press o to open in browser

press c to clear console

press q to quit

界面效果