Vue项目的创建、运行与端口号修改

前言:Vue-cli是Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板,依赖于NodeJS环境
NodeJS下载:NodeJS安装下载
Vue-cli下载:Vue-cli下载

一.Vue图形化创建项目

1.建立一个文件夹,保存Vue项目

2.在该文件夹的目录上输入cmd打开命令行

3.令行输入vue ui打开Vue项目管理器

4.点击创建-在此创建新项目

5.选择预设模板

6.选择插件功能

7.选择Vue版本

最后点击创建项目,不保存预设模板
等待项目创建完成(大概3分钟左右),当出现以下信息时表示项目创建完成。

生成的Vue项目文件夹内容如下:

Src文件夹下的目录

二.VsCode运行Vue项目

在创建完Vue项目后,使用Vscode运行Vue项目步骤如下:

1.使用Vscode打开Vue创建的文件夹项目
Vscode—文件–打开文件夹—选择Vue创建的目录
显示的文件夹内容应当如下:

如果菜单栏左下角没有npm选项,则点击资源管理器旁边的三个小点将npm打开

3.运行Vue项目

运行界面:
点击蓝色的链接,即可跳转出前端页面(App.vue)

三.停掉Vue项目并重新启动

1.Ctrl + C停止服务

2.输入y确认停止

3.成功停止后,按之前的方法启动即可

四.Vue项目端口号的修改

Vue自动给我们项目的访问地址端口是8080,如果要修改,则需要进行以下代码操作

1.在vue.config.js文件中修改代码,添加devServer的port属性

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer:{  port:7000    //要修改的端口号}
})

停掉服务重启后,端口即可修改

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

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

相关文章

StarRocks Evolution:One Data,All Analytics

在 11 月 17 日举行的 StarRocks Summit 2023上,StarRocks TSC Member、镜舟科技 CTO 张友东详细介绍了 StarRocks 社区的发展情况,并全面解析了 StarRocks 的核心技术与未来规划;我们特意将他的精彩演讲整理出来,以帮助大家更深入…

详解自动化之单元测试工具Junit

目录 1.注解 1.1 Test 1.2 BeforeEach 1.3 BeforeAll 1.4 AfterEach 1.5 AfterAll 2. 用例的执行顺序 通过 order() 注解来排序 3. 参数化 3.1 单参数 3.2 多参数 3.3 多参数(从第三方csv文件读取数据源) 3.4 动态参数ParameterizedTest MethodSource() 4. 测试…

python之pyqt专栏2-项目文件解析

项目结构 在上一篇文章python之pyqt专栏1-环境搭建,创建新的pyqt项目,下面我们来看一下这个项目下的文件。 从下面的文件结构图可以看到,该项目下有3个文件,untitled.ui,untitled.py 以及main.py。 QtDesigner可以UI界面的方式&am…

【Linux】EVIOCGBIT

EVIOCGBIT(ev, len) 该怎么理解? 我们可以推断出,它是一个宏,它的前两个参数已经确定了,具体的功能由后两个参数(ev,len)来决定。Linux-4.9.88\include\uapi\linux\input.h #define EVIOCGBIT(ev,len) _IOC(_IOC_READ, E, 0x20 …

杰发科技AC7801——Flash模拟EEP内存分布情况

简介 本文记录了在使用AutoChips芯片Flash模拟EEP过程中的一些理解 核心代码如下 #include <stdlib.h> #include "ac780x_sweeprom.h" #include "ac780x_debugout.h"#define SWEEPROM_SIZE (2048UL) /* Ssoftware eeprom size(Byte) */ #define TE…

jmeter中调用python代码

1、安装pyinstaller pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyinstaller 2、将py脚本打包 pyinstaller -F venv/get_image/OCR_jmeter_api.py 3、jmeter中添加OS Process Sampler并调用dist下的程序 4、执行jmeter

【接口自动化】selenium库也有大用场(获取cookie)

相信有些童鞋在做接口、或者说接口自动化测试的过程中会遇到这样的场景&#xff1a;测试的接口&#xff0c;必须是需要登录后才能发起请求成功的。 那么怎么解决呢&#xff1f; 本着团队协作的精神&#xff0c;我们就去让开发同学开个后门&#xff0c;给你个“万能”值&#x…

简历上的工作经历怎么写

通过了简历筛选&#xff0c;后续的面试官会仔细阅读你的简历内容。他们在找什么呢&#xff1f;他们希望搞清楚你在某一段经历中具体干了什么&#xff0c;并且判断你的能力具体达到了什么水平。 简历在线制作下载&#xff1a;百度幻主简历 面试官喜欢具体的经历 越具体&#x…

idea创建不了spring2.X版本,无法使用JDK8,最低支持JDK17 , 如何用idea创建spring2.X版本,使用JDK8解决方案

