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

news2024/12/25 14:49:54

文章目录

  • 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.coloradmin.cn/o/1927898.html

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

相关文章

【C++PythonJava】字符处理详细解读_字符_ASCLL码_字母数字转换_算法竞赛_开发语言

文章目录 Beginning1)ASCLL 码2)大小比较2)判断数字字符3)字符、数字间的相互转换End Beginning 在 C 中,字符和整数有着密不可分的关系。原因就是在计算机中,字符是以一种较 ASCLL 码的整数存储的。自然&…

SpringSecurity框架【认证】

目录 一. 快速入门 二. 认证 2.1 登陆校验流程 2.2 原理初探 2.3 解决问题 2.3.1 思路分析 2.3.2 准备工作 2.3.3 实现 2.3.3.1 数据库校验用户 2.3.3.2 密码加密存储 2.3.3.3 登录接口 2.3.3.4 认证过滤器 2.3.3.5 退出登录 Spring Security是Spring家族中的一个…

C语言之qsort函数

一、qsort 1.库函数qsort qsort是库函数&#xff0c;直接可以用来排序数据&#xff0c;底层使用的是快速排序。 qsort函数可以排序任意类型的数据。 2.头文件 #include<stdlib.h> 3.参数讲解 void*类型的指针是无具体类型的指针&#xff0c;这种类型的指针的不能直接解…

Still-Moving效果惊艳!无需定制视频数据,DeepMind让文生定制视频变得简单!

文章链接&#xff1a; https://arxiv.org/pdf/2407.08674 github链接&#xff1a; https://still-moving.github.io/ Still-Moving 自定义文本生成图像&#xff08;T2I&#xff09;模型最近取得了巨大进展&#xff0c;尤其是在个性化、风格化和条件生成等领域。然而&#xff0c…

星辰计划02-独特视角的spring动态代理

承接上一文 动态代理 &#xff0c;这里探究spring 动态代理 会话1&#xff1a;spring动态代理 quick start &#x1f467;哥哥&#xff0c;哥哥&#xff0c;spring 怎么去搞动态代理的呢&#x1f468; 来来来&#xff0c;听我细细来说 quick start通过Spring的 ProxyFactory…

学习小记-Nacos的服务注册与发现原理

服务注册&#xff1a; 当一个服务实例启动时&#xff0c;它会向 Nacos 服务器注册自己的信息&#xff0c;包括 IP 地址、端口号、元数据&#xff08;如服务版本、区域信息等&#xff09;。服务实例使用 Nacos API 发送注册请求&#xff0c;Nacos 服务器接收请求并存储服务实例信…

浅聊授权-spring security和oauth2

文章目录 前言自定义授权spring security授权oauth2授权概述 前言 通常说到授权&#xff0c;就会想到登录授权、token令牌、JWT等概念&#xff0c;授权。顾名思义就是服务器授予了客户端访问资源的权益&#xff0c;那么要实现授权有几种方案呢&#xff0c;三种授权方式在公司项…

Python个性化电影推荐系统的设计与实现

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

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

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

Mac电脑下运行java命令行出现:错误: 找不到或无法加载主类

mac 电脑 问题复现 随手写了一个main方法&#xff0c;想用命令行操作 进入 BlockDemo.java 所在目录&#xff1a; wnwangnandeMBP wn % cd /Users/wn/IdeaProjects/test/JianZhiOffer/src/main/java/com/io/wn wnwangnandeMBP wn % ls -l total 16 -rw-r--r-- 1 wangnan …

前端框架学习之 搭建vue2的环境 书写案例并分析

目录 搭建vue的环境 Hello小案例 分析案例 搭建vue的环境 官方指南假设你已经了解关于HTML CSS 和JavaScript的中级知识 如果你刚开始学习前端开发 将框架作为你的第一步可能不是最好的主意 掌握好基础知识再来吧 之前有其他框架的使用经验会有帮助 但这不是必需的 最…

【JavaScript 算法】二分查找:快速定位目标元素

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、算法原理二、算法实现三、应用场景四、优化与扩展五、总结 二分查找&#xff08;Binary Search&#xff09;是一种高效的查找算法&#xff0c;适用于在有序数组中快速定位目标元素。相比于线性查找&#xff0c;二分查找…

【java】力扣 买卖股票的最佳时机II

文章目录 题目链接题目描述思路代码 题目链接 122.买卖股票的最佳时机II 题目描述 思路 这道题和121.买卖股票的最佳时机 有所不同&#xff0c;不同点在于&#xff0c;这道题的股票可以多次买卖(但是要在买之前先卖掉) 详细思路请看链接的文章【java】力扣 买卖股票的最佳时…

Milvus核心设计(2)-----TSO机制详解

目录 背景 动机 Timestamp种类及使用场景 Guarantee timestamp Service timestamp Graceful time Timestamp同步机制 主流程 时间戳同步流程 背景 Milvus 在设计上突出了分布式的设计,虽然Chroma 也支持分布式的store 与 query。但是相对Milvus来说,不算非常突出。…

Linux--USB驱动开发(二)插入USB后的内核执行程序

一、USB总线驱动程序的作用 a&#xff09;识别USB设备 1.1 分配地址 1.2 并告诉USB设备(set address) 1.3 发出命令获取描述符 b&#xff09;查找并安装对应的设备驱动程序 c&#xff09;提供USB读写函数 二、USB设备工作流程 由于内核自带了USB驱动,所以我们先插入一个U…

SQL中的谓词与谓词下推

在 SQL 查询中&#xff0c;谓词&#xff08;Predicate&#xff09;是用来对数据进行过滤的条件。它们决定了数据从数据库表中被选择的条件。理解和正确使用 SQL 谓词对于编写高效查询至关重要。 目录 什么是谓词&#xff1f;一个真实的故事SQL 谓词的代码示例比较谓词逻辑谓词…

服务客户,保证质量:腾讯云产品的质量实践

分享主题是“服务客户&#xff0c;保证质量”。自从20年开始&#xff0c;我们把质量提升到了一个前所未有的高度。为什么会如此重视质量呢&#xff1f;在竞争激烈和复杂的市场环境中&#xff0c;产品质量对于企业的重要性不言而喻。一旦出现了质量事故&#xff0c;对客户和企业…

SCI二区|母亲优化算法(MOA)原理及实现【免费获取Matlab代码】

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献5.代码获取 1.背景 2023年&#xff0c;I Matoušov受到母亲与孩子之间的人际互动启发&#xff0c;提出了母亲优化算法&#xff08;Mother Optimization Algorithm, MOA&#xff09;。 2.算法原理 2.1算法思…

PHP中的函数与调用:深入解析与应用

目录 一、函数基础 1.1 函数的概念 1.2 函数的定义 1.3 函数的调用 二、PHP函数的分类 2.1 内置函数 2.2 用户自定义函数 2.3 匿名函数 2.4 递归函数 2.5 回调函数 2.6 魔术方法 三、函数的参数与返回值 3.1 参数传递 3.2 返回值 四、函数的高级特性 4.1 可变函…

【HarmonyOS】鸿蒙中如何获取用户相册图片?photoAccessHelper.PhotoViewPicker

【HarmonyOS】鸿蒙中如何获取用户相册图片&#xff1f;photoAccessHelper.PhotoViewPicker 前言 有同学私聊我说&#xff0c;之前的博客文章提到的没有HarmonyOS白名单帐号&#xff0c;如何在OpenHarmony Gitee开发仓里学习API接口。需要注意一个点&#xff0c;默认看到的文档…