vue3 ts vite 项目快速构建

news/2024/4/30 5:52:05/文章来源:https://www.cnblogs.com/songfengyang/p/16726825.html

1.安装nodejs(建议装14版本稳定)

下载 | Node.js 中文网

装完之后会有一个命令叫 npm

可以在终端输入npm -v 来检查是否安装成功

 

 

2.构建vite项目
官方文档开始 {#getting-started} | Vite中文网

vite 的优势

冷服务 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入

HMR 速度快到惊人的 模块热更新(HMR)

Rollup打包 它使用 Rollup 打包你的代码,并且它是预配置的 并且支持大部分rollup插件

使用vite初始化一个项目

npm

npm init vite@latest
Yarn

yarn create vite
运行之后

项目名称

 

 

构建的项目模板

 

 

切换目录

npm install 安装依赖包

npm run dev 启动

 

 

package json 命令解析

{
"scripts": {
"dev": "vite", // 启动开发服务器,别名:`vite dev`,`vite serve`
"build": "vite build", // 为生产环境构建产物
"preview": "vite preview" // 本地预览生产构建产物
}
}
3.安装Vue cli脚手架
npm install @vue/cli -g

检查是否安装成功

 

 

vue create <project>

构建我们的cli 项目可以去对比一下

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

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

相关文章

Java操作HDFS

1. 创建maven项目 New Project 2. 添加依赖 <!-- https://mvnrepository.com/artifact/org.apache.hadoop/hadoop-client --><dependency><groupId>org.apache.hadoop</groupId><artifactId>hadoop-client</artifactId><version>2.…

steam搬砖汇率差项目详解

很久没有分享赚钱项目了&#xff0c;今天这里给大家介绍一个游戏搬砖的项目&#xff1a;steam游戏汇率差赚钱项目。 项目原理&#xff1a; Steam平台是一个国外游戏及装备售卖平台。而我们所谓的Steam游戏装备搬砖就是利用steam平台和网易的BUFF平台来操作。steam汇率差赚钱原…

十大经典排序算法综述(Java代码实现,思想通用)

关于十大排序的文章也有不少了&#xff0c;但感觉大部分在各个排序算法的适用场景、如何实现外排等细节方面没怎么讲&#xff0c;故总结了这篇文章&#xff0c;欢迎浏览 一、前言 内部排序是指排序时将待排序数据全部加载到内存的算法。 外部排序是指在处理海量数据排序时&…

什么是C语言?

什么是C语言&#xff1f; 文章目录什么是C语言&#xff1f;1.C语言的起源2.C语言的使用领域3. 为什么要学习C语言4.C语言的学习境界5.如何学习C语言6.学习C语言的推荐书籍1.C语言的起源 C语言之父是丹尼斯里奇&#xff1a;丹尼斯里奇&#xff08;1941年9月9日-2011年10月12日&…

Linux 简单命令 - cron 计划任务 、NTP

Linux 简单命令 - cron NTP cronNTP 一、cron 计划任务就是按照系统的时间(时刻、周期)执行指定的任务 系统服务&#xff1a; crond。 配置文件&#xff1a; /etc/crontab /var/spool/cron/用户名 配置记录格式&#xff1a; 分 时 日 月 周 任务操作命令 (用绝对路径、必要时…

集成学习详解

入门小菜鸟&#xff0c;希望像做笔记记录自己学的东西&#xff0c;也希望能帮助到同样入门的人&#xff0c;更希望大佬们帮忙纠错啦~侵权立删。 目录 一、集成学习的产生原因与相关定义 1、产生原因 2、相关定义 &#xff08;1&#xff09;同质集成 &#xff08;2&#xf…

第三章 学校与班级管理

01 学校组织与管理 02 班级与班集体 03 班主任与班主任工作 04 班级活动与班队活动 05 课外活动 02 班级与班集体 一、班级与班集体 二、班级管理 三、班级突发事件的处理 一、班级与班集体 &#xff08;一&#xff09;班级 了解 年龄、知识程度相近&#xff0c;有共同的学…

python学习—第一步—Python小白逆袭大神(第二天)

python进阶python语法继续学习数据结构数字字符串列表元组字典面向对象继承JSON异常处理try except finallyLinux命令作业来啦&#xff01;问题python语法继续学习 数据结构 数字 Number类型用于存储数值。 1、数学运算math模块及常用函数 菜鸟教程 导入math 代码示例&#…

微信小程序事件和页面跳转

一、页面跳转 1.非TabBar页面 一个小程序拥有多个页面&#xff0c;我们通过wx.navigateTo进入一个新的页面 我们通过下边点击事件实现页面跳转进行代码实现及参考 wx.navigateBack&#xff08;&#xff09;回退到上一个页面 wx.redirectTo&#xff08;url&#xff09;删除…

最新AWVS14.9.220913107 支持Windows使用教程(附下载地址)

主要内容&#xff1a;awvs14.9下载、awvs14.9使用教程、awvs14.9安装教程、awvs14.9批量扫描、awvs14.9用法、awvs最新版下载 使用方法 一键PJ 一键PJ则只需要在安装Acunetix软件后&#xff0c;运行pj工具即可 通用思路 修改hosts文件&#xff08;C:\Windows\System32\driv…

15天深度复习JavaWeb的详细笔记(十一)——VUE、Element

文章目录demo11-VUE、Element1&#xff0c;VUE1.1 概述1.2 快速入门1.3 Vue 指令1.3.1 v-bind & v-model 指令1.3.2 v-on 指令1.3.3 条件判断指令1.3.4 v-for 指令1.4 生命周期2&#xff0c;Element2.1 快速入门2.2 Element 布局2.2.1 Layout 局部2.2.2 Container 布局容器…

Spring 注解

事务注解 使用注解 EnableTransactionManagement 开启事务支持后&#xff0c;然后在访问数据库的Service方法上添加注解 Transactional 便可 * EnableTransactionManagement&#xff0c;会额外加载 4 个 bean * BeanFactoryTransactionAttributeSourceAdvisor 事务切面类 …

C# ASP.NET Web Core API (.NET 6.0)

目录 一、简介 二、创建项目 三、启动项目 四、开放访问权限 五、添加其他的API 结束 一、简介 ASP.NET Core Web API 是 ASP.NET Core MVC 的一个功能。ASP.NET Core MVC 包含了对 Web API 的支持。可以构建多种客户端的 HTTP 服务。ASP.NET Core Web API可用于在 .NET…

LeetCode 0328. 奇偶链表

【LetMeFly】328.奇偶链表 力扣题目链接&#xff1a;https://leetcode.cn/problems/odd-even-linked-list/ 给定单链表的头节点 head &#xff0c;将所有索引为奇数的节点和索引为偶数的节点分别组合在一起&#xff0c;然后返回重新排序的列表。 第一个节点的索引被认为是 奇…

8-Arm PEG-ACA,8-Arm PEG-Acrylamide,八臂-聚乙二醇-丙烯酰胺可用于自由基引发剂

一&#xff1a;产品描述 1、名称 英文&#xff1a; 8-Arm PEG-ACA 8-Arm PEG-Acrylamide 中文&#xff1a; 八臂-聚乙二醇-ACA 2、CAS编号&#xff1a;N/A 3、所属分类&#xff1a;Acrylate/Acrylamide PEG Multi-arm PEGs 4、分子量&#xff1a;可定制 5、质量控制&a…

C++之模拟实现<unordered_set/map>及位图和布隆过滤器

目录&#x1f308;前言&#x1f681;1、哈希表的改造&#x1f682;2、模拟实现的完整代码&#x1f683;3、哈希表的应用&#x1f684;3.1、位图的概念&#x1f685;3.2、位图的实现&#x1f686;3.3、位图完整代码&#x1f689;3.4、位图的应用&#x1f687;4、位图的变形&…

qt中的qmake.conf文件

qmake.conf文件是qt用于存放系统平台和编译器相关默认值的配置文件。qt为所支持的各种系统平台和对应编译器附加了相关的配置文件。其位置在QtInstallDIr/Qt5.12.0\5.12.0\msvc2015_64\mkspecs中。 windows台式机系统的默认配置​​​​​​这里的每一个文件夹代表一个qt所支…

医美企业如何玩转私域流量?

医美企业普遍面临的难点 广告投放成本高、客户到店率低、投入产出不成正比&#xff0c;是医美行业的“难隐之痛”。不少医美机构开始布局私域的精细化运营。但不是每个医美机构都能做好&#xff0c;有的机构做私域&#xff0c;复购翻几倍&#xff1b;也有的机构对私域理解还停…

比特币和以太坊抹去早些时候的收益,这就是为什么

随着美元指数 (DXY) 跃升至 20 的 112.87 年高点&#xff0c;加密市场出现了突然的自由落体。 最佳 cryptocurrencies 包括比特币&#xff08;BTC&#xff09;和以太坊&#xff08;ETH&#xff09;在内的一个小时内下跌超过2%。 ​比特币交易价格超过 19 万美元&#xff0c;但…

【HTML——奇幻撕布】(效果+代码)

效果展示 有强迫症的朋友可能会挺喜欢这个的 ~ 代码 下面即为全部源代码: 奇幻撕布.html <!doctype html> <html lang="en">