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. 前言 按照国际惯例,首先声明:本文只是我自…

MFC:文本可视化输出

文章目录 1. DrawText:2. TextOut:3. SetTextColor:4. SetBkColor:5. GetTextMetrics: 在MFC(Microsoft Foundation Classes)中,CDC(设备上下文类)提供了多种…

Barabási–Albert模型详解与Python代码示例

Barabsi–Albert模型详解与Python代码示例 模型介绍 Barabsi–Albert(BA)模型是一种用于模拟和分析复杂网络结构的数学模型,特别适用于描述那些具有“无标度”特性的网络。无标度网络是指网络中节点的连接度(度)分布…

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

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

底软驱动 | Linux虚拟内存

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

去除重复数字

1083. 【基础】去除重复数字 [ 刷题2路4线 ] 时间限制: 1000MS 空间限制: 16MB 结果评判: 文本对比 正确/提交: 29 (21) / 45 官方标签: 数组 普及- 题目描述 给你N个数(n<=100),每个数都在&am…

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天,这期间我经历了春秋招、毕业答辩…

JS【详解】ES6 模块规范 vs CommonJS 模块规范

每个 js 文件都是一个模块,默认采用的 CommonJS 模块规范 新兴的 ES6 模块 pk 传统的 CommonJS 模块 特性CommonJSES6 模块化导出exports 对象export 关键字导入require()函数import 关键字加载模式同步异步执行模式单例单例依赖关系静态动态树形摇晃不支持支持 加…

板级调试小助手(3)基于PYNQ的OLED视频显示

一、前言 在之前的文章中介绍了《板级调试小助手》的系统结构和DDS自定义外设的搭建。这篇文章主要介绍一下如何在PYNQ中驱动平时长剑的OLED12864显示屏,并显示BadApple(毕竟有屏幕的地方就要有BadApple)。效果如下: BadApple 本项…

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聚…

Java进阶----多态

多态 什么是多态 在继承父类或者实现接口的基础上,允许同一类事物出现不同的状态 多态的前提:继承或实现的关系、方法的重写、父类(接口)引用指向子类(实现类)对象 表现形式 父类 变量 子类对象(); 接…

解决方案架构师系列 - AWS - AWS Amplify 服务功能介绍

探索AWS Amplify:构建高效、安全的云原生应用 AWS Amplify 是一个开源框架,由亚马逊网络服务(AWS)提供,旨在简化Web和移动应用程序的开发。它是一套完整的开发工具集合,帮助开发者快速地实现功能如身份验证…

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很容易…

昇思25天打卡营-mindspore-ML- Day24-基于 MindSpore 实现 BERT 对话情绪识别

学习笔记:基于MindSpore实现BERT对话情绪识别 算法原理 BERT(Bidirectional Encoder Representations from Transformers)是由Google于2018年开发的一种预训练语言表示模型。BERT的核心原理是通过在大量文本上预训练深度双向表示&#xff0…

Win7电脑修改网卡配置连接千兆网络的方法

Win7电脑修改网卡配置连接千兆网络的方法 Realtek PCIe GBE Family Controller是千兆网卡,GBE的意思就是1Gbps网卡,也就是千兆网卡,翻译成中文就是瑞昱PCI-E总线千兆网络系列控制器。 目前有很多的电脑都是使用realtek网卡的,当时奇怪的是网卡连接到h3或者d-link千兆交换机…

探索老年综合评估实训室的功能与价值

一、引言 随着人口老龄化的加剧,老年健康问题日益受到关注。老年综合评估实训室作为专门为老年人健康服务而设立的场所,具有独特的功能和重要的价值。 二、老年综合评估实训室的功能 (一)健康评估功能 1、身体功能评估 通过专业设…

【postgresql】权限(Privileges)

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