Vue CLI创建Vue项目详细步骤

🚀 一、安装Node环境(建议使用LTS版本)

在开始之前,请确保您已经安装了Node.js环境。您可以从Node.js官方网站下载LTS版本,以确保稳定性和兼容性。

中文官网下载

请添加图片描述
确认已安装 Node.js。可以在终端中运行 node -v 命令来检查是否已安装。

在这里插入图片描述

⚙️ 二、下载Vue和Vue CLI脚手架

打开命令行终端,执行以下命令来全局安装Vue和Vue CLI:

npm install -g vue @vue/cli

在终端中运行 vue -V 命令来检查是否已安装(这里要大写的V)
请添加图片描述

👣 三、创建Vue项目

在想要创建的位置路径下打开cmd(直接点击路径输入cmd即可打开当前位置的终端)

请添加图片描述

在终端中进入要创建项目的目录,运行以下命令创建新的项目:vue create 。

vue create <project-name>

其中 是要创建的项目名称

请添加图片描述

3.2 🛠️ 进入详细选择

创建过程中,您将进入一个交互式的选择界面,根据您的需求进行配置。

3.2.1 📦 选择创建模式

选择Vue的创建模式:Vue 2.x、Vue 3.x 或自定义。
请添加图片描述

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
myvuepro ([Vue 3] dart-sass, babel, router, vuex, eslint)
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features

3.2.2 🛠️ 选择需要支持的特性

根据项目需求,选择需要支持的特性,如Babel、Router、Vuex等。
请添加图片描述

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press
to select, to toggle all, to invert selection, and
to proceed)
() Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(
) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

我的配置:
请添加图片描述

3.2.3 🌟 选择Vue版本

选择您希望使用的Vue版本,例如2.x或3.x。
请添加图片描述

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router,
Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the
project with (Use arrow keys)
3.x
2.x

3.2.4 🚦 是否选择history路由模式

根据需求选择是否使用history路由模式,这会影响路由的URL显示方式。
请添加图片描述

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router,
Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the
project with 3.x
? Use history mode for router? (Requires proper server setup
for index fallback in production) (Y/n)

这里的意思是问你本次项目是否采用history模式,如果选择Y,需要后台配置具体看vueRouter官网解释,这里我门选择 n

3.2.5 🎨 选择CSS预处理器

选择是否使用CSS预处理器,如Sass、Less等。
请添加图片描述

这里的意思是问你选择哪一种CSS预处理语言,我的项目中一般使用的是SCSS我选择第一个

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router,
Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the
project with 3.x
? Use history mode for router? (Requires proper server setup
for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS
Modules are supported by default): (Use arrow keys)
Sass/SCSS (with dart-sass)
Less
Stylus

3.2.6 📂 格式化代码方式

请添加图片描述

3.2.7 💾代码规则检测

这里的意思是问你什么时候进行代码规则检测,我一般会选择保存就检测,也就是Lint on Save
请添加图片描述

3.2.8

这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪,通常我们会选择放到独立位置,让package.json文件干净点,所以选择第一个
请添加图片描述

3.2.9

请添加图片描述

这里是问你是否记录这次配置选择,选择之后会让你为这次配置起一个名字,这样下次可以直接快速配置选择,最后回车后就会初始化项目了
请添加图片描述

完成后如下图:

3.4 🌐 打开项目文件

使用命令行进入项目目录:

cd project-name

3.5 ▶️ 运行项目并查看页面

运行以下命令以启动开发服务器:

npm run serve

在浏览器中打开显示的URL,即可看到Vue应用的页面。

通过这些步骤,您已经成功地使用Vue CLI创建了一个新的Vue项目,根据项目需求进行了相应的配置。接下来,您可以根据需要进行开发和定制。 Vue CLI的强大功能将为您的项目带来便利和效率!🚀

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

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

相关文章

【mysql报错解决】MySql.Data.MySqlClient.MySqlException (0x80004005)或1366

