当前位置:首页 > 技术文章 > 正文内容

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

界面效果


相关文章

最美 Linux 发行版之争还在继续,Elementary OS 0.3 发布 0.3 Freya 更新

对于个人终端消费者而言,Linux 发行版们依然希望通过 UI 革新来吸引他们的注意。除了 Ubuntu 这样综合能力强的选手,偏重界面的发行版里,前有 OpenSUSE,后有 Linux Mint,...

Ubuntu 24.10发行版登场:Linux 6.11内核、GNOME 47桌面环境

IT之家 10 月 11 日消息,Canonical 昨日发布新闻稿,正式推出代号为 Oracular Oriole 的 Ubuntu 24.10 发行版。新版在内核方面升级到最新 6.11 版本,并...

细数5款国外热门Linux发行版(linux发行版排名网站)

Linux系统已经与我们的生活息息相关,当你用Android手机浏览这篇文章时,你就已经在使用Linux系统。当然作为编程开发最热门的系统,他还有很多专注于开发使用的版本。Fedora热门入门推荐,一...

Win+Ubuntu缝合怪:第三方开发者推出“Wubuntu”Linux发行版

IT之家 2 月 26 日消息,一位第三方开发者推出了一款名为“Wubuntu”的缝合怪 Linux 发行版,系统本身基于 Ubuntu,但界面为微软 Windows 11 风格,甚至存在微软 Win...

【Vue3 基础】05.组件化(组件使用vuex)

这是 Vue3 + Vite + Pinia +TS + Element-Plus 实战系列文档。最近比较忙没什么时间写文章,争取早日把这个系列完结吧~生命周期和模板引用在本章之前,我们通过响应式 a...

git的几种分支模式(git分支的概念)

编写代码,是软件开发交付过程的起点,发布上线,是开发工作完成的终点。代码分支模式贯穿了开发、集成和发布的整个过程,是工程师们最亲切的小伙伴。那如何根据自身的业务特点和团队规模来选择适合的分支模式呢?本...