怎样创建vue项目(分别基于vue-cli和vite两种的创建方式)

news2024/11/18 5:47:57

一、基于vue-cli脚手架创建

1、安装node.js

1、首先需要安装node.js,推荐下载地址:Node.js

2、检查是否安装成功,使用打开黑窗口的快捷键window+R,输入cmd,在黑窗口输入node -v,如果输出版本号,就说明安装node环境成功,

2、vue-cli搭建Vue开发环境

Vue CLI:命令行界面,俗称脚手架,Vue CLI 是一个基于webpack实现的,Vue CLI 是一个官方发布vue.js项目脚手架,使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

vue-cli的使用前提:安装过Node环境和Webpack

webpack的全局安装:黑窗口输入npm install webpack -g

(1)安装Vue CLI:命令行输入npm install -g@vue/cli
npm install -g @vue/cli
(2)检查是否安装成功:命令行输入vue --version,输出版本号就说明安装成功

3、创建vue项目

(1)、在想要创建项目的文件夹中输入cmd打开命令行并输入vue create "文件名"

(2)进入该页面,按需进行选择和配置

(3)出现以下页面,即为创建成功

4、启动vue项目

两种启动方式:

(1)命令行启动:

(2)把项目拉到vscode中,打开终端

首先,使用npm i 或npm install :安装依赖,根据项目中的package.json文件自动下载项目所需的全部依赖。

查阅了其他文章发现这两种有些许区别:

(2)运行:不同的项目的运行命令不同,可以在package.json中进行查看

可得该项目的运行命令为:npm run serve

 二、基于vite创建(官方推荐)

1、什么是vite?

vite是新一代前端构建工具,和webpack是等价的,构建速度比webpack要快,对TypeScript、JSX、CSS等不用配置什么东西,可以直接进行使用。vite的创建过程是按需编译。

 2、创建命令:

npm create vue@latest

 3、具体配置:

 1.创建命令
npm create vue@latest

 2.具体配置
配置项目名称
Project name: vue3_test


是否添加TypeScript支持
 Add TypeScript?  Yes


是否添加JSX支持
Add JSX Support?  No


是否添加路由环境
Add Vue Router for Single Page Application development?  No


是否添加pinia环境
Add Pinia for state management?  No


是否添加单元测试
Add Vitest for Unit Testing?  No


是否添加端到端测试方案
Add an End-to-End Testing Solution? » No


 是否添加ESLint语法检查
Add ESLint for code quality?  Yes


是否添加Prettiert代码格式化
Add Prettier for code formatting?  No

 

 

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

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

相关文章

iOS 调试工具CocoaDebug

1、使用pod工具在项目里面添加CocoaDebug的SDK。 platform :ios, 11.0target ShopService doproject ShopServiceuse_frameworks!pod CocoaDebug, :configurations > [Debug]end2、之后就可以在项目里面看到效果了 APP上显示的是一个黑色背景的小圆圈。 上面39表示调用了39…

three.js 使用 tweenjs绘制相机运动动画

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div class"box-right"…

挖到宝啦,大部分人都不知道的企业内部知识库搭建方法

在竞争激烈的现代社会中&#xff0c;企业要取得成功&#xff0c;必须拥有自己的知识库。这是企业能力的一种体现&#xff0c;也是其取得竞争优势的主要途径之一。所谓知识库&#xff0c;就是把企业内部的各种知识&#xff0c;包括技术、管理、市场等方面的知识进行系统化、结构…

电脑删除文件夹时提示“已在另一个程序中打开”

我们在使用电脑删除某个文件夹&#xff0c;特别是一些程序卸载后的残留文件夹时&#xff0c;可能会出现“操作无法完成&#xff0c;因为其中的文件夹或文件已在另一个程序中打开”的弹窗提示。有些是可以在任务管理器中关闭某个进程的占用来解决&#xff0c;但是有些却难以找到…

idea使用ssh连接docker,并通过Dockerfile文件,直接在idea中启动docker应用,并进行远程debug

idea使用ssh连接docker&#xff0c;并通过Dockerfile文件&#xff0c;直接在idea中启动docker应用&#xff0c;并进行远程debug 第一步: idea通过ssh连接docker第二步&#xff1a;使用Dockerfile文件在远程启动应用第三步: 远程debug 容器运行的好处是减轻本地运行的负担(本地电…

挑选全身动作捕捉设备需要看哪几点?

随着数字化发展&#xff0c;虚拟数字人成为企业、品牌营销中不可或缺的一环&#xff0c;虚拟数字人可以通过全身动作捕捉设备&#xff0c;能够打破次元壁与用户实时互动。那要怎么挑选全身动作捕捉设备呢&#xff1f; 广州虚拟动力推出了旗舰版惯性动捕设备DreamsCap X1&#…

Arthas idea插件分析接口耗时

参考&#xff1a; https://www.cnblogs.com/yifanSJ/p/17720999.html IDEA集成Arthas排查接口耗时_idea查看接口每个方法运行时间插件-CSDN博客 1.本地启动arthas curl -O https://arthas.aliyun.com/arthas-boot.jar java -jar arthas-boot.jar 2.本地访问arthas http:/…

电子签章系统,怎么做到大量文件自动电子签章?