场景&#xff1a;c#使用mysql数据库执行数据库迁移&#xff0c;使用了新增inserter的语句&#xff0c;然后报错 报错如下&#xff1a; 1.MySql.Data.MySqlClient.MySqlException (0x80004005): Incorrect string value: ‘\xE6\x9B\xB4\xE6\x94\xB9…’ for column ‘Migratio…

Sigmastar SSC8826Q 2K行车记录仪解决方案

一、方案描述 行车记录仪是智能辅助汽车驾驶&#xff0c;和管理行车生活的车联网智能终端设备&#xff0c;利用智能芯片处理器、GPS定位、网络通信、自动控制等技术&#xff0c;将与行车生活有关的各项数据有机地结合在一起。 行车记录仪如今已经成了必不可少的车载用品之一&…

如何在安卓设备上安装并使用 ONLYOFFICE 文档

您可以使用文档安卓版应用&#xff0c;在移动设备上访问存在您 ONLYOFFICE 帐号中的文件。阅读本文&#xff0c;了解如何操作。 什么是 ONLYOFFICE 文档安卓版 适用于 Android 系统的 ONLYOFFICE 文档是一款全面的办公工具&#xff0c;您可以使用它&#xff0c;查看、创建、编…

Apache-Maven

安装Maven 解压apache-maven到目录下 Maven目录如下 bin&#xff1a;目录中存放的是可执行文件&#xff0c;JAVA项目中的编译执行打包都要使用bin. conf:存放的是Maven的配置文件&#xff0c;本地配置、私服配置都需要在conf下的settings.xml进行配置。 lib下存放的是Maven所…

ThreadLocal(超详细介绍!!)

关于ThreadLocal&#xff0c;可能很多同学在学习Java的并发编程部分时&#xff0c;都有所耳闻&#xff0c;但是如果要仔细问ThreadLocal是个啥&#xff0c;我们可能也说不清楚&#xff0c;所以这篇博客旨在帮助大家了解ThreadLocal到底是个啥&#xff1f; 1.ThreadLocal是什么&…

VS2019 + Qt : setToolTip的提示内容出现乱码

VS2019 Qt : setToolTip的提示内容出现乱码 在使用setToolTip()时&#xff0c; setToolTip(QString("asd你好&#xff01;");标签提示只有英文是对的&#xff0c;中文是乱码&#xff01; 应该是编码出了问题。默认情况下&#xff0c;Qt使用的是UTF-8编码&#xf…

Linux学习之sed多行模式

N将下一行加入到模式空间 D删除模式空间中的第一个字符到第一个换行符 P打印模式空间中的第一个字符到第一个换行符 doubleSpace.txt里边的内容如下&#xff1a; goo d man使用下边的命令可以实现把上边对应的内容放到doubleSpace.txt。 echo goo >> doubleSpace.txt e…

Redis系列(一):深入了解Redis数据类型和底层数据结构

Redis有以下几种常用的数据类型&#xff1a; redis数据是如何组织的 为了实现从键到值的快速访问&#xff0c;Redis 使用了一个哈希表来保存所有键值对。 Redis全局哈希表&#xff08;Global Hash Table&#xff09;是指在Redis数据库内部用于存储所有键值对的主要数据结构。…

CC2530实现呼吸灯效果-PWM调光-TIM1定时器使用

目录 一、前言 二、思路及实现方法 三、CC2530相关寄存器 四、思路以及代码实现 五、源码 一、前言 前面我们提到了非定时器模式实现呼吸灯效果&#xff0c;但由于其占用单片机主线程&#xff0c;如果不能加入RTOS的话&#xff0c;很难实现与其他功能的同步使用&#xff0…

C# 随机法求解线性规划问题 蒙特卡洛

线性规划问题: max3x12x2 x12x2<5 2x1x2<4 4x13x2<9 x1>0 x2>0 正确的结果:x11.5; x21, max z6.5 Random random1 new Random(DateTime.Now.Millisecond);Random random2 new Random(DateTime.Now.Millisecond*DateTime.Now.Millisecond);double max-9999,x1…

阿里云服务器镜像大全_Linux和Windows操作系统清单

