Vue CLI创建Vue项目详细步骤

news2024/11/22 18:28:42

🚀 一、安装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.coloradmin.cn/o/888253.html

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

相关文章

vite+vue3项目配置cdn引入在线依赖

采用ejs的方式 安装语法依赖 npm install vite-plugin-ejs -D配置暴露数据 vite.config.js文件&#xff1a; import { fileURLToPath, URL } from node:url import { defineConfig, loadEnv } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plug…

常用的分布式计算引擎

记录一下&#xff0c;作为备忘。 常用的分布式计算引擎 多表关联的问题&#xff0c;由于NoSQL数据库主要用于海量存储和单表查询&#xff0c;一般都不支持join&#xff0c;需借助更上层的计算框架来实现多表关联&#xff0c;比如: 计算框架支持数据源执行效率Hive本地文件、…

长胜证券:宁德时代发布神行超充电池 信创利好政策陆续出台

昨日&#xff0c;两市股指早盘震动回升&#xff0c;午后再度回落&#xff0c;尾盘加快下行。截至收盘&#xff0c;沪指跌0.82%报3150.13点&#xff0c;深成指跌0.94%报10579.56点&#xff0c;创业板指跌0.73%报2132.97点&#xff0c;科创50指数跌1.71%&#xff1b;两市算计成交…

uni-app调用java代码(uniapp调用安装原生插件aar)

uni-app调用java代码(uniapp调用安装原生插件aar) 文章目录 uni-app调用java代码(uniapp调用安装原生插件aar)前言一、开发环境、文档资料1.Java环境下载2.App离线SDK下载3.AndroidStudio下载4.HBuilderX下载5.uni-app扩展原生插件文档6.插件官方示例 二、将Java代码打包成aar文…

MD5、RSA 和自定义签名的 Java 数据安全实战

前言 在现代的数字世界中&#xff0c;数据的安全性和完整性变得尤为重要。为了确保数据在传输和存储过程中不受到攻击&#xff0c;我们可以借助各种加密和签名技术来加强数据安全。本文将介绍如何使用 MD5、RSA 加密&#xff0c;以及如何自定义签名规则来保护数据的安全性。下…

ISO 21202:2020 智能交通系统 - 部分自动变道系统 (PALS) - 功能/操作要求和测试规程

​ 介绍 一般来说,车辆配备的驾驶辅助系统和自动驾驶系统可减轻驾驶员的负担,有助于安全驾驶。就变道操作而言,有许多驾驶员并不擅长变道,为了辅助这类驾驶员,部分自动变道系统(PALS)可根据驾驶员的要求,在驾驶员的监督下,在禁止非机动车和行人通行、有明显车道标记的…

C#中的委托

目录 概述&#xff1a; 举例&#xff1a;​ 总结: 概述&#xff1a; 中文的角度来说:指的是把事情托付给别人或别的机构(办理)&#xff0c;造个句子&#xff1a;别人委托的事情&#xff0c;我们一定要尽力而为&#xff0c;不遗余力的去办成。 在C#中&#xff0c;委托是一种…

TCP/IP协议组

TCP/IP通信协议是目前最完整、使用最广泛的通信协议。它的魅力在于可使不同硬件结构、不同操作系统的计算机相互通信。TCP/IP协议既可用于广域网&#xff0c;也可用于局域网&#xff0c;它是Internet/Intranet的基石。TCP/IP通信协议事实上是一组协议。 TCP/IP协议可分为5层也可…

图像处理的未来:揭秘扫描全能王的AI驱动创新

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

LeetCode235. 二叉搜索树的最近公共祖先

