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 命令会执行项目的构建过程,包括编译、压缩、打包等操作,最终生成用于生产环境的静态文件。
相关推荐
Json_1817901448021 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网44 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端