新建vue3项目

news2025/1/16 3:20:54

提示:请确定自己已将安装好环境以及一系列用到的工具包,例如node(10以上),pnpm或npm

vue官网:https://cn.vuejs.org/

vue-cli官网:Vue CLI

vite官网:Vite | 下一代的前端工具链

介绍:关于创建vue项目的两种方法:一种是使用vue-cli,另一种是使用Vite创建项目,关于两种的区别以下为ai回答

Vue CLI和Vite是两种在Vue.js项目中常用的构建工具,它们各自具有不同的特点和用途。以下是关于Vue CLI和Vite的详细解释以及它们之间的主要区别:

Vue CLI
定义与用途:
Vue CLI(Vue Command Line Interface)是一个基于Vue.js进行快速开发的完整系统,它提供了丰富的功能和插件系统,使得开发者能够轻松地创建和管理Vue.js项目。Vue CLI是Vue.js官方提供的脚手架工具,它集成了Webpack等现代前端工具,为开发者提供了开箱即用的开发体验。

主要特点:

自动化项目搭建:Vue CLI能够自动生成Vue和Webpack的项目模板,帮助开发者快速启动项目。
灵活的Webpack配置:Vue CLI允许开发者通过vue.config.js文件对Webpack进行细粒度的配置,以满足项目的特定需求。
丰富的插件系统:Vue CLI拥有丰富的官方插件和社区插件,这些插件可以扩展Vue CLI的功能,实现各种定制化的需求。
热重载和Lint校验:Vue CLI内置了热重载和保存时Lint校验功能,提高了开发效率。
Vite
定义与用途:
Vite是一个现代化的前端构建工具,它利用原生ES模块导入特性,实现了快速的冷启动(Cold Start)。Vite旨在提供比传统打包工具(如Webpack)更快的开发服务器启动速度和更丰富的功能。

主要特点:

极速的启动速度:Vite在开发环境下,通过浏览器直接解析和加载模块,避免了Webpack等传统打包工具复杂的打包过程,从而实现了极速的启动速度。
按需编译:Vite在生产环境下使用Rollup作为打包工具,支持按需编译,即只编译当前需要的模块,进一步提高了构建效率。
原生ES模块支持:Vite充分利用了现代浏览器对ES模块的原生支持,使得代码在开发环境中可以直接被浏览器解析和执行。
热模块替换(HMR):Vite支持热模块替换功能,能够在不刷新页面的情况下,实时更新修改后的模块代码。
Vue CLI与Vite的区别
实现原理:Vue CLI基于Webpack进行项目构建,而Vite则利用原生ES模块和Rollup进行构建。
开发环境速度:Vite的开发环境启动速度通常比Vue CLI更快,因为它避免了复杂的打包过程。
构建速度:在大型项目中,Vue CLI的构建速度可能相对较慢,因为Webpack需要处理所有依赖和模块。而Vite通过按需编译和缓存机制,通常能够提供更快的构建速度。
插件系统:Vue CLI使用Webpack的插件系统,拥有丰富的插件资源。Vite则使用自己的插件系统,并且由于它相对较新,插件生态可能不如Webpack成熟。
使用场景:Vue CLI适用于需要高度可定制化和灵活配置的项目。而Vite则更适合追求快速开发和极致体验的现代前端项目。
综上所述,Vue CLI和Vite各有其优势和特点。开发者在选择时,应根据项目的具体需求和个人的开发习惯来进行选择。

1.无论哪种开发方法,我们先要进入指定目录,首先进入到需要新建项目的文件目录,直接在文件路径里输入’cmd‘,回车后就会打开命令行窗口

2.利用vite创建vue3项目

方式一:

## 创建项目
npm init vite-app 项目名
## 进入项目目录
cd 项目名
## 安装依赖
npm install
## 运行
npm run dev

 创建出来的项目如下

 

关于项目初始化可参考这篇文章:http://t.csdnimg.cn/54vlG 

3.利用vue-cli创建vue3项目:

        ①先通过命令行判断是否有安装@vue/cli 并且版本在4.5.0以上

