Vue3:项目创建

Vue 3 相对于 Vue 2 带来了许多改进和优点,这些改进主要是为了提高性能、开发体验和可维护性。但是对于创建项目,Vue3也可以采用跟Vue2相同的方式。

使用CLI创建

1. 安装Vue CLI

首先,确保你已经安装了Node.js(建议使用LTS版本)。然后,在命令行工具中全局安装Vue CLI 4.5.0或以上版本,执行以下命令:

npm install -g @vue/cli

或者如果你使用Yarn,可以执行:

yarn global add @vue/cli
2. 检查Vue CLI版本

安装完成后,可以检查Vue CLI的版本,确认安装成功:

vue --version
3. 创建Vue 3项目

接下来,使用Vue CLI创建一个新的Vue 3项目。这里我们将手动选择特性以定制项目。在命令行中输入:

vue create my-vue3-project

当提示选择preset时,你可以选择Manually select features来定制你的项目。之后,你可以根据提示选择需要的特性,如Babel、TypeScript、Router、Vuex等。确保在选择Vue版本时,你选择了Vue 3。

4. 进入项目目录并安装依赖

创建完成后,进入项目目录:

cd my-vue3-project

然后,安装项目依赖(虽然在创建过程中大部分依赖已经被安装,但此步骤确保所有依赖都已就绪):

npm install
5. 运行项目

最后,启动开发服务器,查看你的Vue 3应用:

npm run serve

此时,你的应用应该已经在浏览器中打开,默认地址通常是 http://localhost:8080/

使用pnpm创建 

Pnpm 是新一代的 nodejs 包管理工具。第一个 “P” 意为 Performance,代表着更佳的性能。

它的主要优点有两个,一是采用了 hard-link 机制,避免了包的重复安装,节省了空间,同时能提高项目依赖的安装速度。二是对 monorepo 的支持非常友好,只需要一条配置就能实现。Monorepo 是一种新的仓库管理方式。过去的项目,大多采用一个仓库维护一个项目的方案。对于一个庞大复杂的项目,哪怕只进行一处小小的修改,影响的也是整体。而采用 monorepo 的形式,我们可以在一个仓库中管理多个包。每个包都可以单独发布和使用,就好像是一个仓库中又有若干个小仓库。

1. 安装pnpm

首先,全局安装pnpm,如果你还没有安装的话:

npm install -g pnpm

注:Node.js至少v16.14!!!

2. 创建Vue 3项目
pnpm create vue

会提示你给项目命名:?Project name ,默认为vue-project。然后允许你定制你的项目,可以根据提示选择需要的特性,如TS、JSX、Router、Pinia、Vitest、ESLint、Prettier等。

3. 进入项目目录并安装依赖

然后需要进入新创建的Vue 3应用目录:

cd vue-project
pnpm install
4. 运行项目

安装依赖后,你可以像使用npm或yarn一样运行Vue应用:

pnpm dev

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3029428.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Python学习笔记------json

json简介 JSON是一种轻量级的数据交互格式。可以按照JSON指定的格式去组织和封装数据 JSON本质上是一个带有特定格式的字符串 主要功能:json就是一种在各个编程语言中流通的数据格式,负责不同编程语言中的数据传递和交互 为了让不同的语言能够相互通…

[C++核心编程-06]----C++类和对象之对象模型和this指针

🎩 欢迎来到技术探索的奇幻世界👨‍💻 📜 个人主页:一伦明悦-CSDN博客 ✍🏻 作者简介: C软件开发、Python机器学习爱好者 🗣️ 互动与支持:💬评论 &…

Day 43 1049. 最后一块石头的重量 II 494. 目标和 474.一和零

最后一块石头重量Ⅱ 有一堆石头&#xff0c;每块石头的重量都是正整数。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎的可能结果如下&#xff1a; 如果 x y&#xff0c;那么两…

drawio 网页版二次开发(2):开始修改代码

目录 一 说明 二 打开开发环境 1. 代码调整 2. 修改访问链接 3. 注意 三 部分功能的代码汇总 1. 保存功能 2. 菜单栏折叠按钮功能 3. 顶部菜单栏 4.在顶部菜单栏中的【文件】菜单中新增选项 &#xff08;1&#xff09; 方法一&#xff1a;单独增加 &#xff08;…

中北大学软件学院javaweb实验二JSP应用开发实验报告

实验时间 2024年4月 25 日17时至 22 时 学时数 4 1.实验名称 实验2&#xff1a;JSP应用开发(2学时) 2.实验目的 &#xff08;1&#xff09;学会编写和运行简单的JSP页面&#xff0c;理解其运行原理&#xff1b; &#xff08;2&#xff09;学会使用JSP的声明、表达式、脚…

Python数据科学 | ​Python 离群点检测算法 -- GMM

本文来源公众号“Python数据科学”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;​Python 离群点检测算法 -- GMM 星星在天空中聚集或分散&#xff0c;呈现出自然的分布。在统计学中&#xff0c;K-均值法是一种著名的聚类技术&a…

Aapache Tomcat AJP 文件包含漏洞(CVE-2020-1938)

