前提条件: 已安装 16.0 或更高版本的 Node.js。
确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令 (不要带上 > 符号), “//”后面的文字不要在命名行上输入。
E:hkz_devvue3>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_devvue3>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_devvue3vue3-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
界面效果