vue --version

         ②关于安装@vue/cli和卸载@vue/cli的命令

卸载(如果版本符合可以不用卸载)
npm uninstall vue-cli -g

全局安装
npm install -g @vue/cli

        ③安装完之后,可通过①中的命令来判断是否安装好了,如果返回版本就代表安装好了,现在开始新建项目,在对应文件夹的路径输入命令

vue create 项目名

如果出现这行代表他让你用阿里镜像,可以选y

回车后,选择版本 ,通过上下键切换,此处我们选择自定义创建项目,选中后回车

选择配置,上下键切换,空格选中,选好后回车

 选择版本,选好后回车

 关于接下来每行问题的解释可参考这篇文章:http://t.csdnimg.cn/fMZIH ,或者复制问题到百度翻译

 

 下面这步选择哪个都可以,看你装了什么

然后出现这按顺序敲就好了,分别是进入文件夹,启动

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

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

相关文章

高薪程序员必修课-Java中 Synchronized和ReentrantLock有哪些不同?

目录 前言 1. 原理和基础 synchronized ReentrantLock 2. 功能比较 2.1 锁的可重入性 示例: 2.2 锁的公平性 示例: 2.3 锁的中断响应 示例: 2.4 尝试锁定 示例: 2.5 条件变量 示例: 3. 性能比较 4. 使…

【CT】LeetCode手撕—232. 用栈实现队列

目录 题目1- 思路2- 实现⭐232. 用栈实现队列——题解思路 3- ACM 实现 题目 原题连接:232. 用栈实现队列 1- 思路 思路 ① 用两个栈来实现队列,一个 in 入栈 和一个 out 出栈② push 入队:入栈逻辑:即将元素加入到 in 栈 里即…

基于Redisson实现分布式锁

基于redisson实现分布式锁 之前背过分布式锁几种实现方案的八股文,但是并没有真正自己实操过。现在对AOP有了更深一点的理解,就自己来实现一遍。 1、分布式锁的基础知识 分布式锁是相对于普通的锁的。普通的锁在具体的方法层面去锁,单体应…

Android-卷积神经网络(Convolutional Neural Network, CNN)

一个复杂且在Android开发中常见的算法是图像处理中的卷积神经网络(Convolutional Neural Network, CNN)。CNN被广泛用于图像识别、物体检测和图像分割等任务,其复杂性在于需要处理大量的图像数据、复杂的神经网络结构和高效的计算。 1. 卷积操作(Convolution) 数学原理:…

爬虫-豆瓣电影排行榜

