nodejs安装部署运行vue前端项目

文章目录

  • 1.安装nodejs
  • 2.安装Vue CLI
    • 1.配置npm镜像源:
    • 2.安装Vue CLI:
    • 3.创建Vue项目
    • 4.启动Vue项目
    • 5.Express

1.安装nodejs

Node.js® 是一个免费、开源、跨平台的 JavaScript 运行时环境,它让开发人员能够创建服务器、Web 应用、命令行工具和脚本。

  • 访问Node.js官网。
  • 输入node -v和npm -v命令,查看Node.js和npm的版本号,以确认安装成功。

npm(Node Package Manager)是Node.js的官方包管理工具,它具有多重作用,为JavaScript开发者提供了高效、灵活和可靠的包管理解决方案。

2.安装Vue CLI

vuecli脚手架是干什么的?
‌Vue CLI是一个官方提供的命令行工具,用于快速创建和管理Vue.js项目。
它的主要功能和特点包括:‌

  • 快速项目生成:Vue CLI可以快速生成一个基本的Vue项目结构,包括必要的文件和配置,使得开发者可以立即开始编码,无需手动设置基础结构。‌12
  • 基于‌Webpack:Vue CLI基于Webpack构建,这意味着它利用Webpack的强大功能进行资源管理和代码优化,如依赖管理、代码分割和性能优化等。‌13
  • 开箱即用和易于扩展:Vue CLI提供了合理的默认配置,使得新项目可以立即运行,同时它也支持通过插件和配置文件进行扩展,以满足特定需求。‌12
  • 命令行和图形界面:除了命令行界面外,Vue CLI还提供了一个图形化用户界面,使得项目管理更加直观和方便。
  • 支持‌Vue 2和‌Vue 3:Vue CLI支持创建基于Vue 2和Vue 3的项目,适应不同的开发需求。‌

总之,Vue CLI是一个强大的工具,帮助开发者更高效地构建和维护Vue.js应用。

1.配置npm镜像源:

#临时配置
npm config set registry https://registry.npmmirror.com
# 永久配置
npm config set registry https://registry.npmmirror.com

2.安装Vue CLI:

npm install -g @vue/cli
vue -V

3.创建Vue项目

创建项目:
在命令行中,使用cd命令切换到你想创建Vue项目的目录。
输入vue create 项目名命令(将“项目名”替换为你想要的项目名称),并按提示操作。Vue CLI会引导你完成项目的创建过程,包括选择预设、配置Vue Router、Vuex等。
进入项目目录:
项目创建完成后,使用cd 项目名命令进入项目目录。

vue create myvue
# 项目名不能大写

在这里插入图片描述

cd myvue
npm run serve
npm run build
# 项目生成dist文件夹下

4.启动Vue项目

npm install
npm run dev

5.Express

基于 Node.js 平台,快速、开放、极简的 Web 开发框架

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

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

相关文章

硬件基础学习笔记

关于硬件基础的知识整理 三极管(两个PN节组成的器件)MOSFET,场效应管(Field Effect Transistor)1、增强型场效应管符号:2、开关特性: 对于一些硬件知识,容易忘记需要反复记忆&#x…

【杰理蓝牙开发】AC632 开发板烧录实例

AC632 开发板烧录实例 0. 个人简介 && 授权须知1. 硬件板卡介绍2. 代码烧录2.1 使用USB接口烧录2.2 使用串口烧录 3. 为什么要用烧录器供电? 0. 个人简介 && 授权须知 📋 个人简介 💖 作者简介:大家好&#xff0c…

量化投资基础(一)之Black-Litterman模型

点赞、关注,养成良好习惯 Life is short, U need Python 量化投资基础系列,不断更新中 1. 投资组合收益率与风险 假设市场有 N N N 个资产,其随机收益率分别为 R 1 , R 2 , … , R N R_1,R_2,\dots,R_N R1​,R2​,…,RN​ ,对应…

【香橙派 AIpro测评:探索高效图片分类项目实战】

前言 最近入手了一块香橙派 AIpro开发板,在使用中被它的强大深深震撼,有感而发写下这篇文章。 本文旨在深入探讨OrangePi AIpro的各项性能,从硬件配置、软件兼容性到实际应用案例,全方位解析这款设备如何在开源社区中脱颖而出&am…

python中的类

类 类的创建 使用class关键字定义一个新的类 创建实例和使用 修改属性 类的访问权限(只有属性和方法有访问权限) 概念 种类 公有(Public):公有成员可以被类的外部访问。这是默认的权限级别,如果不特别指定…

I2C子系统-内核视角

I2C驱动层级 内核自带的通用I2C驱动程序i2c-dev 编写一个设备驱动程序 控制器驱动程序I2C Adapter框架 GPIO模拟I2C,实现I2C_Adapter驱动 具体芯片下I2C_Adapter驱动 I2C驱动层级 一张图整理,可以看完后面的具体内容再回来看这张图: 接…

Docker的虚拟化安装、常用命令和使用案例

