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 开发框架

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

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

相关文章

【自动驾驶汽车通讯协议】UART通信详解:理解串行数据传输的基石

文章目录 0. 前言1. 同步通讯与异步通讯1.1 同步通信1.2 异步通信 2. UART的数据格式3. 工作原理3.1 波特率和比特率3.2 UART的关键特性 4. UART在自动驾驶汽车中的典型应用4.1 UART特性4.2应用示例 5. 结语 0. 前言 按照国际惯例,首先声明:本文只是我自…

xlive.dll丢失怎么办,xlive.dll文件的主要用途

xlive.dll丢失怎么办?目前是有很多方法可以解决这个xlive.dll丢失的问题的,只要你仔细的去了解xlive.dll这个文件,至于使用哪种方法,主要还是看你的实际情况,因为情况不同选择使用的方法也是不一样的,下面一…

底软驱动 | Linux虚拟内存

为了更有效的管理内存并且少出错,现代操作系统提供了一种对主存的抽象概念,叫做虚拟内存(VM)。虚拟内存提供了三个重要的能力: 1.它将主存(物理内存)看成是一个存储在磁盘上的地址空间的高速缓存,在主存中只保留活动区域,并且根据…

openEuler 安装 podman 和 podman compose

在 openEuler 22.03 LTS SP4 中,你可以使用 dnf 包管理器来安装 Podman 和 Podman Compose。openEuler 默认使用 dnf 作为包管理器,所以这是安装软件的首选方式。 关于 openEuler 22.03 LTS SP4 下载地址: https://www.openeuler.org/zh/dow…

【256 Days】我的创作纪念日

目录 🌼01 机缘 🌼02 收获 🌼03 日常 🌼04 成就 🌼05 憧憬 最近收到官方来信, 突然发现,不知不觉间,距离发布的第一篇博客已过256天,这期间我经历了春秋招、毕业答辩…

Access denied for user ‘root‘@‘localhost‘ (using password: YES)解决办法

在Spring配置数据源时,当使用Spring容器加载druid.properties数据库连接池配置文件时,容易碰到create connection SQLException, url: jdbc:mysql://127.0.0.1:3306/mydbs, errorCode 1045, state 28000 java.sql.SQLException: Access denied for user …

破解YouTube限制:保姆级教程,轻松查看博主邮箱

近期YouTube取消了博主的邮箱展示,这造成了不小的轰动,给想要联系博主的粉丝和想要寻求网红合作的品牌都带来了极大的不便。但这难不倒万能的网友!最新发现,通过一串神秘代码可以在YouTube上查看到博主的邮箱,这里Nox聚…

CycleGAN深度学习项目

远程仓库 leftthomas/CycleGAN: A PyTorch implementation of CycleGAN based on ICCV 2017 paper "Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks" (github.com) 运行准备 Anaconda 安装需要的库 指令 pip install panda…

LPRNet 车牌识别部署 rk3588(pt-onnx-rknn)包含各个步骤完整代码

虽然车牌识别技术很成熟了,但完全没有接触过。一直想搞一下、整一下、试一下、折腾一下,工作之余找了一个简单的例子入个门。本博客简单记录一下 LPRNet 车牌识别部署 rk3588流程,训练参考 LPRNet 官方代码。 1、导出onnx   导出onnx很容易…

【postgresql】权限(Privileges)

权限(privileges)是决定用户或角色可以对数据库对象(如表、视图、序列和函数)执行哪些操作的许可。权限对于维护安全性和控制对数据的访问至关重要。 权限分类 在 PostgreSQL 中,权限分为以下几种: SELEC…

数据库基本查询(表的增删查改)

一、增加 1、添加信息 insert 语法 insert into table_name (列名) values (列数据1,列数据2,列数据3...) 若插入时主键或唯一键冲突就无法插入。 但如果我们就是要修改一列信息也可以用insert insert into table_name (列名) values (列数据1&am…

客户端通过服务器进行TCP通信(三)

一. 对TCP的基础讲解 服务端 1. 首先创建一个套接字,TCP是面向字节流的套接字,故需要使用SOCK_STREAM 2. 然后使用bind()函数将套接字与服务器地址关联(如果是在本地测试,直接将地址设置为217.0.0.1或者localhost,端口号为1000…

内存函数(C语言)

内存函数 以下函数的头文件:string.h 针对内存块进行处理的函数 memcpy 函数原型: void* memcpy(void* destination, const void* source, size_t num);目标空间地址 源空间地址num,被拷贝的字节个数 返回目标空间的起始地…

Python与自动化脚本编写

Python与自动化脚本编写 Python因其简洁的语法和强大的库支持,成为了自动化脚本编写的首选语言之一。在这篇文章中,我们将探索如何使用Python来编写自动化脚本,以简化日常任务。 一、Python自动化脚本的基础 1. Python在自动化中的优势 Pyth…

1.31、基于长短记忆网络(LSTM)的发动机剩余寿命预测(matlab)

1、基于长短记忆网络(LSTM)的发动机剩余寿命预测的原理及流程 基于长短期记忆网络(LSTM)的发动机剩余寿命预测是一种常见的机器学习应用,用于分析和预测发动机或其他设备的剩余可用寿命。下面是LSTM用于发动机剩余寿命预测的原理和流程: 数据收集&#…

【Linux】 GCC/G++与Makefile使用

Linux GCC/G使用 GCC如何完成 格式:gcc [选项] 要编译的文件 [选项] [目标文件] 常用选项: -E:让gcc在预处理结束后停止编译过程,输出.i的C语言原始文件。-S:该选项只是进行编译而不是进行汇编,最终生成汇…

力扣144题:二叉树的先序遍历

给你二叉树的根节点 root ,返回它节点值的 前序 遍历。 示例 1: 输入:root [1,null,2,3] 输出:[1,2,3]示例 2: 输入:root [] 输出:[]示例 3: 输入:root [1] 输出&am…

C++入门学习——初始化列表

概念 初始化列表:以一个冒号开始,接着是一个以逗号分隔的数据成员列表,每个"成员变量"后面跟一个放在括 号中的初始值或表达式 class Date { public://初始化列表Date(int year,int month,int day):_year(year),_month(month),_d…

[Windows] 油.管视频下载神器 Gihosoft TubeGet Pro v9.3.88

描述 对于经常在互联网上进行操作的学生,白领等! 一款好用的软件总是能得心应手,事半功倍。 今天给大家带了一款高科技软件 管视频下载神器 无需额外付费,永久免费! 亲测可运行!! 内容 目前主…

高德地图显示圆形区域并在区域边上标注半径

bug:循环创建三个圆形区域 ,数组设置为[{raduis:500,color:“#FF0000”}],然后循环取颜色会莫名其妙报错修改为 strokeColor: [“#FF0000”, “#1EE3C2”, “#3772E9”][i]即可 initAMap() {AMapLoader.load({key: "130cca3be68a2ff0fd5…