235. 二叉搜索树的最近公共祖先 文章目录 [235. 二叉搜索树的最近公共祖先](https://leetcode.cn/problems/lowest-common-ancestor-of-a-binary-search-tree/)一、题目二、题解方法一&#xff1a;递归方法二&#xff1a;迭代 一、题目 给定一个二叉搜索树, 找到该树中两个指定…

java八股文面试——String StringBuilder StringBuffer

String类型定义&#xff1a; final String 不可以继承 final char [] 不可以修改 String不可变的好处&#xff1a; hash值只需要算一次&#xff0c;当String作为map的key时&#xff0c; 不需要考虑hash改变 天然的线程安全 知识来源&#xff1a; 【基础】String、StringB…

安卓手机录屏app合集,总有一种适合你

在现代生活中&#xff0c;录屏已经变得越来越重要。它可以帮助人们记录并分享他们的屏幕内容。在安卓手机上&#xff0c;有很多应用程序可以帮助您进行屏幕录制。本文将介绍一些最好的安卓手机录屏应用程序&#xff0c;以及一些有关录屏技巧。 录屏工具&#xff1a; 迅捷录屏大…

通达信接口开发大全(一)

通达信软件的接口开发主要可以分为以下几个方面&#xff1a; 行情接口&#xff1a;通达信提供行情订阅和实时数据查询接口&#xff0c;可以获取市场行情数据。开发者通过这些接口获取股票、期货、外汇等市场的实时行情数据&#xff0c;包括价格、成交量、买卖盘等。 交易接口&…

博弈论简介

目录 博弈分类 合作与非合作博弈&#xff1a; 同时与顺序博弈&#xff1a; 完全信息与不完全信息博弈&#xff1a; 零和与非零和博弈&#xff1a; 囚徒困境的例子 纳什平衡 代码示例 博弈论是一个数学分支&#xff0c;研究多个理性决策者之间的战略互动。它的主要目的是…

Kafka 集群搭建过程

前言 跟着尚硅谷海哥文档搭建的Kafka集群环境&#xff0c;在此记录一下&#xff0c;侵删 注意&#xff1a;博主在服务器上搭建环境的时候使用的是一个服务器&#xff0c;所以这篇博客可能会出现一些xsync分发到其他服务器时候的错误&#xff0c;如果你在搭建的过程中出现了错…

CKZF-D60170、CKZF-D70190、CKZF-D80210单向离合器

CKZF-C30100、CKZF-C35110、CKZF-C40125、CKZF-C45130、CKZF-C50150、CKZF-C55160、CKZF-C60170、CKZF-C70190、CKZF-C80210、CKZF-C90230、CKZF-C100270、CKZF-C130310、CKZF-B30100、CKZF-B35110、CKZF-B40125、CKZF-B45130、CKZF-B50150、CKZF-B55160、CKZF-B60170、CKZF-B7…

Java课题笔记~ 什么是跨域?

什么是跨域&#xff1f; 浏览器从一个域名的网页去请求另一个域名的资源时&#xff0c;域名、端口、协议任一不同&#xff0c;都是跨域。 域名&#xff1a; 主域名不同 百度一下&#xff0c;你就知道 -->新浪网 子域名不同 http://www.666.baidu.com/index.html -->htt…

原生js获取今天、昨天、近7天的时间(年月日时分秒)

有的时候我们需要将今天,昨天,近7天的时间(年月日时分秒)作为参数传递给后端,如下图: 那怎么生成这些时间呢?如下代码里,在methods里的toDay方法、yesterDay方法、weekDay方法分别用于生成今天、昨天和近7天的时间: <template><div class="box"&…

springBoot是如何实现自动装配的

目录 1 什么是自动装配 2 Spring自动装配原理 2.1 SpringBootConfiguration ​编辑 2.2 EnableAutoConfiguration 2.2.1 AutoConfigurationPackage 2.2.2 Import({AutoConfigurationImportSelector.class}) 2.3 ComponentScan 1 什么是自动装配 自动装配就是将官方写好的的…

电脑c盘满了怎么办,使用硬盘专家一件解决!

下载硬盘专家后&#xff0c;点击释放C盘系统空间&#xff0c;就可以节省出很多空间&#xff0c;win10系统一般节省出20G都是正常的&#xff0c;因为win10在很多地方都恶意占用磁盘空间&#xff0c;比如一些大型的垃圾&#xff0c;都没有及时清理&#xff0c;就算你使用杀毒软件…