&#x1f9f8;欢迎来到dream_ready的博客&#xff0c;&#x1f4dc;相信您对博主首页也很感兴趣o (ˉ▽ˉ&#xff1b;) &#x1f4dc;jdk17安装全方位手把手安装教程 / 已有jdk8了&#xff0c;安装JDK17后如何配置环境变量 / 多个不同版本的JDK&#xff0c;如何配置环境变量&a…

口碑爆棚!10款项目时间轴软件带你实现高效管理!

当我们在组织、规划或管理一个项目时&#xff0c;将所有步骤清晰地展示在一个时间轴上&#xff0c;无疑可以帮助我们更好地理解整个项目的流程&#xff0c;确定关键任务&#xff0c;并在必要时进行调整&#xff0c;项目时间轴软件在此方面发挥了重要作用。 项目时间轴软件是什…

python实验3 石头剪刀布游戏

实验3&#xff1a;石头剪刀布游戏 一、实验目的二、知识要点图三、实验1. 石头剪刀布2. 实现大侠个人信息 一、实验目的 了解3类基本组合数据类型。理解列表概念并掌握Python中列表的使用。理解字典概念并掌握Python中字典的使用。运用jieba库进行中文分词并进行文本词频统计。…

vue3+tsx的使用

<template><div><xiaoman on-click"getItem" name"似懂非懂"></xiaoman></div> </template><script setup langts>import xiaoman from "./App"const getItem(item:any)>{console.log(item,it…

『RabbitMQ』入门指南(安装,配置,应用)

前言 RabbitMQ 是在 AMQP&#xff08;Advanced Message Queuing Protocol&#xff09; 协议标准基础上完整的&#xff0c;可复用的企业消息系统。它遵循 Mozilla Public License 开源协议&#xff0c;采用 Erlang 实现的工业级的消息队列(MQ)服务器&#xff0c;建立在 Erlang …

智慧机场视频监控系统方案:AI智能助力机场智慧运营

一、方案背景 随着人们生活物质水平的上升&#xff0c;人们对机场的需求也日益增多&#xff0c;在民航新建、迁建、扩建机场项目猛增的同时&#xff0c;也需同步配备相应的安防监控系统&#xff0c;以满足民航机场安全管理要求和机场运营业务的高速发展。 二、方案概述 智慧机…

express+mySql实现用户注册、登录和身份认证

expressmySql实现用户注册、登录和身份认证 注册 注册时需要对用户密码进行加密入库&#xff0c;提高账户的安全性。用户登录时再将密码以相同的方式进行加密&#xff0c;再与数据库中存储的密码进行比对&#xff0c;相同则表示登录成功。 安装加密依赖包bcryptjs cnpm insta…

数据结构:图文详解顺序表的各种操作(新增元素,查找元素,删除元素,给指定位置元素赋值)

目录 一.顺序表的概念 二.顺序表的实现 新增元素 默认尾部新增 指定位置添加元素 查找元素 查找是否存在 查找元素对应的位置 查找指定位置对应的元素 删除元素 获取顺序表长度 清空顺序表 一.顺序表的概念 在线性数据结构中&#xff0c;我们一般分为俩类&#xf…

pytorch分布式训练

1 基本概念 rank&#xff1a;进程号&#xff0c;在多进程上下文中&#xff0c;我们通常假定rank 0是第一个进程或者主进程&#xff0c;其它进程分别具有1&#xff0c;2&#xff0c;3不同rank号&#xff0c;这样总共具有4个进程 node&#xff1a;物理节点&#xff0c;可以是一个…

java学校高校运动会报名信息管理系统springboot+jsp

课题研究方案&#xff1a; 结合用户的使用需求&#xff0c;本系统采用运用较为广泛的Java语言&#xff0c;springboot框架&#xff0c;HTML语言等关键技术&#xff0c;并在idea开发平台上设计与研发创业学院运动会管理系统。同时&#xff0c;使用MySQL数据库&#xff0c;设计实…

信贷销售经理简历模板

这份简历内容&#xff0c;以信贷销售经理招聘需求为背景&#xff0c;我们制作了1份全面、专业且具有参考价值的简历案例&#xff0c;大家可以灵活借鉴。 信贷销售经理简历模板在线编辑下载&#xff1a;百度幻主简历 求职意向 求职类型&#xff1a;全职 意向岗位&#xff…

【计算机毕业设计】springboot+java高校实验室器材耗材料借用管理系统94l73

实验室耗材管理系统在Eclipse/idea环境中&#xff0c;使用Java语言进行编码&#xff0c;使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务&#xff0c;本系统教师和学生申请使用实验材料&#xff0c;管理员管理实验材料&#xff0c;审核实验材料的申请…