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

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

zonemu3个月前 (07-16)技术文章32

前提条件: 已安装 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

界面效果


相关文章

7种超轻量级的Linux发行版,能够帮助你找到适合自己的操作系统

Linux是一种非常受欢迎的开源操作系统,而且有许多版本可以选择。有时候,你需要一种超轻量级的Linux发行版,它可以在资源有限的设备上运行,并且能够快速启动。本文将介绍7种超轻量级的Linux发行版...

解决GitLab报错:not allowed to force push code to a protected branch

当 force push 代码的时候,可能会遇到如下错误:You are not allowed to force push code to a protected branch on this pr...

Jenkins 学习笔记(jenkins要学多久)

本学习笔记参考《Jenkins 2.x实践指南》。1. Jenkins 简介#Jenkins 是一款自动化的任务执行工具。通常用于持续集成/持续交付领域。可以通过界面或Jenkinsfile告诉Jen...

Web前端全套教程+视频包含JavaScript、Vue等

写在前面:web前端从入门到精通经典教程,老师精心讲,想从事编程或者数据分析行业的小伙伴点进来,只需你评论并关注私信留言“前端”。便可免费获取。WEB前端简介:WEB前端工程师,也叫Web前端开发工程...

一键看懂Html5,就这么简单(查看html的app推荐)

HTML5是WEB开发世界的一次重大的改变,事实上不管你是否喜欢,它都是代表着未来趋势。曾几何时,当HTML5出现在web端开发领域的时候,并没有引起太多人的注意,究其原因,一方面是它还没有被广泛的支...

HTML5培训学习(简单明了)(html5教学视频教程)

这些事HTML5培训认为在学习HTML5前应该做好的准备,欢迎参考指正:为什么学习HTML5?软硬件环境介绍HTML5环境搭建常见问题解决掌握技能需求为什么学习HTML5?1:自从2010年HTML5...