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

一、基于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.mfbz.cn/a/313556.html

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

相关文章

LeNet-5(用于手写体字符识别)

结构:输入的二维图像,先经过两次卷积层到池化层,再经过全连接层,最后使用softmax分类作为输出层 每层有多个Feature Map(每个Feature Map有多个神经元) Feature Map通过一种卷积滤波器提取输入的一种特征 …

19. 从零用Rust编写正反向代理, 配置数据的热更新原理及实现

wmproxy wmproxy是由Rust编写,已实现http/https代理,socks5代理, 反向代理,静态文件服务器,内网穿透,配置热更新等, 后续将实现websocket代理等,同时会将实现过程分享出来&#xff…

vue3.2引用unplugin-vue-components插入,解放开发中import组件

目录 前言引用unplugin-vue-components插件的优缺点优点缺点 unplugin-vue-components插件引入安装插件配置vite配置更新TypeScript配置使用代码位置 总结Q&A 前言 unplugin-vue-components是一个用于Vue.js项目的插件,特别适用于Vite和Webpack构建工具。它的主…

区块链是怎么存储数据的?

每个块都是有大小限制的新的数据存储单元,当前数据不到上限,那么都可以添加进块。当前数据达到了上限,那么就得分表/分块,超限的那部分数据就需要等待下个区块存储 存储的数据:和mysql一样,文本数据直接存储…

【ceph】在虚拟环境中需要给osd所在的虚拟盘扩容操作

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》:python零基础入门学习 《python运维脚本》: python运维脚本实践 《shell》:shell学习 《terraform》持续更新中:terraform_Aws学习零基础入门到最佳实战 《k8…

CAD点划线如何绘制?

CAD作为一款专业的制图软件,应用范围非常广泛,在所有需要精准数据的行业都会用到它。其中,公路交通工程等行业应用CAD软件是最多的,而且在这些行业中CAD软件中的线段应用也是最广泛的,其中的点划线在公路设计中用的是最…

MySQL一主一从读写分离

​ MySQL主从复制 一、主从复制概念 主从复制是指将主数据库的DDL和DML操作通过二进制日志传到从服务器中,然后在从服务器上对这些日志重新执行也叫重做,从而使得从数据库和主库的数据保持同步。 MySQL支持一台主库同时向多台从库进行赋值,从…

恒通未来-大数据传输中的WDM解决方案

DWDM的出现是光纤传输技术发展中最新的重要现象之一。本教程将介绍DWDM技术的基本原理,如组件、DWDM系统中使用的光放大器等。 组件和操作: DWDM是光传输网络中的一种核心技术。DWDM的基本组件可以根据其在系统中的位置进行分类。在发射方面&#xff0…

ChatGPT:人工智能与人类交流的桥梁

在人工智能的浪潮中,ChatGPT以其独特的交流能力成为了一个亮点。作为一个基于强大的GPT-4模型的聊天机器人,ChatGPT不仅仅是技术的展示,它更是人工智能与人类交流的桥梁。 人工智能的语言理解革命 ChatGPT的出现标志着人工智能在语言理解和…

ADI官方例程HDL和No-OS生成Vivado工程

源码下载 1、HDL(hdl-hdl_2019_r2.zip):https://github.com/analogdevicesinc/hdl/tree/main 2、No-OS(no-OS-2019_R2.zip):https://github.com/analogdevicesinc/no-OS/tree/main 软件工具 序号名称说明1Vivado 2019.12Cygwin Cygwin安装 1.安装步…

学生服务器是什么?推荐几款学生专享便宜服务器

随着科技的飞速发展,互联网已经成为我们生活中不可或缺的一部分。对于学生来说,拥有一个自己的服务器,不仅可以提供稳定、高效的网络服务,更可以成为探索和学习云计算、大数据等前沿技术的平台。本文将为学生朋友们推荐几款专享的…

好习惯修炼法则-1

2024年1月12日--读书笔记--好习惯修炼法则:《好习惯修炼法则:用3分钟改善你的生活习惯》([日]桦泽紫苑)【摘要 书评 试读】- 京东图书 (jd.com) 养成好的睡眠习惯,不仅可以提升免疫力,而且可以提高工作效率!当有工作任…

vue前端开发自学,插槽练习第二次,name属性的使用

vue前端开发自学,插槽练习第二次,name属性的使用!可以使用name属性,来自定义一个名字,这样,就可以在一个组件内同时出现多个插槽的内容了。在子组件内接收的时候,很简答,只需要在slot标签里面加上name“mz”&#xff1…

云服务器十大服务商——云服务器哪家好用

云服务器哪家便宜?2024最新整理你要的都在这!头部云厂商阿里云、腾讯云、华为云、京东云、UCloud等都在降价,阿腾云atengyun.com分享2024年云服务器租用价格给你惊喜! 便宜云服务器阿里云腾讯云华为云 2024年便宜云服务器汇总&…

ssm基于Javaweb的网上花店系统的设计与实现论文

摘 要 进入21世纪网络和计算机得到了飞速发展,并和生活进行了紧密的结合。目前,网络的运行速度以达到了千兆,覆盖范围更是深入到生活中的角角落落。这就促使网上购物系统的发展。网上购物可以实现远程购物,远程选择喜欢的商品和随…

3万字数据结构与算法学习笔记+知识点总结

文章目录 数据结构与算法排序排序算法常见排序算法复杂度冒泡排序(Bubble Sort)选择排序(Selection Sort)插入排序(Insertion Sort)希尔排序(Shell Sort)堆排序(Heap Sor…

协作共生:数字孪生与智慧城市的共赢之路

引言 随着科技的飞速发展,数字孪生和智慧城市的概念逐渐融入现代城市的规划和建设中。数字孪生技术为智慧城市的建设提供了强大的支持,而智慧城市则为数字孪生的应用提供了广阔的舞台。本文将深入探讨数字孪生与智慧城市之间的相互影响与协作&#xff0…

【QT】标准对话框

目录 1 概述 2 QFileDialog对话框 1.选择打开一个文件 2.选择打开多个文件 3.选择已有目录 4.选择保存文件名 3 QColorDialog对话框 4 QFontDialog对话框 5 QInputDialog标准输入对话框 1.输入文字 2.输入整数 3.输入…

Sublime Text 3配置 Python 开发环境

Sublime Text 3配置 Python 开发环境 一、引言二、主要内容1. 初识 Sublime Text 32. 初识 Python2. 接入 Python2.1 下载2.2 安装和使用 python2.2 环境变量配置 3. 配置 Python 开发环境4. 编写 Python 代码5. 运行 Python 代码 三、总结 一、引言 Python 是一种简洁但功能强…

用 docker 创建 jmeter 容器, 实现性能测试

前言 我们都知道,jmeter可以做接口测试,也可以用于性能测试,现在企业中性能测试也大多使用jmeter。docker是最近这些年流行起来的容器部署工具,可以创建一个容器,然后把项目放到容器中,就可以构建出一个独立…