前端工程化:环境准备—NodeJs安装-Vue项目开发流程

news/2024/7/10 1:45:08 标签: 前端, npm, node.js, vue

一、前端工程化-Yapi

介绍:YApi 是高效、易用、功能强大的 api 管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务

地址: http://yapi.smart-xwork.cn/

image-20230415001030061

image-20230415001047765 image-20230415001105558

具体操作步骤:

1、添加项目

image-20230415001738105

2、添加接口:根据ID查询用户;添加分类:用户管理

image-20230415001141075

3、请求参数修改,以及返回数据设置是导入json

image-20230415001206234

image-20230415001225706

image-20230415001233565

二、前端工程化-环境准备

image-20230415002051678

image-20230415002322939

NodeJS安装

1. 双击资料中提供的安装包

2. 选择安装目录

选择安装到一个,没有中文,没有空格的目录下(新建一个文件夹NodeJS)

3. 验证NodeJS环境变量

NodeJS 安装完毕后,会自动配置好环境变量,我们验证一下是否安装成功,通过: node -v

npm_71">4. 配置npm的全局安装路径

使用管理员身份运行命令行,在命令行中,执行如下指令:

npm config set prefix "E:\develop\NodeJS"

注意:E:\develop\NodeJS 这个目录是NodeJS的安装目录

npm_91">5. 切换npm的淘宝镜像

使用管理员身份运行命令行,在命令行中,执行如下指令:

npm config set registry https://registry.npm.taobao.org

6. 安装Vue-cli

使用管理员身份运行命令行,在命令行中,执行如下指令:

npm install -g @vue/cli

这个过程中,会联网下载,可能会耗时几分钟,耐心等待。

三、前端工程化-Vue项目

image-20230415094524743

image-20230415094536713

image-20230415094549787

image-20230415094557291

四、Vue项目开发流程

image-20230415100931395

image-20230415101022503

public下的默认首页index.html很少去操作,入口文件main.js很少去操作


http://www.niftyadmin.cn/n/224670.html

相关文章

Vue——事件

目录 触发与监听事件​ 事件参数​ 声明触发的事件​ 事件校验​ 触发与监听事件​ 在组件的模板表达式中&#xff0c;可以直接使用 $emit 方法触发自定义事件 (例如&#xff1a;在 v-on 的处理函数中)&#xff1a; <!-- MyComponent --> <button click"$em…

STM32开发(十三)STM32F103 片内资源 —— 外部中断 按键 详解

文章目录一、基础知识点二、开发环境三、STM32CubeMX相关配置四、Vscode代码讲解五、结果演示一、基础知识点 外部中断/事件控制器主要特征&#xff1a; 每个中断/事件都有独立的触发和屏蔽每个中断线都有专用的状态位支持多达20个软件的中断/事件请求检测脉冲宽度低于APB2时…

价值迭代求解马尔可夫决策过程

Value Iteration Algorithm 其算法思想是: 在每一个状态s下&#xff0c; 之迭代算法流程如下&#xff1a; 初始化状态价值state value&#xff0c;即对每个状态的价值都赋一个初始值&#xff0c;一般是0 计算每一个状态-动作对的 动作价值函数&#xff0c;通常通过创建一个二维…

rviz 可视化手机 IMU

原博客&#xff1a;https://www.cnblogs.com/hitcm/p/5616364.html 原代码&#xff1a;https://github.com/hitcm/Android_Camera-IMU.git 上面说的不太详细&#xff0c;出现了无法可视化 IMU 转交的情况。git 的 issue 中也有人遇到这个问题。本博客记录了自己如何克服 BUG 并…

在 Linux 驱动中,使用定时器或者工作队列来实现轮询执行一个功能

定时器 定时器是一种在指定时间间隔内周期性地执行某个函数的机制。在 Linux 内核中&#xff0c;可以使用 timer_setup() 函数来创建一个定时器&#xff0c;然后使用 mod_timer() 函数来启动定时器。在定时器的回调函数中&#xff0c;可以执行需要轮询的功能。 下面是一个简单…

介绍一款功能强大的步进电机控制驱动芯片TMC5240

步进电机由于具有控制简单&#xff0c;良好的速度和位置控制被大量用在工业自动化、医疗设备、仪器仪表、实验室自动化、办公自动化、智能家居......等众多行业&#xff0c;实现让步进电机转起来相对容易很多&#xff0c;但是在应用中简单的转起来并无法满足实际应用的需求&…

【Mybatis源码分析】类型处理器(TypeHandler)及其注册

TypeHandler和TypeHandlerRegistryTypeHandlerTypeHandler 源码分析TypeHandler注册&#xff0c;TypeHandlerRegistry源码分析TypeHandler拓展案例总结TypeHandler 大伙都知道Mybatis是对JDBC的封装&#xff0c;那Mybatis是如何处理JDBC类型和Java类型之间的转换的呢&#xff…

OpenCV VideoCapture使用方法(视频文件、摄像头、网络视频文件)

一、视频读取 cv::VideoCapture既支持视频文件的读取&#xff0c;也支持从摄像机中视频的读取。cv::VideoCapture对象的创建方式有以下三种&#xff1a; 方式一&#xff1a; cv::VideoCapture capture( const string& filename, // 输入视频文件路径名 ); 方…