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.mzph.cn/news/40620.shtml

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

相关文章

FastAPI入门

目录 FastAPI FastAPI 是什么 为什么要用 FastAPI FastAPI 入门 安装 用 FastAPI 写个接口 调试接口 创建快捷请求 保存为快捷请求 发送请求 总结 FastAPI FastAPI 是什么 什么是 FastAPI 呢&#xff1f; FastAPI 是 Python 的一个框架&#xff0c;如果要类比的话…

Django的简介安装与配置及两大设计模式

一.Djang的介绍 1.Django是什么 Django 是使用 Python 语言开发的一款免费而且开源的 Web 应用框架。 由于 Python 语言的跨平台性&#xff0c;所以 Django 同样支持 Windows、Linux 和 Mac 系统。 在 Python 语言炽手可热的当下&#xff0c;Django 也迅速的崛起&#xff0c;在…

javaScript:一分钟看懂数组排序以及冒泡排序(重点)

目录 一.前言 二.数组排序 sort&#xff08;&#xff09; 字符串大小的比较原则 字符编码排序规则 如果使用sort从小到大排列 &#xff08;重点&#xff09; 函数的返回值 规则&#xff1a; 代码 案例 数组打乱 sort相关代码 三.冒泡排序&#xff08;重点&#xff…

【RocketMQ】NameServer总结

NameServer是一个注册中心&#xff0c;提供服务注册和服务发现的功能。NameServer可以集群部署&#xff0c;集群中每个节点都是对等的关系&#xff08;没有像ZooKeeper那样在集群中选举出一个Master节点&#xff09;&#xff0c;节点之间互不通信。 服务注册 Broker启动的时候会…

【通俗易懂】如何使用GitHub上传文件,如何用git在github上传文件

目录 创建 GitHub 仓库 使用 Git 进行操作 步骤 1&#xff1a;初始化本地仓库 步骤 2&#xff1a;切换默认分支 步骤 3&#xff1a;连接到远程仓库 步骤 4&#xff1a;获取远程更改 步骤 5&#xff1a;添加文件到暂存区 步骤 6&#xff1a;提交更改 步骤 7&#xff1a…

RenderDoc 导出Cubemap到UE

找到使用了Cubemap的模型,再Output里会显示该模型使用的所有贴图 ,选中Cubemap导出 选择导出格式为HDR 导出的Cubemap是竖着的,需要再PS里逆时针旋转&#xff19;&#xff10;度 还有&#xff0c;导出的的Cubemap方向是错的,需要把3,4 跟1,2 对换,6旋转180度 UE 文档里的方向参…

Spring Boot @Validated 验证注解的使用

1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId> </dependency> 2、使用 2.1、非对象参数 参数如果是非对象格式&#xff0c;需要在controller类上面添…

JVM——HotSpot的算法细节实现

一、根节点枚举 固定可作为GC Roots的节点主要在全局性的引用&#xff08;如常量或类静态属性&#xff09;与执行上下文&#xff08;如栈帧中的本地变量表&#xff09;中&#xff0c;尽管目标明确&#xff0c;但查找要做到高效很难。现在java应用越来越庞大&#xff0c;光方法区…

Code interpreter生成无聊的APP:病理图像切割和提取

一、写在前面 机器学习100步不够分配了&#xff0c;所以开个新专栏&#xff0c;就叫做《Code interpreter生成无聊的APP》&#xff0c;旨在探索GPT-4官方插件Code interpreter的使用心路历程。 主要灵感来源&#xff1a;听户主说&#xff0c;她们在做病理组学图像标注和分割的…

如何用Apipost实现sign签名?

我们平常对外的接口都会用到sign签名&#xff0c;对不同的用户提供不同的apikey ,这样可以提高接口请求的安全性&#xff0c;避免被人抓包后乱请求。 如何用Apipost实现sign签名&#xff1f; 可以在Apipost中通过预执行脚本调用内置的JS库去实现预执行脚本是在发送请求之前自…

