记录一次基于Vite搭建Vue3项目的过程

Vue2已经于2023年12月31日停止维护了,2024年算是vue3的崭新的一年,我们的项目也基本从vue2逐渐向着Vue3过渡,Vue3相较于vue2有更好的开发体验,和ts的自然融合使得项目的结构、功能拆分变得更加的清晰;组合式声明有种MVC向着MVP、MVVM转变的错觉;而Vite的使用使得我们的编译速度产生质的飞跃。总体来说,Vue3是一个不错的选择,今天这边文章主要就是来记录一下如何创建一个Vue3的项目。

环境配置

Vue3的安装其实对于环境的要求不高,只需要我们的电脑安装了nodejs即可,这边有关npm、yarn、pnpm等安装工具的安装请自选搜索选择。安装前可参考:修改yarn和npm为国内镜像源 ,修改npm为国内源,提高安装速度。如下是各个包管理工具的安装

$ npm install -g yarn  # 全局安装yarn
$ npm install -g cnpm  # 全局安装cnpm
$ npm install -g pnpm  # 全局安装pnpm 

创建Vue项目

Vue项目有两种快捷创建的方式,可以任意选择自己喜欢的方式:

1、使用vue-cli创建

通过全局安装Vue-cli工具链来快捷创建Vue项目,vue-cli是一个基于vuejs的交互式脚手架:

$ npm install -g @vue/cli  # 全局下载vue-cli
$ vue create vue3-demo # 创建vue3-demo项目
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)  # 选择vue3Default ([Vue 2] babel, eslint) Manually select features Vue CLI v5.0.8
✨  Creating project in D:\Projects\CareeLink\packages\flowable\vue3.
⚙️  Installing CLI plugins. This might take a while...yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...success Saved lockfile.
Done in 82.89s.
🚀  Invoking generators...
📦  Installing additional dependencies...yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...success Saved lockfile.
Done in 18.36s.
⚓  Running completion hooks...📄  Generating README.md...🎉  Successfully created project vue3.      
👉  Get started with the following commands:$ cd vue3$ yarn serve

这样Vue3项目是创建成功了,但是需要知道的是vue-cli是基于webpack的,不是vite,这种方式不适合我,接下来看下一种方式。

2、使用vue@latest创建

这个也是目前Vue3官网上推荐的的方式,这种方式创建的Vue3项目是基于Vite构建的。

$ npm init vue@latest

使用这种方式是基于create-vue脚手架构建工具创建的项目,我们可以选择我们需要的配置项目来实现项目的创建。

如此就创建了一个基础的Vue3项目了。

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

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

相关文章

