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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux 磁盘分区工具 gdisk / fdisk

fdisk 是传统的 Linux 磁盘分区工具,磁盘容量有2T的大小限制;gdisk 又叫 GPT fdisk, 作为 fdisk 的升级版,主要使用的是GPT分区类型,用来划分容量大于2T的硬盘,本文介绍使用方法。 简介 早期的磁盘使用 fdisk 工具分区…

Jetpack Compose一:初步了解Compose

Intellij IDEA构建Android开发环境 IntelliJ IDEA 2023.2.1 Android开发变化 IDEA配置使用Gradle 新建Compose工程,取名ComposeStudy 可以看到的是IDEA为项目初始化了部分代码 使用Compose开发不再需要使用xml文件来设计布局了 Compose中的Text也不同于Android V…

环形链表理解||QJ141.环形链表

在链表中,不光只有普通的单链表。之前写过的的一个约瑟夫环形链表是尾直接连向头的。这里的环形链表是从尾节点的next指针连向这链表的任意位置。 那么给定一个链表,判断这个链表是否带环。qj题141.环形链表就是一个这样的题目。 这里的思路是用快慢指…

Python修改exe之类的游戏文件中的数值

文章目录 场景查找修改 补充字节to_bytes 场景 某些游戏数值(攻击力、射程、速度…)被写在exe之类的文件里 要先查找游戏数值,然后修改 查找 首先,要查找数值,大数重复较少,建议从大数找起 F 游戏原件…

SpringBoot 实现 RAS+AES 自动接口解密

接口安全老生常谈了 目前常用的加密方式就对称性加密和非对称性加密,加密解密的操作的肯定是大家知道的,最重要的使用什么加密解密方式,制定什么样的加密策略;考虑到我技术水平和接口的速度,采用的是RAS非对称加密和AE…

动态IP避坑指南:如何挑选合适的动态代理IP?

在如今的网络环境中,使用动态IP代理成为实现隐私保护、访问受限内容和提高网络效率的一种常见方式,选择合适的国外动态IP代理可以让我们的业务处理事半功倍。面对市面上琳琅满目的选择,如何挑选购买适合自己的动态IP代理服务呢?在…

【软件工程】测试

目录 前言软件测试的目标测试准则测试方法测试方案(重点)白盒测试(重点)逻辑覆盖测试语句覆盖判定覆盖(分支覆盖)条件覆盖判定/条件覆盖条件组合覆盖总结 基本路径覆盖法 黑盒测试等价类法边界值分析法 软件…

速卖通ip地址会相互影响吗?如何防止账号关联?

在跨境电商行业,大部分平台都是不允许一个卖家操作多个店铺的,如果被平台检测出账户关联,可能会被封店。在速卖通平台,会通过IP地址来判断是否经营多个账号吗?IP地址会使店铺相互影响吗? 一、速卖通IP地址会关联吗? 首先各位卖…

从零开始学习生成树实验:一步一步走向精通

大家好,这里是G-LAB IT实验室。 ⭕5月18日 CCNAHCIA 新开班来啦👏 现在报名有早鸟价,感兴趣的可咨询 👇👇👇 敲重点! 可小窗客服咨询课程价格 本课程包含线下面授、线上直播、录播、实验、考试习题、…

【数据库原理及应用】期末复习汇总高校期末真题试卷08

试卷 一、选择题(每题 2 分,共 30 分)    1. ___ ____是长期存储在计算机内的有组织,可共享的数据集合. A.数据库管理系统 B.数据库系统 C.数据库 D.文件组织 2. 数据库类型是按照 来划分…

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

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

1.基于python的单细胞数据预处理-归一化

目录 归一化的引入移位对数皮尔森近似残差两个归一化方法的总结 参考: [1] https://github.com/Starlitnightly/single_cell_tutorial [2] https://github.com/theislab/single-cell-best-practices 归一化的引入 在质量控制中,已经从数据集删除了低质…

力扣HOT100 - 739. 每日温度

解题思路&#xff1a; 单调栈 class Solution {public int[] dailyTemperatures(int[] temperatures) {int length temperatures.length;int[] ans new int[length];Deque<Integer> stack new LinkedList<>();for (int i 0; i < length; i) {int temperatu…

【NLP练习】使用seq2seq实现文本翻译

使用seq2seq实现文本翻译 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 from __future__ import unicode_literals, print_function, division from io import open import unicodedata import string impo…

Star-CCM+分配零部件至区域2-根据零部件的特性分组分配零部件至区域

前言 前文已经讲解了将零部件分配至区域的方法。其中有一种方法是"将所有部件分配到一个区域"。在工程应用中&#xff0c;有时会把同一种类型的部件分配到一个区域&#xff0c;因此在一个项目中有可能需要多次进行"将所有部件分配到一个区域"。如在电机温…

分布式与一致性协议之MySQL XA协议

MySQL XA协议 概述 相信很多人都知道MySQL支持单机事务&#xff0c;那么在分布式系统中&#xff0c;涉及多个节点&#xff0c;MySQL又是怎样实现分布式事务的呢&#xff1f; 举个例子&#xff0c;一个业务系统需要接收来自外部的指令&#xff0c;然后访问多个内部其他系统来执…

OpenBayes 一周速览|Apple 开源大模型 OpenELM 上线;字节发布 COCONut 首个全景图像分割数据集,入选 CVPR2024

公共资源速递 This Weekly Snapshots &#xff01; 5 个数据集&#xff1a; * COCONut 大规模图像分割数据集 * THUCNews 新闻数据集 * DuConv 对话数据集 * 安徽电信知道问答数据集 * Sentiment Analysis 中文情感分析数据集 2 个模型&#xff1a; * OpenELM-3B-Inst…

三、配置带HybridCLR的ARCore开发环境

预告 本专栏将介绍如何使用这个支持热更的AR开发插件&#xff0c;快速地开发AR应用。 专栏&#xff1a; Unity开发AR系列 插件简介 通过热更技术实现动态地加载AR场景&#xff0c;简化了AR开发流程&#xff0c;让用户可更多地关注Unity场景内容的制作。 “EnvInstaller…”支…

【前端基础】CSS样式+Vue中绘制时间轴

深度选择器 在 Vue.js 中&#xff0c;/deep/、>>>、:deep 和 ::v-deep 这些都是深度选择器&#xff0c;用于修改子组件的样式。它们主要用于解决作用域样式和组件样式之间的冲突问题。 1. /deep/ 或 >>> /deep/ 和 >>> 是相同的选择器&#xff0c;…

rider自定义代码片段(以C#为例)

1.先看效果 2.在哪设置 File→Settings→Editor→Live Templates→C#3.咋定义 代码片段中的变量用$$包围&#xff0c;而且我们可以自定义变量名称&#xff0c;如CName。选择我们自定义的变量名称我们可以修改变量是否可以被修改以及变量将自动匹配的值。 比如将CName自动填充…