<返回更多

如何创建你的第一个 Vue3 应用脚手架

2023-11-02    web技术的分享者
加入收藏

前提条件: 已安装 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 //入你的项目名

如何创建你的第一个 Vue3 应用脚手架

 

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

 

目录结构

 

如何创建你的第一个 Vue3 应用脚手架

 

你现在应该已经运行起来了你的第一个 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

界面效果

 

如何创建你的第一个 Vue3 应用脚手架

 

关键词:Vue3      点击(8)
声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多Vue3相关>>>