当前位置: 首页 > news >正文

vue项目开发环境工具-node

最近在开始接触做vue框架的前端项目,以前用的前端比如html,js,css等都是比较原生的,写好后直接浏览器打开就行。但vue跟java一样是需要编译的,和微信小程序类似。今天就先记录一下vue的开发运行搭建。所需工具如下

nodejs 等同于jdk,使得js可以跨平台
visual Studio Code 类似idel、eclipse等开发工具(也可以选别的开发工具)

一、下载安装node.js。官方下载地址 https://nodejs.cn/download/
在这里插入图片描述
选这个长期支持的版本就好(就像jdk一样目前主流还是1.7和1.8的版本), 想下载最新版本也行。 下载后双击安装,一直点击下一步啥也不用修改勾选完成安装(默认安装目录C:\Program Files\nodejs\,不想装C盘就改成别的目录)。然后设置系统环境变量,双击path添加一行如下填上nodejs的安装目录(win7是在path的值后追加 ;C:\Program Files\nodejs\)

在这里插入图片描述
二、验证安装成功
输入如下两个命令,显示版本号说明安装成功(和验证jdk安装类似)

node -v
npm -v

在这里插入图片描述

三、查看修改模块下载位置(非必须可省略,有点类似mevan自定义本地仓库地址,反正有默认的下载存放路径,想改成别的按如下去改)

npm get prefix  # 查看 全局模块的存放路径
npm get cache  # 查看 缓存默认存放路径
npm config set prefix "你的新路径"  # 修改 全局模块的存放路径
npm config set cache "你的新路径"  # 修改 全局模块的存放路径

四、修改镜像(非必须但建议,类似修改maven的settings.xml文件里面的仓库地址)
由于npm的服务器在国外下载速度慢卡,所以大家一般更换为淘宝镜像https://registry.npm.taobao.org,可以参考下面命令替换镜像地址即可。

npm config get registry  # 查看当前使用的镜像 默认是 https://registry.npmjs.org
npm config set registry https://registry.npm.taobao.org/  # 更换npm镜像

这两个命令牢记一下,后续开发中可能会常用。因为有些公司可能有自己的私有镜像地址,不同的项目用的镜像地址不同,所以会来回切换。切记镜像不切换,有些依赖包就下载不下来,项目自然也就运行报错,跟java一样的。

cnpm安装(淘宝提供的,主要用于下载模块)
下载依赖包有时候通过npm命令,部分东西下载不下来但通过cnpm却可以,所以还是有必要安装一下,安装也就简单就一行命令

npm install -g cnpm --registry=https://registry.npm.taobao.org  # 安装
cnpm -v  # 检查是否安装成功

执行效果如下
在这里插入图片描述
安装完成后,会多出如下文件夹。不过不用管,上面查看cnpm版本执行成功就ok

在这里插入图片描述
五、安装VSCodeUserSetup-x64-1.73.1.exe
网上搜索visual Studio Code下载程序包后,也一直下一步按完成安装即可。安装后是英文版的,首次打开的时候右下角会有个弹窗提示安装汉化包直接点击,安装后重启vscode。如果没弹窗,点击左测第四个菜单“拓展”(相当于idel的plus,装插件的地方),输入language 选择chinese进行安装。
在这里插入图片描述
切换语言 快捷键Ctrl+Shift+P会弹出命令窗口,输入“configure language”回车,选择需要切换的语言
在这里插入图片描述
六、运行项目
1 导入项目
先从git/svn拉下代码到本地,点击菜单栏 file–> 打开文件夹,选择到你代码存放的那个文件夹, 这样就把项目导入了。先介绍一下的布局和常用按钮菜单(和idel的使用差不多)
在这里插入图片描述
“控制台”和“终端”的唤起
方法1 : 点击菜单栏的查看,再点击“控制台”或“终端”即可。
方法2 : 快捷键是ctrl + shit + Y, 更多功能的快捷键,可以点击 帮助 --> “键盘快捷方式参考” 会跳转浏览器展示一个pdf给你. 点击查看
在这里插入图片描述
如果没有 控制台 终端 等菜单,右键给对应的打勾就显示了

