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

news2024/11/26 2:35:10

前言: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.coloradmin.cn/o/1265018.html

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

相关文章

华为P40无法链接adb的解决记录

真的很讨厌华为的设备,很多东西啥设备都能跑得好好的,就华为会出问题,简直就是手机界的IE。 情况:突然无法链接adb到P40,拔插无效,关闭开发人员选项再打开也无效,撤销USB调试授权也无效&#x…

xcode opencv

1、导入报错 Undefined symbols: linker command failed with exit code 1 (use -v to see invocation) 直接添加如下图内容即可

ArkTS-WebView内嵌H5页面

鸿蒙开发使用WebView内嵌H5页面 访问在线网页时需添加网络权限:ohos.permission.INTERNET module.json5文件配置 {"module" : {"requestPermissions":[{"name": "ohos.permission.INTERNET"}]} }踩坑日记 加载网页效果无法…

python-爬虫(可直接使用)

爬虫(Web Scraping)是指通过编程自动化地获取互联网上的信息的过程。爬虫的目的通常是从网页中抓取数据,进行数据分析、处理或展示。以下是爬虫的基本流程和一些重要的概念: 爬虫基本流程: 确定目标: 确定要…

React 之 airbnb - 项目实战

一、开发前言 1. 规范 2. 创建项目 node -v > 18.0.0 npm -v > 8.6.0 create-react-app star-airbnb 3. 项目基本配置 配置jsconfig.json {"compilerOptions": {"target": "es5","module": "esnext","ba…

如何设置带有密码的excel只读模式?

Excel只读模式大家都不陌生,那大家知道带有密码的只读模式吗?今天给大家分享如何设置带有密码的只读模式。 打开excel文件,将文件进行【另存为】设置,然后停留在保存路径的界面中,我们点击下面的工具 – 常规选项 在常…

postgresql以及postgis安装

一、安装postgresql及postgis 1.下载postgresql https://www.enterprisedb.com/downloads/postgres-postgresql-downloads 我选择的版本为“postgresql-14.8-2-windows-x64.exe”。 2.以管理员模式运行安装程序 安装路径建议不要C盘,可能会由于权限问题导致目录…

【计算机毕业设计】nodejs+vue音乐播放器系统 微信小程序83g3s

本系统的设计与实现共包含12个表:分别是配置文件信息表,音乐列表评论表信息表,音乐论坛信息表,歌手介绍信息表,音乐资讯信息表,收藏表信息表,token表信息表,用户表信息表,音乐类型信…

Elasticsearch:向量搜索 (kNN) 实施指南 - API 版

作者:Jeff Vestal 本指南重点介绍通过 HTTP 或 Python 使用 Elasticsearch API 设置 Elasticsearch 以进行近似 k 最近邻 (kNN) 搜索。 对于主要使用 Kibana 或希望通过 UI 进行测试的用户,请访问使用 Elastic 爬虫的语义搜索入门指南。你也可以参考文章…

最新AIGC创作系统ChatGPT系统源码+DALL-E3文生图+图片上传对话识图/支持OpenAI-GPT全模型+国内AI全模型

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…

Java实现通过经纬度求两个任意地点在球面上的距离

我们在实际开发中会获取对应的经纬度,可以使用ES大数据搜索引擎进行计算对应区域的数据,那我们在如何根据两个经纬度获取对应的球面距离,就是在地球上从一个地点到另一个地点的直线距离 工具类如下: public class GeoUtils {// 地球半径&am…

手把手教你如何实现List——ArrayList

目录 前言: 线性表 顺序表 接口的实现 一. 打印顺序表 二.新增元素,默认在数组最后新增 三.在 pos 位置新增元素 四.判定是否包含某个元素 五. 查找某个元素对应的位置 六.获取 pos 位置的元素 七.给 pos 位置的元素设为 value 八.删除第一次出现的关键字k…

移动应用开发介绍及iOS方向学习路线(HUT移动组版)

移动应用开发介绍及iOS方向学习路线(HUT移动组版) 前言 ​ 作为一个HUT移动组待了一坤年(两年半)多的老人,在这里为还在考虑进哪个组的萌新们以及将来进组的新朋友提供一份关于移动应用开发介绍以及学习路线的白话文…

华为云(HECS)docker环境下安装jenkins

Jenkins是一个开源的自动化工具,可以自动化地完成构建、测试、交付或部署等任务。总之重点就是三个字:自动化,至于如何实现这些功能,Jenkins基于插件化的机制,提供了众多的插件来完成持续集成CI与持续部署CD。 【持续…

直播场景视频和特效解决方案

直播已经成为企业与消费者互动的重要方式,如何提供优质的直播内容,提升直播效果,以及实现直播内容的商业化转化,一直是企业面临的重要挑战。为此,美摄科技提供了一套全面的直播场景解决方案,帮助企业解决这…

内网渗透(哈希传递)

概念 早期SMB协议明文在网络上传输数据,后来诞生了LM验证机制,LM机制由于过于简单,微软提出了WindowsNT挑战/响应机制,这就是NTLM。 哈希传递前提 同密码(攻击主机与实现主机两台要密码一致)。 NTLM协议 加密ntlm哈希 转换成…

力扣hot100 最大子数组和 动态规划 分治 无后效性 子问题划分

👨‍🏫 题目地址 无后效性 为了保证计算子问题能够按照顺序、不重复地进行,动态规划要求已经求解的子问题不受后续阶段的影响。这个条件也被叫做「无后效性」。换言之,动态规划对状态空间的遍历构成一张有向无环图,遍…

UE4 UE5 使用SVN控制

关键概念:虚幻引擎中使用SVN,帮助团队成员共享资源。 1. UE4/UE5项目文件 如果不需要编译的中间缓存,则删除: DerivedDataCache、Intermediate、Saved 三个文件夹 2.更新、上传

梦极光(ez_re???)

ez_re 先查壳看看,没有壳 32位 我先说说这道题 打开分析找到主函数 在这里就是flag了,用十六进制转ascll码 我们先运行这个程序看看 我想说说我的想法 首先没看出来这里是十六进制转ascll码其次41D538数组用来干啥来的?题目里面给出的请…

JVM GC算法

一, 垃圾回收分类: 按线程数分,可以分为串行垃圾回收器和并行垃圾回收器。 按工作模式分,可以分为并发垃圾回收器和独占式垃圾回收器 按碎片处理方式分,可以分为压缩式垃圾回收器和非压缩式垃圾回收器按工作的内存区间分,又可分为…