阿里云服务器操作系统大全&#xff0c;阿里云提供的镜像均为正版授权&#xff0c;正版镜像可以在云服务器ECS上运行的应用程序提供安全、稳定的运行环境系统&#xff0c;阿里云服务器以公共镜像为例分享阿里云服务器操作系统大全&#xff0c;包括Alibaba Cloud Linux镜像、Linu…

大数据面试题:说下Spark中的Transform和Action,为什么Spark要把操作分为Transform和Action?

面试题来源&#xff1a; 《大数据面试题 V4.0》 大数据面试题V3.0&#xff0c;523道题&#xff0c;679页&#xff0c;46w字 可回答&#xff1a;Spark常见的算子介绍一下 参考答案&#xff1a; 我们先来看下Spark算子的作用&#xff1a; 下图描述了Spark在运行转换中通过算…

解密人工智能:线性回归 | 逻辑回归 | SVM

文章目录 1、机器学习算法简介1.1 机器学习算法包含的两个步骤1.2 机器学习算法的分类 2、线性回归算法2.1 线性回归的假设是什么&#xff1f;2.2 如何确定线性回归模型的拟合优度&#xff1f;2.3 如何处理线性回归中的异常值&#xff1f; 3、逻辑回归算法3.1 什么是逻辑函数?…

Redis知识点

Redis 文章目录 RedisNoSQLNoSQL的优势 RedisRedis与其他的Key—value&#xff08;Map&#xff09;相比的区别&#xff1f;关系型数据库和非关系型数据库关系型数据库非关系型数据库 Redis数据类型跳表压缩表String&#xff08;字符串&#xff09;Hash&#xff08;哈希&#xf…

有理数思维导图怎么画?这种方法绘制很方便

有理数思维导图怎么画&#xff1f;为什么要绘制思维导图&#xff1f;因为它可以帮助我们更好地组织和理解信息。在数学中&#xff0c;绘制有理数思维导图也可以帮助我们更好地理解有理数的概念和性质。 有理数是我们日常生活中经常接触到的数学概念&#xff0c;包括正整数、负整…

RabbitMQ的5种消息队列

RabbitMQ的5种消息队列 1、七种模式介绍与应用场景 1.1 简单模式(Hello World) 一个生产者对应一个消费者&#xff0c;RabbitMQ 相当于一个消息代理&#xff0c;负责将 A 的消息转发给 B。 应用场景&#xff1a;将发送的电子邮件放到消息队列&#xff0c;然后邮件服务在队列…

TRT8系列—— 版本差异注意事项

TRT8 一个大版本&#xff0c;8.4-、 8.5、 8.6&#xff08;包含预览功能&#xff09;却有很多变动&#xff0c;一不注意就发现很混乱&#xff0c;特备注此贴。建议具体case可以参考这个合集&#xff0c;真心安利&#xff1a;https://github.com/NVIDIA/trt-samples-for-hackath…

极光笔记 | 如何为您的业务开发和训练一个AI-BOT

生成式AI&#xff08;Generative AI&#xff09;是当今科技领域的前沿技术之一。随着数据量的不断增加和计算能力的不断提升&#xff0c;AI技术在企业和个人生活中的应用越来越广泛。AI-BOT&#xff08;以下简称BOT&#xff09;是生成式AI技术的其中一种重要的应用形式&#xf…

ssh远程连接服务器

一、远程连接服务器简介 二、连接加密技术简介 三、ssh服务配置 四、用户登录ssh服务 Enforcing会强制限制&#xff0c;如端口为22&#xff0c;可以访问&#xff0c;如果是2000端口&#xff0c;不能使用 Permissive是宽容的模式&#xff0c;不限制使用端口 Enforcing会重启失败…

二叉树(ACM版)

【数据结构1-2】二叉树 - 题单 - 洛谷 【数据结构】day2-树_J娇娇_的博客-CSDN博客 上学时的作业 P1827 [USACO3.4] 美国血统 American Heritage 二叉树特点写法&#xff08;非二叉树&#xff09; 截取字符串写法 #include<string> #include<cstring> #include…