2 下载依赖
点击终端 输入命令 npm install 或者 npm i (npm 也可以替换为cnpm)
在这里插入图片描述
下载完成后, 你的项目下会多出一个node_modules的文件, 这就是执行后下载下来的依赖包了。相当于maven的本地仓库一样,只不过maven是所有项目公用,它却是项目独享。如果有部分没下载成功,可以尝试删除这个文件夹重新执行命令进行重新下载

3 运行项目
在项目的跟目录下面找到package.json 这个文件,scripts参数后面的值,就是可以运行的服务名称。ctrl+shfit+唤起 终端 ,输入命令 npm run 项目服务名称
在这里插入图片描述
执行命令 npm run server
在这里插入图片描述
复制上面local的url 地址到浏览器打开,即可看到vue项目的首页,项目启动成功。如果需要打包项目,执行命令 npm run build 。
在这里插入图片描述
项目的代码结构介绍和常用功能,可以参考我另外一篇

相关文章:

vue项目开发环境工具-node

最近在开始接触做vue框架的前端项目,以前用的前端比如html,js,css等都是比较原生的,写好后直接浏览器打开就行。但vue跟java一样是需要编译的,和微信小程序类似。今天就先记录一下vue的开发运行搭建。所需工具如下 nod…...

Python | 为FastAPI后端服务添加API Key认证(分别基于路径传参和header两种方式且swagger文档友好支持)

文章目录 01 前言02 路径传参方式添加API Key2.1 完整代码2.2 请求示例2.3 swagger文档测试 03 请求头Header方式传入API Key(推荐)3.1 完整代码3.2 请求示例3.3 swagger文档测试 01 前言 FastAPI,如其名所示,是一个极为高效的框…...

nodeJs+jwt实现小程序tonken鉴权

nodeJsjwt实现小程序tonken鉴权 自我记录 config\config.js // 配置文件 module.exports {DBHOST: 127.0.0.1,DBPORT: 27017,DBNAME: test,secret: xxxxx,// 小程序的appSecretAppID: xxxxx,// 小程序的appId }token中间件 middlewares\checkTokenMiddleware.js //导入 jwt…...

更新andriod studio版本,项目编译报could not find org.junit.jupiter:junit-jupiter

原本使用Android Studio 版本是4.1.1,现更新为 点击build -》 build bundle -》build apk,项目报 Could not determine the dependencies of task :app:compileDebugUnitTestJavaWithJavac. > Could not resolve all task dependencies for configur…...

【慕伏白教程】 Linux 深度学习服务器配置指北

文章目录 镜像烧录系统安装系统配置常用包安装 镜像烧录 下载 Ubuntu 镜像 Ubuntu 桌面版 下载烧录工具 balenaEtcher 准备至少 8G 的 空白U盘 开始烧录 系统安装 开机进入BIOS,修改U盘为第一启动 选择 Try or Install Ubuntu 往下拉,选择 中文&a…...

学习windows系统让python脚本在后台运行的方法

学习windows系统让python脚本在后台运行的方法 windows 后台运行并输出日志文件windows 前台运行并输出日志文件 windows 后台运行并输出日志文件 命令: python qipa250.py >> qipa250_logs.log 2>&1 &窗口关闭后程序也就关闭了 windows 前台运…...