1 漏洞描述 CVE-2020-1938 是 Apache Tomcat 中的一个严重安全漏洞&#xff0c;该漏洞涉及到 Tomcat 的 AJP&#xff08;Apache JServ Protocol&#xff09;连接器。由于 AJP 协议在处理请求时存在缺陷&#xff0c;攻击者可以利用此漏洞读取服务器上的任意文件&#xff0c;甚至…

keil5软件安装教程(MDKv5.39)

keil5软件安装分为三部分&#xff1a; 目录 1.安装mdk 2.激活mdk 3.安装STM32芯片包 1.安装mdk 安装包链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1PZoGhzI5Y19ROv7xe9QJKA?pwdgt3s 提取码&#xff1a;gt3s 1、下载keil5的压缩包并解压&#xff0c;鼠…

通俗的理解网关的概念的用途(三):你的数据包是如何到达下一层的

其实&#xff0c;这一章我写不好&#xff0c;因为这其中会涉及到一些计算和一些广播等概念&#xff0c;本人不善于此项。在此略述&#xff0c;可以参考。 每台设备的不同连接在获得有效的IP地址后&#xff0c;会根据IP地址的规则和掩码的规则&#xff0c;在操作系统和交换机&a…

【C++】继承 — 继承的引入、赋值切片详细讲解

前言 我们知道C语言是一门面向对象编程的语言&#xff0c;而面向对象编程有三大特性&#xff0c;它们分别是&#xff1a; 封装继承多态 目录 1. 继承的概念及定义1.1继承的概念1.2继承的定义格式1.3 继承的使用 2 基类和派生类对象赋值转换3 继承中的作用域3.1 派生类对象的存…

基于springboot+vue+Mysql的体质测试数据分析及可视化设计

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

Windows11提示升级,我要点确定吗?

Windows 11自2021年10月推出以来&#xff0c;一直保持着缓慢而稳定的增长&#xff0c;相对来说在游戏PC上的影响力较大&#xff0c; 而Windows 10也即将于2025年10月结束支持。 截至2024年&#xff0c;Windows 11的主要版本包括24H2、 23H2、22H2和21H2。 24H2&#xff1a;20…

5月白银现货最新行情走势

美联储5月的议息会议举行在即&#xff0c;但从联邦公开市场委员会&#xff08;FOMC&#xff09;近期透露的信息来看&#xff0c;降息似乎并没有迫切性。——美联储理事鲍曼认为通胀存在"上行风险"&#xff0c;明尼阿波利斯联邦储备银行行长卡什卡利提出了今年不降息的…

数学:人工智能领域的基石与灵魂

在科技日新月异的今天&#xff0c;人工智能&#xff08;AI&#xff09;已经渗透到了我们生活的方方面面&#xff0c;从智能家居、智能医疗到自动驾驶、智能客服&#xff0c;AI无处不在。然而&#xff0c;当我们赞叹于AI的神奇时&#xff0c;却往往忽视了其背后的推动力——数学…

5月游戏市场迎来新的体验,网易两款游戏重磅出炉

易采游戏网5月9日消息&#xff0c;随着科技的飞速发展&#xff0c;手机游戏已经成为人们休闲娱乐的重要方式。在这个领域&#xff0c;网易作为国内领先的游戏开发商&#xff0c;一直致力于为玩家带来高品质的游戏体验。近日&#xff0c;网易携手国际大厂Square Enix&#xff0c…

列表、字典推导式介绍和用法|lambda的介绍和用法

列表、字典推导式介绍和用法|lambda的介绍和用法 列表推导式示例应用与传统写法代码行数直观比较 字典推导式示例应用 lambda示例应用 列表推导式、字典推导式、lambda使用简洁语法进行代码的编写 列表推导式 用于快速创建新的列表&#xff0c;通过对现有列表进行迭代和筛选。…

技术速递|Python in Visual Studio Code 2024年5月发布

排版&#xff1a;Alan Wang 我们很高兴地宣布 Visual Studio Code 的 Python 和 Jupyter 扩展将于 2024 年 5 月发布&#xff01; 此版本包括以下公告&#xff1a; “Implement all inherited abstract classes”代码操作新的自动缩进设置Debugpy 从 Python 扩展中删除&#…

vivado新版本兼容老版本,vitis classic兼容sdk教程

new version: vivado版本2023.2 和vitisv classic 2023.2 old version: vivado 2018.3以及之前的版本 打开工程 自动升级到当前版本&#xff0c;选择OK 点击Yes,合并当前的目录架构 点击OK 点击Report IP status 勾选要升级的IP核&#xff0c;点击升级 在项目工程文件夹…

Java医院绩效考核系统源码maven+Visual Studio Code一体化人力资源saas平台系统源码

Java医院绩效考核系统源码mavenVisual Studio Code一体化人力资源saas平台系统源码 医院绩效解决方案包括医院绩效管理&#xff08;BSC&#xff09;、综合奖金核算&#xff08;RBRVS&#xff09;&#xff0c;涵盖从绩效方案的咨询与定制、数据采集、绩效考核及反馈、绩效奖金核…

Hadoop | 数据清洗

# 数据清洗概念 通常情况下&#xff0c;大数据平台获得原始数据文件中&#xff0c;存在大量无效数据和缺失数据&#xff0c;需要再第一时间&#xff0c;对数据进行清洗&#xff0c;获得符合后续处理需求的数据内容和格式 # 需求 对手机流量原始数据&#xff0c;将其中的手机号…