在当今信息爆炸的时代&#xff0c;海量文件的签署管理成为各行业面临的挑战之一。电子签章系统的出现&#xff0c;为解决这一问题提供了有效途径。本文将探讨电子签章系统如何实现海量文件自动签章&#xff0c;提高工作效率并确保安全性。 钉钉、企微、飞书、OA、CRM、ERP等&a…

做一个个人博客第一步该怎么做?

做一个个人博客第一步该怎么做&#xff1f; 好多零基础的同学们不知道怎么迈出第一步。 那么&#xff0c;就找一个现成的模板学一学呗&#xff0c;毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题&#xff0c;那就是&#xff0c;那些模板都&#xff0c;太&#xff01;…

Vue3-watchEffect实现

原watch写法 watchEffect写法 全自动监视 官网:立即运行一个函数&#xff0c;同时响应式地追踪其依赖&#xff0c;并在依赖更改时重新执行该函数 watch 对比 watchEffect 都能监听响应式数据的变化&#xff0c;不同的是监听数据变化的方式不同watch : 要明确指出监视的数据 w…

RFID对分拣物料工序带来质的提升

RFID对分拣物料工序带来质的提升 物料分拣按照传统的人工辨认分拣&#xff0c;不仅效率不高还容易出现人为错误。分拣错误的货物流到后续生产工序可能导致产品只能报废处理&#xff0c;严重影响生产效率、报废处理还造成经济损失。现在的科技水平也推出不少替换人工的方案&…

云服务器哪家强?当属阿里云腾讯云or华为云?

云服务器哪家强?当属阿里云腾讯云or华为云&#xff1f;云服务器哪家便宜&#xff1f;2024最新整理你要的都在这&#xff01;头部云厂商阿里云、腾讯云、华为云、京东云、UCloud等都在降价&#xff0c;阿腾云atengyun.com分享2024年云服务器租用价格给你惊喜&#xff01; 便宜云…

NVMe系统内存结构 - PRP与PRP List

NVMe系统内存结构 - PRP与PRP List 1 为什么需要PRP2 PRP3 PRP List4 PRP寻址算法4.1 仅PRP1指向数据4.2 PRP1指向数据&#xff0c;PRP2指向数据4.3 PRP1指向数据&#xff0c;PRP2指向PRP List 本文属于《 NVMe协议基础系列教程》之一&#xff0c;欢迎查看其它文章。 1 为什么…

3D PDF查看器HOOPS Publish助力Smartscape拓展日本AEC市场!

​ 公司&#xff1a;Smartscape Co., Ltd. 行业&#xff1a;建筑、工程和施工(AEC) 软件&#xff1a;适用于AEC行业的3D PDF工具 软件开发工具包&#xff1a;Hoops Publish HOOPS_3D软件开发工具_HOOPS中文网慧都科技是HOOPS全套产品中国地区指定授权经销商&#xff0c;提供3D…

8. 《自动驾驶与机器人中的SLAM技术》基于保存的自定义NDT地图文件进行自动驾驶车辆的激光定位

目录 1. 为 NDT 设计一个匹配度评估指标&#xff0c;利用该指标可以判断 NDT 匹配的好坏。 2. 利用第 1 题的指标&#xff0c;修改程序&#xff0c;实现 mapping 部分的回环检测。 3. 将建图结果导出为 NDT map&#xff0c;即将 NDT 体素内的均值和协方差都存储成文件。 4.…

uniapp中按钮点击跳转页面失效,纠正错误(亲测可用)

不知道伙伴你的错误和我是否一致&#xff1f; 我当时为了点击跳转按钮发现跳转不了&#xff0c;如下错误提示&#xff1a; worker.js?libNameWAAccelerateWorker.js:1 [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021. S…

Flink会话集群docker-compose一键安装

1、安装docker 参考&#xff0c;本人这篇博客&#xff1a;https://blog.csdn.net/taotao_guiwang/article/details/135508643?spm1001.2014.3001.5501 2、flink-conf.yaml flink-conf.yaml放在/home/flink/conf/job、/home/flink/conf/task下面&#xff0c;flink-conf.yaml…

先爬、再行、最后跑,“流程挖掘之父”Wil教授谈流程挖掘的突破之路

商界有句俗话&#xff1a;“先爬&#xff0c;再行&#xff0c;最后跑”。这正是实现有价值突破的过程。 作者 | Wil van der Aalst教授 海明威在他的某部作品中描绘了这样一幕&#xff1a;有人询问如何走向破产&#xff0c;得到的答案是“开始时循序渐进&#xff0c;之后突然…

社科院与杜兰大学金融管理硕士——深耕自己的领域,才能在竞争中脱颖而出

在全球化的浪潮中&#xff0c;金融行业作为经济的核心&#xff0c;面临着前所未有的挑战与机遇。金融人员如同航行在大海上的巨轮&#xff0c;既需要应对汹涌波涛&#xff0c;又需要把握远大前程。在这个领域里&#xff0c;知识就是不断更新的航线&#xff0c;引导着金融人员破…

申请ZeroSSL泛域名域名证书 并部署阿里云测试

安装acme.sh 安装过程中可能会失败 多试几次就会成功 wget -O - https://raw.githubusercontent.com/acmesh-official/acme.sh/master/acme.sh | sh -s -- --install-online -m 你的邮箱gmail.com安装完成后重新加载 Bash&#xff1a; source ~/.bashrc然后也可以开启自动更…