华为OD机试 - 第k个排列 - 全排列递归(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(A卷B卷&#…...

流媒体播放器EasyPlayer.js无法播放H.265的情况是什么原因?该如何解决?

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8&#…...

负载均衡器监控

什么是负载均衡器 负载均衡建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。其意思就是分摊到多个操作单元上进行执行,例如Web服务器、FTP服务器、企…...

【计算机视觉】2.图像特征提取

图像特征提取 一、颜色特征量化颜色直方图聚类颜色直方图 二、边缘特征边缘边缘定义边缘提取边缘精细 三、特征点的特征描述子Harris角点FAST角点斑点SIFTHaar-like特征SURFORBLBPGabor 一、颜色特征 量化颜色直方图 HSV空间 优势:计算高效 劣势:量化问…...

华为存储培训

01 存储前沿技术和发展趋势 狭义的存储定义 CD、DVD、ZIP、磁带、硬盘等 广义的存储定义 存储硬件系统(磁盘阵列,控制器,磁盘柜,磁带库等) 存储软件(备份软件;管理软件,快照&…...

I帧、P帧,B帧,GOP

doGetNextFrame() 在Live555库的FramedSource类中,数据帧的获取位置由doGetNextFrame()函数来设置。这个函数是一个虚函数,子类可以重写它以实现特定类型的数据帧获取逻辑。 在FramedSource的子类中,你可以重写doGetNextFrame()函数&#x…...

Apache DolphinScheduler在中国信通院“2023 OSCAR开源尖峰案例”评选中荣获「尖峰开源项目奖」!

在近日由中国信息通信研究院(以下简称“中国信通院”)和中国通信标准化协会联合主办的“2023 OSCAR 开源产业大会”上,主办方公布了 2023 年“OSCAR 开源尖峰案例”评选结果,包括“开源人物”“开源项目”“开源社区”“开源企业”…...

Java Lambda 表达式

💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Java Lambda 表达式 Java Lambda 表达式是 Java 8 引入的一种函数式编程特性,它是一种轻量级的匿名函数,允许我们将函数作为方法的参数进行传递…...

数据结构--插入排序

目录 插入排序 算法实现 算法效率分析 插入排序的优化-折半插入排序 最终的结果:(方式) 优化-折半查找的代码实现 ​回顾 插入排序 算法实现 算法效率分析 空间复杂度和问题规模无关 插入排序的优化-折半插入排序 之前的元素有序&am…...

服务器搭建(TCP套接字)-epoll版(服务端)

epoll 是一种在 Linux 系统上用于高效事件驱动编程的 I/O 多路复用机制。它相比于传统的 select 和 poll 函数具有更好的性能和扩展性。 epoll 的主要特点和原理: 1、事件驱动:epoll 是基于事件驱动的模型,它通过监听事件来触发相应的回调函…...

第一章:最新版零基础学习 PYTHON 教程(第十八节 - Python 表达式语句–Python 中的中断、继续和传递)

在 Python 中使用循环可以高效地自动执行和重复任务。但有时,可能会出现您想要完全退出循环、跳过迭代或忽略该条件的情况。这些可以通过循环控制语句来完成。循环控制语句改变其正常顺序的执行。当执行离开作用域时,在该作用域中创建的所有自动对象都将被销毁。Python支持以…...

Spring Cloud Alibaba Ribbon负载均衡器

文章目录 Ribbon 负载均衡器环境搭建1.依赖2.配置3.修改其默认的负载均衡策略3.1 验证 4.创建自定义的Rule4.1 MyRule()4.2 在配置config类中配置 5.饥饿加载6.我只想访问不想被别的访问 Ribbon 负载均衡器 背景 Ribbon 是一个用于客户端负载均衡的开源…...

ardupilot开发 ---传感器驱动,外设驱动篇

ardupilot支持不同厂商的传感器,如雷达,声呐,激光,相机等; 支持的通信协议 I2C, SPI, UART (aka Serial) CANBUS 驱动程序的前后台分离 ardupilot中传感器驱动的重要结构是前后分离; Library库调用前端…...

二叉树的存储

目录 1.使用孩子表示法创建二叉树 2.二叉树的遍历 2.1前中后序遍历 2.2 前中后序遍历的选择题 2.3实现前中后序遍历 2.3.1前序遍历 2.3.2中序遍历 2.3.3后序遍历 3.二叉树的基本操作 3.1获取叶子节点的个数 3.2获取树中节点的个数 3.3获取第K层节点的个数 3.4获取…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

Python如何给视频添加音频和字幕

在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...

零基础设计模式——行为型模式 - 责任链模式

第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...