获取数据 requests库 获取数据环节需要用到requests库。安装方式也简单 pip install requests 爬取页面豆瓣读书 Top 250 用requests库来访问 import requests res requests.get(https://book.douban.com/top250/) 解析: 导入requests库调用了requests库中的…

界面材料知识

界面材料是用于填充芯片和散热器之间的空隙,将低导热系数的空气挤出,换成较高导热系数的材料,以提高芯片散热能力。参考下图 图片来源网上 热阻是衡量界面材料性能最终的参数,其中与热阻有关的有: 1、导热系数&#x…

Land survey boundary report (template)

Land survey boundary report (template) 土地勘测定界报告(模板).doc

介绍几种 MySQL 官方高可用方案

前言: MySQL 官方提供了多种高可用部署方案,从最基础的主从复制到组复制再到 InnoDB Cluster 等等。本篇文章以 MySQL 8.0 版本为准,介绍下不同高可用方案架构原理及使用场景。 1.MySQL Replication MySQL Replication 是官方提供的主从同…

Games101学习笔记 Lecture16 Ray Tracing 4 (Monte Carlo Path Tracing)

Lecture16 Ray Tracing 4 (Monte Carlo Path Tracing 一、蒙特卡洛积分 Monte Carlo Integration二、路径追踪 Path tracing1.Whitted-Style Ray Tracings Problems2.只考虑直接光照时3.考虑全局光照①考虑物体的反射光②俄罗斯轮盘赌 RR (得到正确shade函数&#x…

Spring Boot 文件上传和下载指南:从基础到进阶

文章目录 引言1. 环境配置2. 文件上传2.1 配置文件上传路径2.2 创建上传服务2.3 创建上传控制器 3. 文件下载3.1 创建下载服务3.2 创建下载控制器 4. 前端页面4.1 文件上传页面4.2 文件下载页面 5. 技术分析结论 🎉欢迎来到SpringBoot框架学习专栏~ ☆* o(≧▽≦)o …

Dns被莫名篡改的逆向分析定位(笔记)

引言:最近发现用户的多台机器上出现了Dns被莫名修改的问题,从系统事件上看并未能正常确定到是那个具体软件所为,现在的需求就是确定和定位哪个软件具体所为。 解决思路: 首先到IPv4设置页面对Dns进行设置:通过ProcExp…

@react-google-maps/api实现谷歌地图中添加多边围栏,并可编辑,编辑后可获得围栏各个点的经纬度

先上一张效果图 看看是不是大家想要的效果~ ❤️ 由于该功能微微复杂一点,为了让大家精准了解 我精简了一下地图代码 大家根据自己的需求将center值和paths,用setState做活就可以了 1.第一步要加入项目package.json中或者直接yarn install它…

假设性文档嵌入 HyDE:大模型 + 对比学习,从关键词相似度搜索到语义搜索

假设性文档嵌入 HyDE:大模型 对比学习,从关键词相似度搜索到语义搜索 提出背景流程图解法拆解类比1. 单一文档嵌入空间的搜索2. 指令跟随型语言模型(InstructLM)的引入3. 生成文档的嵌入编码 提出背景 论文:https://…

2024亚太杯中文赛数学建模B题【洪水灾害的数据分析与预测】思路详解

2024 年第十四届 APMCM 亚太地区大学生数学建模竞赛 B题 洪水灾害的数据分析与预测 附件 train.csv 中提供了超过 100 万的洪水数据,其中包含洪水事件的 id、季风强度、地形排水、河流管理、森林砍伐、城市化、气候变化、大坝质量、淤积、农业实践、侵蚀、无效防灾、…

一文搞懂 java 线程池:ScheduledThreadPool 和 WorkStealingPool 原理

你好,我是 shengjk1,多年大厂经验,努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注!你会有如下收益: 了解大厂经验拥有和大厂相匹配的技术等 希望看什么,评论或者私信告诉我! 文章目录 一…

Google Gemini:大上下文窗口是杀手级功能吗?

在八个月前,一封泄露的谷歌电子邮件透露,谷歌正努力超越其人工智能竞争对手。谷歌不仅没有围绕其人工智能产品的护城河——换句话说,没有建立起商业优势——也没有可以改变现状的秘诀。就在他们努力解决这个问题的同时,他们也看到…

SpringSecurity中文文档(Servlet Password Storage)

存储机制(Storage Mechanisms) 每种支持的读取用户名和密码的机制都可以使用任何支持的存储机制: Simple Storage with In-Memory AuthenticationRelational Databases with JDBC AuthenticationCustom data stores with UserDetailsServic…

2024/07/04

1、梳理笔记(原创) 2、终端输入一个日期&#xff0c;判断是这一年的第几天 scanf("%d-%d-%d",&y,&m,&d); 闰年2月29天&#xff0c;平年2月28天 #include<stdio.h> int main(int argc, char const *argv[]) {int y0,m0,d0;printf("please ente…

KBL610-ASEMI无人机专用整流桥KBL610

编辑&#xff1a;ll KBL610-ASEMI无人机专用整流桥KBL610 型号&#xff1a;KBL610 品牌&#xff1a;ASEMI 封装&#xff1a;KBL-4 最大重复峰值反向电压&#xff1a;1000V 最大正向平均整流电流(Vdss)&#xff1a;6A 功率(Pd)&#xff1a;中小功率 芯片个数&#xff1a…

【每天学会一个渗透测试工具】SQLmap安装教程及使用

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 ✨SQLmap简介 Sqlmap是一款开源的渗透测试工具 &#x1f680;下载及安装 下载地址&#xff1a;http://sqlmap.org/ windo…