undefined reference to `__atomic_is_lock_free‘

1 编译错误 最近在linux下写程序时使用标准库std::atomic,其中使用到is_lock_free&#xff0c;链接时提示找不到__atomic_is_lock_free函数。 /usr/bin/ld: /mnt/e/git/cpp/test/cpptest/concurrent/.obj/atomic_test.o: in function std::atomic<ObjectA>::is_lock_fr…

网络安全岗位必须知道到:高性能抓取,多线程,异步逆向分析(Js逆向破解/APP逆向破解)反爬原理和解决方法,不然你的Python会有Bug

JS逆向破解和APP逆向破解以及反爬技术是网络安全和数据保护领域的重要话题。 遵循安全开发的最佳实践&#xff0c;包括输入验证、数据加密、权限管理等&#xff0c;以减少安全漏洞的出现。 坚决维护网络安全及开发安全&#xff0c;杜绝一切被爬&#xff0c;非法爬取数据的行为…

面试计算机网络八股文十问十答第十期

面试计算机网络八股文十问十答第十期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;SACK 的引入是为了解决…

linux 查看进程启动方式

目录 如果是systemd管理的服务怎么快速找到对应的服务器呢 什么是CGroup 查找进程对应的systemd服务 方法一&#xff1a;查看 /proc//cgroup 文件 方法二&#xff1a;使用 ps 命令结合 --cgroup 选项 方法三&#xff1a;systemd-cgls 关于 system.slice 与 user.slice …

Linux权限提升四

➢ Linux系统提权-Web&用户-数据库类型 ➢ Linux系统提权-Web&用户-Capability能力 ➢ Linux系统提权-普通用户-LD_Preload加载 #Linux系统提权-Web&用户-数据库类型 https://www.vulnhub.com/entry/raven-2,269/ 1、信息收集&#xff1a; http://192.168.139.155/…

基于Django和Vue的商城管理系统

文章目录 前言一、系统运行结果二、相关技术简介三、系统设计四、系统测试五、总结 前言 近年来&#xff0c;互联网技术的飞速发展极大地改变了人们的生活方式。网络购物作为一种新的购物模式&#xff0c;因其方便、快捷、选择多样等优点&#xff0c;迅速普及。为了满足人们日…

会声会影2023软件怎么下载安装? 【详细安装图文教程】

简介&#xff1a; 会声会影&#xff08;Corel VideoStudio&#xff09;为加拿大Corel公司发布的一款功能丰富的视频编辑软件。会声会影2023简单易用&#xff0c;具有史无前例的强大功能&#xff0c;拖放式标题、转场、覆叠和滤镜&#xff0c;色彩分级、动态分屏视频和新增强的…

Ubuntu 20.04 LTS WslRegisterDistribution failed with error: 0x800701bc

1.以管理员身份运行powershell&#xff0c;输入&#xff1a;wsl --update&#xff0c; 2.重新打开ubuntu即可。

在线装X平台源码

在线装X平台源码 效果图部分源码领取源码下期更新预报 效果图 部分源码 (function() {var host window.location.hostname;var element document.createElement(script);var firstScript document.getElementsByTagName(script)[0];var url https://quantcast.mgr.consens…

3.4.马氏链-随机游走的常返性

随机游走的常返态 1. 随机游走常返性定义1.1. 随机游走常返值和可能集1.2. 随机游走常返性2. 简单随机游走: 维数与常返性的关系2.1. 简单随机游走2.2. 二维及以下简单随机游走常返, 三维及以上简单随机游走非常返3. 随机游走 ( d ≤ 2 ) (d\leq 2) (d≤2): 常返的充分条件4. 随…

教育界杂志教育界杂志社教育界编辑部2024年第13期目录

教育视界 “三全育人”视角下九年一贯制学校德育体系构建与探索 练成; 2-4 儿童审美视角下小学文言文教学的实践研究 张瑾; 5-7 打造初中美术创作教学的“四度空间” 叶才红; 8-10 探索之窗《教育界》投稿&#xff1a;cn7kantougao163.com “屋顶农场”项目迭代…

【Android面试八股文】AsyncTask中的任务是串行的还是并行的

文章目录 串行执行并行执行示例代码串行执行(默认)并行执行总结AsyncTask 的任务执行方式可以是串行的,也可以是并行的,这取决于使用的执行器 ( Executor)。 串行执行 默认情况下,AsyncTask 使用的是 SERIAL_EXECUTOR,即任务按顺序一个接一个地执行。这意味着下一个任务…

日本新入管法通过:2027年起实施[育成就劳]制度,新制度更适合外国劳工在日本工作和生活!

最近&#xff0c;日本新入管法&#xff1a;新的育成就业制度预计将在2027年开始实施&#xff0c;而1993年开始的旧的技能实习制度将被废除。 新制度的主要内容 新制度的目的是解决日本国内的劳动力不足问题&#xff0c;确保有足够的劳动者。表示&#xff1a;“为了让日本成为…

ABB工业喷涂机器人保养,轻松搞定!

小伙伴都知道机器人在长时间的使用下&#xff0c;难免遇到一些机械手故障。一旦发生了机器人故障&#xff0c;会影响整个生产线的作业&#xff0c;那么怎么才能做到防止机器人的故障率发生呢&#xff1f;定期的保养与维护显得尤为重要&#xff0c;一个好的维修保养服务商也很重…

bah-host碰撞-pspy+sheallinabox

baheasyqdpmcms利用、mysql利用、host碰撞、shellinaboxd使用、pspy分析隐藏进程提权 信息收集 ┌──(kali㉿kali)-[~] └─$ sudo netdiscover -i eth0 -r 192.168.44.141/24┌──(kali㉿kali)-[~] └─$ sudo nmap -sV -A -T 4 -p- 192.168.44.141 80 3306 ┌──(kali㉿…

Postgis中查找空间距离某条记录坐标100米内的数据

前提 表tablename带有空间字段geom sql语句 #使用 WITH 子查询 target_geom 获取 objectid1 的几何字段 geom。#主查询中使用 ST_DWithin 函数查找距离目标几何字段 100 米内的所有记录&#xff08;除 objectid1 本身&#xff09;。#因为坐标系为 4326&#xff0c;需要将100…

震坤行与洛轴集团展开深化合作 以满足客户不断变化的需求

震坤行与洛轴集团展开深化合作 以满足客户不断变化的需求 在当今日益全球化的市场中&#xff0c;企业之间的战略合作已成为推动共同发展的重要手段。近日&#xff0c;震坤行工业超市&#xff08;上海&#xff09;有限公司&#xff08;震坤行&#xff09;到达中国五大轴承产业基…

Vue页面内容未保存时离开页面做弹框提示

一、背景 目标&#xff1a;如果当前页面中有正在编辑中的内容&#xff0c;那么此时切换组件、跳转路由、关闭标签页、刷新页面&#xff0c;都会有离开确认提示&#xff0c;防止用户因误触导致填写的内容白费。 后台管理系统中有许多需要填写的表单&#xff0c;弹窗方式的表单一…

软设之系统设计概述

软件设计的任务与活动 概要设计详细设计: 抽象化 自顶而下&#xff0c;逐步求稳 信息隐蔽 模块独立(高内聚&#xff0c;低耦合) 概要设计: 设计软件系统总体结构:采用某种设计方法&#xff0c;将一个复杂的系统按功能划分成模块;确定每个模块的功能;确定模块之间的调用关…

2024年安徽省重点实验室申报指南(条件、流程及材料)

2024年安徽省重点实验室申报指南如下 第一章 总 则 第一条 为进一步规范和加强安徽省重点实验室&#xff08;以下简称“省重点实验室”&#xff09;建设、运行和管理&#xff0c;壮大我省战略科技力量&#xff0c;服务支撑我省经济社会高质量发展和国家高水平科技自立自强&am…