Vue3:项目创建

news2025/1/12 15:59:10

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://www.coloradmin.cn/o/1661129.html

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

相关文章

深入理解nginx http响应限速功能

目录 1. 引言2. 配置参数2.1 limit_rate 配置指令2.2 limit_rate_after 配置指令2.3 其他限速配置 3. 源码分析 1. 引言 在现代互联网应用中,服务器的性能和响应速度是至关重要的。为了保证服务器的稳定性和可靠性,限制客户端对服务器的访问速度是一项重…

能源系统升级BACnet IP分布式I/O边缘模块深度整合

能源管理系统(EMS)的高效运行成为了实现绿色建筑、节能减排的关键。而BACnet IP分布式远程I/O模块作为这一系统中的重要组件,正发挥着不可小觑的作用。本文将以某大型商业综合体为例,探讨BACnet IP I/O模块如何在能源管理中大显身手。 商业综合体涵盖办公…

多维点分布的均匀性评估方法(NDD和Voronoi 图法)

评估多维点分布的均匀性是统计学和数据科学中的一个重要问题,特别是在模拟、空间分析和样本设计等领域。下面,我将详细介绍2种评估多维点分布均匀性的方法,包括它们的数学原理、实现公式以及各自的优缺点。 1. 最近邻距离法(Neare…

AzureDataFactory 表选项之自动创建表

接上篇, 该篇里表与表之间采取了提前mapping的方式,通过Import schemas的方式将源和目标的表的schemas做了一对一的匹配 但如果我的应用场景是将D365的表数据推送到外部数据源,需要原表clone,如果我去先建表建字段再做mapping未免过于繁琐&am…

AS-VJ900实时视频拼接系统产品介绍:两画面视频拼接方法和操作

目录 一、实时视频拼接系统介绍 (一)实时视频拼接的定义 (二)无缝拼接 (三)AS-VJ900功能介绍 1、功能 2、拼接界面介绍 二、拼接前的准备 (一)摄像机选择 (二&a…

FreeRTOS标准库例程代码

1.设备STM32F103C8T6 2.工程模板 单片机: 部分单片机的程序例程 - Gitee.comhttps://gitee.com/lovefoolnotme/singlechip/tree/master/STM32_FREERTOS/1.%E5%B7%A5%E7%A8%8B%E6%A8%A1%E6%9D%BF 3.代码 1-FreeRTOS移植模板 #include "system.h" #include "…

Linux虚拟机运行“yum install gcc-c++”报错“Loading mirror speeds from cached hostfile”

目录 一、在Linux上安装Redis时,在终端执行命令“yum install gcc-c”时,报错: 二、然后发现linux的网络不通,什么网站都访问不了 三、连上网后,再变换yum源 四、重新运行yum install gcc 一、在Linux上安装Redis时…

QT--5

1> 将网络聊天室重新实现一遍 服务器端 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);ser new QTcpServer(this); }Widget::~Widget() {delete ui; }vo…

js教程(13)

一、作用域 作用域规定了变量能够被访问的范围,而离开变量作用域的变量则不能被访问(有时也叫变量的生命周期)。作用域又分为局部作用域和全局作用域。 1.局部作用域 在函数或代码块内部声明的变量只能在其内部被访问,在外部无法…

Docker部署Azure chatgpt样例应用

Github地址 https://github.com/microsoft/sample-app-aoai-chatGPT?tabreadme-ov-file#environment-variables 使用Amazon Linux 2 AMI 的arm 64版本镜像, t4g.medium实例。 需要安装git,可能需要安装 pip3等 sudo apt-get install -y python3-pip 然后从如下…

AWS Lambda 第一个例子Hello (JAVA)

什么是Serverless(无服务器计算) 行业通常所说的Serverless,主要是指“无服务器计算(Serverless Computing)”。无服务器计算,并不是真的不需要服务器,而是说,对于用户,…

200-500人规模工厂网络方案(中小企业网络)

一、方案概述 工厂一般有单独的弱电房,类似这种 里面采用的方案如下: 主要考虑有线、无线、财务、办公、访客等业务,便于维护管理和后续扩容 还需要 Wi-Fi覆盖零死角高速率,工作不卡顿 同时考虑AV反病毒、IPS入侵防御、用户准…

C语言实现扫雷游戏完整版

游戏介绍: 目录 游戏介绍: 游戏框架: 游戏具体功能实现: 棋盘的定义: 棋盘初始化: 棋盘打印: 棋盘布置雷: 棋盘扫雷: 爆炸展开一片: 获取周围八个…

HTML【安装HBuilder、常用标签】--学习JavaEE的day44

day44 JavaEE 学习过程:前端—>数据库—>服务器端 前端的VUE在框架阶段学习 JavaEE学习过程图 HTML 前端:展示页面、与用户交互 — HTML 后端:数据的交互和传递 — JavaEE/JavaWeb 1. 前端开发的工作模式 开发输出htmlcssjs 理解&am…

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

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

浅谈如何利用 AI 提高内容生产效率?|TodayAI

在数字化时代,内容的创建和分发速度变得尤为关键。人工智能(AI)技术提供了加速这一过程的可能性,不仅提升了生产效率,还改善了内容的质量和受众的接受度。本文深入探讨AI如何在内容生成、分发与推广,以及内…

Linux下GraspNet复现流程

Linux,Ubuntu中GraspNet复现流程 文章目录 Linux,Ubuntu中GraspNet复现流程1.安装cuda和cudnn2.安装pytorch3.编译graspnetAPIReference 🚀非常重要的环境配置🚀 ubuntu 20.04cuda 11.0.1cudnn v8.9.7python 3.8.19pytorch 1.7.0…

如何使用openEuler 22.03 配置mail.rc给邮箱发送邮件

目录 需求环境总体步骤梳理详细步骤1. 安装mailx软件包(centos默认安装,openEuler不默认安装)2. 检查是否能ping得到smtp服务器3. 在qq邮箱开启smtp设置4. 修改/etc/mail.rc文件5. 测试 可能遇到的问题 需求 希望检查每日的备份和系统运行记…

在windows下安装wsl子系统

一、安装环境 windows规格 版本Windows 10企业版版本号22H2操作系统内部版本19045.4291 二、安装过程 2.1 以管理员身份打开PowerShell(win X快捷键); 2.2 输入命令:wsl --list --online(简写:wsl -l …

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

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