Wordcloud | 风中有朵雨做的‘词云‘哦!~

1写在前面 今天可算把key搞好了&#xff0c;不得不说&#x1f3e5;里手握生杀大权的人&#xff0c;都在自己的能力范围内尽可能的难为你。&#x1f602; 我等小大夫也是很无奈&#xff0c;毕竟奔波霸、霸波奔是要去抓唐僧的。 &#x1f910; 好吧&#xff0c;今天是词云&#x…

【C++精华铺】8.C++模板初阶

目录 1. 泛型编程 2. 函数模板 2.1 函数模板的概念及格式 2.2 函数模板的原理 2.3 模板的实例化 2.4 模板参数的匹配原则 3. 类模板 3.1 类模板格式 3.2 类模板的实例化 1. 泛型编程 什么是泛型编程&#xff1f;泛型编程是避免使用某种具体类型而去使用某种通用类型来进行…

带你了解—使用内网穿透,公网远程访问本地硬盘文件

文章目录 前言1. 下载cpolar和Everything软件3. 设定http服务器端口4. 进入cpolar的设置5. 生成公网连到本地内网穿透数据隧道 总结 前言 随着云概念的流行&#xff0c;不少企业采用云存储技术来保存办公文件&#xff0c;同时&#xff0c;很多个人用户也感受到云存储带来的便利…

学习ts(四)联合类型、交叉类型、类型断言

联合类型 使用联合类型定义属性和方法&#xff0c;只要符合其中一种即可 let myPhone: string | number 010-7788 // let myPhone1: string | number true 因为没有包含boolean值 会报错const fn (something: number | boolean): boolean > {return !!something }con…

【CSS动画01--登录】

CSS动画01--登录 介绍代码HTMLCSSJS 介绍 当鼠标不同方向的划过时展示不同效果的登录&#xff0c;以上是一个简单的图片展示 代码 HTML <!DOCTYPE html> <html> <head><meta http-equiv"content-type" content"text/html; charsetutf-8&…

生物笔记——暑期学习笔记(四)

生物笔记——暑期学习笔记&#xff08;四&#xff09; 文章目录 前言一、R篇1. unname()2. duplicated()3. 数据提取4. 分组 二、生信篇1. 文本处理常用命令2. 命令输出1. 重定向2. 多命令执行 3. 文本工具4. 本地hmm鉴定1. hmmer软件安装2. 文件准备3. 基于hmm的鉴定 总结 前言…

【制作npm包5】npm包制作完整教程,我的第一个npm包

制作npm包目录 本文是系列文章&#xff0c; 作者一个橙子pro&#xff0c;本系列文章大纲如下。转载或者商业修改必须注明文章出处 一、申请npm账号、个人包和组织包区别 二、了解 package.json 相关配置 三、 了解 tsconfig.json 相关配置 四、 api-extractor 学习 五、npm包…

MySQL的配置文件my.cnf与my.ini

一、my.cnf与my.ini win系统&#xff0c;MySQL配置文件为my.ini 其他系统&#xff08;Ubuntu、CentOS、macOS)MySQL配置文件为my.cnf 二、my.cnf与my.ini的路径 2.1 默认路径 MySQL 的配置文件 my.cnf 可能位于多个位置&#xff0c;具体取决于安装方式和操作系统。以下是一…

2023年国赛数学建模思路 - 案例:最短时间生产计划安排

文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 最短时…

Kotlin开发笔记:使用委托进行拓展

Kotlin开发笔记&#xff1a;使用委托进行拓展 导言 在OO语言(面向对象)中&#xff0c;我们经常会用到委托或者代理的思想。委托和代理在乍一看很相似&#xff0c;其实其各有各的侧重点&#xff0c;这里我引用ChatGpt的回答&#xff1a; 委托&#xff08;Delegation&#xff09…