文章目录 一、Docker的虚拟机安装1、完成虚拟机的更新2、完成Docker安装3、配置镜像加速器 二、Docker常用命令三、Docker的容器创建四、理解虚拟机中的Docker容器 一、Docker的虚拟机安装 1、完成虚拟机的更新 详见我的文章。 2、完成Docker安装 yum list installed|grep …

第二周周日学习总结

题目总结 1. 给你一个仅由数字组成的字符串 s,在最多交换一次 相邻 且具有相同 奇偶性 的数字后,返回可以得到的 字典序最小的字符串 。 如果两个数字都是奇数或都是偶数,则它们具有相同的奇偶性。例如,5 和 9、2 和 4 奇偶性…

2024年7月9日~2024年7月15日周报

目录 一、前言 二、完成情况 2.1 特征图保存方法 2.1.1 定义网络模型 2.1.2 定义保存特征图的钩子函数 2.1.3 为模型层注册钩子 2.1.4 运行模型并检查特征图 2.2 实验情况 三、下周计划 一、前言 本周的7月11日~7月14日参加了机器培训的学习讨论会,对很多概…

六、 SpringBoot 配置⽂件 ★ ✔【value的引号注意事项、@ConfigurationProperties 、】

六、 SpringBoot 配置⽂件 本节⽬标1. 配置⽂件作⽤2. 配置⽂件快速⼊⼿3. 配置⽂件的格式4. properties 配置⽂件说明4.1 properties 基本语法4.2 读取配置⽂件4.3 properties 缺点分析 5. yml 配置⽂件说明5.1 yml 基本语法5.2 yml 使⽤进阶5.2.1 yml 配置不同数据类型及 nul…

记录些MySQL题集(1)

Innodb 是如何实现事务的? InnoDB是MySQL数据库的一个存储引擎,它支持事务处理。事务处理是数据库管理系统执行过程中的一个逻辑单位,由一个或多个SQL语句组成,这些语句要么全部执行,要么全部不执行,是一个…

Poetry2Image:专为中文古诗词图像生成,忠于原诗意境和语义。

直接基于文本的图像生成通常会导致丢失图像中的关键元素。为了解决此问题,哈工大提出Poetry2Image,通过实施有针对性的图像校正解决这个问题,有效地捕捉这首诗所传达的语义和艺术精髓。 Poetry2Image流程分为如下几步: 搜索和翻译…

免费进销存软件哪个好用?首选象过河

在快节奏的商业环境中,进销存管理一直是不可忽视的重要环节,关乎着企业的运营成本控制和运营效率的高低。传统的纸质记录已难以满足企业发展需求,很多企业管理者为了节约成本,都想寻找一款免费进销存软件。那么,免费进…

(day18) leetcode 204.计数质数

描述 给定整数 n ,返回 所有小于非负整数 n 的质数的数量 。 示例 1: 输入:n 10 输出:4 解释:小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 。示例 2: 输入:n 0 输出:0示例 3…

计算机系统复习——文件系统和目录

文件系统 存储管理: 文件系统负责将文件存储在存储设备(如硬盘、固态硬盘)中,并记录文件的位置和大小。 文件访问控制: 文件系统管理文件的访问权限,确保只有授权用户可以读取、写入或执行文件。 数据…

PostgreSQL 中如何解决因长事务阻塞导致的其他事务等待问题?

🍅关注博主🎗️ 带你畅游技术世界,不错过每一次成长机会!📚领书:PostgreSQL 入门到精通.pdf 文章目录 PostgreSQL 中如何解决因长事务阻塞导致的其他事务等待问题?一、了解长事务阻塞的原因&…

Qt进阶版五子棋

五子棋是一种两人对弈的棋类游戏,目标是在横、竖、斜任意方向上连成五个子。在Qt中实现五子棋程序,你需要设计棋盘界面、处理下棋逻辑、判断胜负等。以下是实现一个基本五子棋程序的步骤: 创建项目和界面 使用Qt Creator创建一个新的Qt Widge…

人工智能大模型讲师培训老师叶梓介绍及多模态大模型原理与实践提纲

培训需要解决的问题 通过本次培训,拓展对多模态AI应用领域的视野,帮助团队聚焦AI赋能创新突破,提升对AI服务的技术认知与理解,更好地助力业务智能化业务建设。 培训时长 1天 培训老师介绍 叶梓,工学博士&#xff0…

【人工智能】Transformers之Pipeline(二):自动语音识别(automatic-speech-recognition)

​​​​​​​ 目录 一、引言 二、自动语音识别(automatic-speech-recognition) 2.1 概述 2.2 技术原理 2.2.1 whisper模型 2.2.2 Wav2vec 2.0模型 2.3 pipeline参数 2.3.1 pipeline对象实例化参数​​​​​​​ 2.3.2 pipeline对象使用参数…

HiFi Asia 2024圆满落幕,琛蓝生物分享企业成果

一个时代,一个风口。其中有些风口切中时代脉搏,顺势而为的人因此成功登顶,有些风口则被证伪,热潮散去之后留下一地鸡毛。在当今时代,倘若要寻找下一个时代风口,那么“大健康”毫无疑问是确定性最强大那一个…