npm创建Vue3项目

npm创建Vue3项目

  • 1 创建Vue项目
    • 说明
  • 2 安装
  • 3 运行

1 创建Vue项目

创建最新版的Vue项目,已经不推荐使用CLI构建方式了。参考如下即可。

npm create vue@latest

如果发现一直动不了,切换网络试一下,个人热点尝试一下。

按下图的选项按需引入自己需要的功能:

说明

选项 说明
TypeScript 语法 TypeScript 是一种由 Microsoft 开发的开源编程语言,它是 JavaScript 的超集,可以编译为纯 JavaScript。就是一种编程语言。
JSX 支持 JSX 是一种 JavaScript 的语法扩展,通常用于构建 React 应用程序的用户界面。JSX 允许开发者在 JavaScript 中直接编写类似 HTML 的标记语法,使得编写和管理复杂的用户界面变得更加简单和直观。const element = \<div>Hello, World!\</div>;
Vue Router Vue Router 是 Vue.js 官方提供的路由管理器,用于构建单页面应用程序(SPA)。它允许你在 Vue.js 应用程序中实现基于 URL 的导航,并且能够以声明式的方式定义应用程序的路由映射关系。多组件开发选上,就是对页面每个部分解耦,可以按需导入。比如组成页面的nav、main、footer等分开开发。
Pinia Pinia 是一个用于 Vue.js 的状态管理库,它专注于提供简单、轻量级且可扩展的状态管理解决方案。Pinia 提供了一种基于 Vue 3 的响应式 API 构建状态管理的方式,与 Vuex 相比,Pinia 更加灵活,并且在性能上有一些优势。在小型的Vue项目中,使用Vuex便足以,选否默认使用Vuex
Vitest Vitest 是一个用于 Vue.js 应用程序的测试运行器,它专注于提供简单、快速和可扩展的测试解决方案。Vitest 基于 Vite 构建,并且支持 Vue 3 和 Vue 2,能够帮助开发者在项目中进行单元测试和端到端测试。
端到端(End-to-End)测试 在 Vue.js 项目中进行端到端(End-to-End)测试时,常用的工具包括 Cypress、Puppeteer、TestCafe 等。这些工具都能帮助你编写和执行端到端测试,并生成详细的测试报告
ESLint ESLint 是一个开源的 JavaScript 代码检查工具,用于检查代码中的潜在问题、风格错误和代码质量问题。它可以帮助开发团队规范代码风格、发现潜在的错误,并提高代码的质量和可读性。

2 安装

npm install

3 运行

npm run dev
部署命令 说明
npm run dev 通常用于启动开发环境下的服务器或者构建工具。npm run dev 命令用于启动开发服务器,例如 webpack-dev-server、Vue CLI 的开发服务器等。npm run dev 可能会执行诸如编译、热重载、自动刷新等开发相关的任务,以提供一个方便的开发环境,使开发人员能够实时预览和调试项目。
npm run build 用于构建项目的生产版本,生成用于部署的静态文件。当项目开发完成后,通常需要将项目打包成静态文件,以便部署到生产环境中。npm run build 命令会执行项目的构建过程,包括编译、压缩、打包等操作,最终生成用于生产环境的静态文件。
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记8 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin91539 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek