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.mfbz.cn/a/77659.html

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

相关文章

【AI大模型】训练Al大模型 (上篇)

大模型超越AI 前言 洁洁的个人主页 我就问你有没有发挥&#xff01; 知行合一&#xff0c;志存高远。 目前所指的大模型&#xff0c;是“大规模深度学习模型”的简称&#xff0c;指具有大量参数和复杂结构的机器学习模型&#xff0c;可以处理大规模的数据和复杂的问题&#x…

缓存平均的两种算法

引言 线边库存物料的合理性问题是物流仿真中研究的重要问题之一,如果线边库存量过多,则会对生产现场的布局产生负面影响,增加成本,降低效益。 写在前面 仿真分析后对线边Buffer的使用情况进行合理的评估就是一个非常重要的事情。比较关心的参数包括:缓存位最大值…

探索网络架构的关键角色:六种常用的服务器类型

在今天的数字时代&#xff0c;服务器是支撑各种在线服务和应用的基石。不同类型的服务器在网络架构中扮演着不同的角色&#xff0c;从网页传输到电子邮件交换&#xff0c;再到文件传输和内容分发。本文将深入探讨六种最常用的服务器类型&#xff0c;解释它们的功能和重要性&…

力扣301周赛C~DABC299 D、E、G

第 301 场周赛 C&#xff1a; 思路&#xff1a; 经典双指针问题&#xff0c;用i表示字符串start当前枚举到的位置&#xff0c;用j表示字符串target当前枚举到的位置&#xff1a; i从当前位置向后跑&#xff0c;跑到start串下标i之后的第一个不为_的位置 j从当前位置向后跑&a…

node获取抖音直播间Id

node获取抖音直播间Id 信息位置 直播间信息存放在id是RENDER_DATA的script标签里 安装依赖 npm install fetch cheerio # 或 pnpm install fetch cheerionode代码 // room.js const fetch require("fetch"); const cheerio require("cheerio"); // co…

Qt读写Excel--QXlsx编译为静态库2

1、概述&#x1f954; 在使用QXlsx时由于源码文件比较多&#xff0c;如果直接加载进项目里面&#xff0c;会增加每次编译的时间&#xff1b; 直接将源码加载进项目工程中&#xff0c;会导致项目文件非常多&#xff0c;结构变得更加臃肿&#xff1b; 所以在本文中将会将QXlsx编译…

什么是字体堆栈(font stack)?如何设置字体堆栈?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是字体堆栈&#xff08;Font Stack&#xff09;&#xff1f;⭐ 如何设置字体堆栈&#xff1f;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 …

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

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

解析Python爬虫常见异常及处理方法

作为专业爬虫程序猿长期混迹于爬虫ip解决方案中&#xff0c;我们经常会遇到各种各样的异常情况。在爬虫开发过程中&#xff0c;处理这些异常是不可或缺的一部分。本文将为大家总结常见的Python爬虫异常&#xff0c;并分享相应的处理方法&#xff0c;帮助你避免绊倒在爬虫之路上…

题目:售货员的难题(状压dp)

售货员的难题 题目描述输入输出格式输入格式&#xff1a;输出格式&#xff1a; 输入输出样例输入样例#1&#xff1a;输出样例#1&#xff1a; 思路AC代码&#xff1a; 题目描述 某乡有n个村庄( 1 < n < 16 )&#xff0c;有一个售货员&#xff0c;他要到各个村庄去售货&am…

每天一道leetcode:433. 最小基因变化(图论中等广度优先遍历)

今日份题目&#xff1a; 基因序列可以表示为一条由 8 个字符组成的字符串&#xff0c;其中每个字符都是 A、C、G 和 T 之一。 假设我们需要调查从基因序列 start 变为 end 所发生的基因变化。一次基因变化就意味着这个基因序列中的一个字符发生了变化。 例如&#xff0c;&quo…

数据结构----哈夫曼树

这里写目录标题 基本概念引子基本概念各种路径长度各种带权路径长度结点的带权路径长度树的带权路径长度哈夫曼树 哈夫曼树的构造理论基础构造思想总结 哈夫曼树的实现哈夫曼编码前缀编码哈夫曼编码的思想案例代码实现 编码与解码 基本概念 引子 哈夫曼树就是寻找构造最优二叉…

k8s RBAC授权普通系统用户对namespace访问权限

背景&#xff1a;最近遇到一个问题&#xff0c;那就是需要给别人共享一下 Kubernetes 的某个资源的使用和访问权限&#xff0c;这个仅仅存在于某个 namespace 下&#xff0c;但是我又不能把管理员权限全都给它&#xff0c;我想只给他授予这一个 Namespace 下的权限&#xff0c;…

OpenShift 4 - 基于 MinIO 安装 Red Hat Quay 镜像仓库

《OpenShift / RHEL / DevSecOps 汇总目录》 说明&#xff1a;本文已经在 OpenShift 4.13 Quay 3.9 的环境中验证 本文适合在单机 OpenShift 环境安装 Red Hat Quay 镜像仓库。 另外《OpenShift 4 - 安装 ODF 并部署红帽 Quay (1 Worker)》也可以在单节点部署。 而《OpenShif…

分布式版本控制系统(一)

分布式版本控制系统(一) 目录 分布式版本控制系统(一) 1、Git、Github、Gitlab 的区别2、Git 与 SVN 区别3、Git工作流程4、Git基本概念5、Git 客户端安装使用 5.1 git-server安装配置5.2 git-client配置免密登录git服务器5.3 文本编辑器5.4 差异分析工具5.5 查看配置信息5.6 常…

基于IMX6ULLmini的linux裸机开发系列一:汇编点亮LED

思来想去还是决定记录一下点灯&#xff0c;毕竟万物皆点灯嘛 编程步骤 使能GPIO时钟 设置引脚复用为GPIO 设置引脚属性(上下拉、速率、驱动能力) 控制GPIO引脚输出高低电平 使能GPIO时钟 其实和32差不多 先找到控制LED灯的引脚&#xff0c;也就是原理图 文件名 C:/Us…

动态内存分配及管理——C语言

目录 一、为什么存在动态内存分配 二、动态内存函数介绍 2.1 malloc 2.2 free 2.3 calloc 2.4 realloc 三、常见的动态内存错误 3.1 对NULL指针的解引用操作 3.2 对动态开辟空间的越界访问 3.3 对非动态开辟内存使用free释放 3.4 使用free释放一块动态开辟内存的一部…

Vue3 Vuex状态管理多组件传递数据简单应用

去官网学习→安装 | Vuex cd 项目 安装 Vuex&#xff1a; npm install --save vuex 或着 创建项目时勾选Vuex vue create vue-demo ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to se…

Web3 solidity订单池操作

前面一篇文章因为一些原因 被设为了进自己可见 需要的朋友可以私信我 之前 我们编写的程序上来看 交易所无非是一个代币的托管上 只是它会更加专业 本文 我们继续来看交易所的一个功能 叫游泳池 例如 我们 100grToken 兑换 1ETH 前提 我们的代币已经能被估值了 例如 你想用人…

【JVM】如何判定一个对象已死以及“标记-清除”、“标记-复制”、“标记-整理”三种垃圾收集算法

文章目录 0、如何判定一个对象的生死&#xff1f;1、上文提到的引用又是什么1、强引用&#xff1a;2、软引用&#xff1a;3、弱引用&#xff1a;4、虚引用&#xff1a; 2、垃圾收集算法1、标记-清除2、标记-复制优化&#xff1a;&#x1f447; 3、标记-整理 0、如何判定一个对象…