Java Web学习笔记23——Vue项目简介

Vue项目简介:

Vue项目-创建:

命令行:vue create vue-project01

图形化界面:vue ui

在命令行中切换到项目文件夹中,然后执行vue ui命令。

 

 只需要路由功能。这个路由功能,开始不是很理解。

 

创建项目部保存预设。

 

 

项目就创建好了,生成了好多文件夹。

然后使用VS Code打开文件夹:

文件->打开窗口:

在新窗口中打开文件夹:

 

Vue项目目录结构:

基于Vue脚手架创建出来的工程,有标准的目录结构,如下:

1)node_modules : 整个项目的依赖包

2)public:存放项目的静态文件

3)src: 存放项目的源代码

4)package.json: 维护基本信息,项目开发所需要的模块,版本信息

5)vue.config.js: 保存vue的配置文件,如:代理、端口的配置等:

在src目录下:

assets:静态资源

component:可重用的组件

router:路由配置

views:视图组件,页面 (都是.vue结尾的文件)

App.vue:入口页面(根组件)

main.js: 入口js文件

我们对目录结构有了一个简单的认识。

Vue项目的启动:

这样就访问到Vue项目。

热部署的功能:

更新App.vue页面中的内容,然后保存,网页的内容发生变化,这就是热部署的功能。

修改端口号的方法:

 将当前的8080端口进程ctrl+c停掉,然后再执行npm run serve命令启动进程:

可见端口已经改成了7000端口。

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

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

相关文章

html+css示例

HTML HTML(超文本标记语言)和CSS(层叠样式表)是构建和设计网页的两种主要技术。HTML用于创建网页的结构和内容,而CSS用于控制其外观和布局。 HTML基础 HTML使用标签来标记网页中的不同部分。每个标签通常有一个开始…

【原创】海为PLC与RS-WS-ETH-6传感器的MUDBUS_TCP通讯

点击“蓝字”关注我们吧 一、关于RS-WS-ETH-6传感器的准备工作 要完成MODBUS_TCP通讯,我们必须要知道设备的IP地址如何分配,只有PLC和设备的IP在同一网段上,才能建立通讯。然后还要选择TCP的工作模式,来建立设备端和PC端的端口号。接下来了解设备的报文格式,方便之后发送…

前端:快捷 复制chrome 控制台打印出来的 数组对象

程序中console.log出来的对象。按照以下步骤操作 1.右键点击需要处理的对象,会出现Store as global variable,点击 2.点击 Store as global variable 控制台会出现 3.在控制台 输入 copy(temp1) 这样对象就复制到了你的黏贴面板里面 在代码中直接 c…

基于STM32开发的智能语音控制系统

目录 引言环境准备智能语音控制系统基础代码实现:实现智能语音控制系统 4.1 语音识别模块数据读取4.2 设备控制4.3 实时数据监控与处理4.4 用户界面与反馈显示应用场景:语音控制的家居设备管理问题解决方案与优化收尾与总结 1. 引言 随着人工智能技术…

Vuepress 2从0-1保姆级进阶教程——标准化流程

Vuepress 2 专栏目录 1. 入门阶段 Vuepress 2从0-1保姆级入门教程——环境配置篇Vuepress 2从0-1保姆级入门教程——安装流程篇Vuepress 2从0-1保姆级入门教程——文档配置篇Vuepress 2从0-1保姆级入门教程——范例与部署 2.进阶阶段 Vuepress 2从0-1保姆级进阶教程——全文搜索…

Inpaint9.1软件下载附加详细安装教程

软件简介: Inpaint 是个人开发者Max开发的图片处理软件,可以高效去除水印,修复照片等。使用方法和操作都很简单,非常适合不会PS等软件的小白用户。 安 装 包 获 取 地 址: Iinpaint win版:​​https://souurl.cn/b…

了解JVM中的Server和Client参数

了解JVM中的Server和Client参数 Java虚拟机(Java Virtual Machine,JVM)作为Java程序运行的核心,提供了多种参数来优化和调整程序的性能和行为。其中,-server和-client是两个重要的参数,分别用于配置JVM在服…

【Android面试八股文】synochnized修饰普通方法和静态方法的区别?什么是原子性、可见性、有序性?

文章目录 synochnized修饰普通方法和静态方法的区别?什么是原子性、可见性、有序性?这道题想考察什么 ?考察的知识点考生应该如何回答synchronized 的基本原理synchronized 修饰普通方法和静态方法的区别synchronized定义同步代码块synochnized修饰普通方法和静态方法的区别…

微生物共生与致病性:动态变化与识别挑战

谷禾健康 细菌耐药性 抗生素耐药性细菌感染的发生率正在上升,而新抗生素的开发由于种种原因在制药行业受重视程度下降。 最新在《柳叶刀-微生物》(The Lancet Microbe)上,科学家提出了基于细菌适应性、竞争和传播的生态原则的跨学…

Tongweb7重置密码优化版*(by lqw )

如图所示,输入初始密码是会报错的,说明已经修改了密码 首先我们先备份一下tongweb的安装目录,避免因为修改过程中出现的差错而导致tongweb无法启动: 备份好了之后,我们关闭掉tongweb。 方式一: Cd 到tong…

C# WPF入门学习主线篇(十)—— DataGrid常见属性和事件

C# WPF入门学习主线篇(十)—— DataGrid常见属性和事件 欢迎来到C# WPF入门学习系列的第十篇。在前面的文章中,我们已经学习了 Button、TextBox、Label、ListBox 和 ComboBox 控件。今天,我们将探讨 WPF 中的另一个重要控件——D…

Python私教张大鹏 Vue3整合AntDesignVue之Anchor 锚点

用于跳转到页面指定位置。 何时使用 需要展现当前页面上可供跳转的锚点链接&#xff0c;以及快速在锚点之间跳转。 案例&#xff1a;锚点的基本使用 核心代码&#xff1a; <template><a-anchor:items"[{key: part-1,href: #part-1,title: () > h(span, {…

大学国学搜题软件?分享7个软件和公众号,来对比看看吧 #经验分享#微信#媒体

在大学里&#xff0c;高效的学习工具可以帮助我们更好地管理时间和资源&#xff0c;提高学习效果。 1.彩虹搜题 这是个老公众号了 多语言查询支持&#xff0c;满足国际用户需求。全球通用&#xff0c;无障碍搜题。 下方附上一些测试的试题及答案 1、某酸碱指示剂的&#xf…

Web前端推送功能:深入剖析与应用实践

Web前端推送功能&#xff1a;深入剖析与应用实践 在信息化社会的今天&#xff0c;Web前端推送功能作为实时通信和个性化服务的重要手段&#xff0c;受到了广泛的关注和应用。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;深入探讨Web前端推送功能的原理、应用、…

uniapp自定义的下面导航

uniapp自定义的下面导航 看看效果图片吧 文章目录 uniapp自定义的下面导航 看看效果图片吧 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6aa0e964741d4dd3a58f4e86c4bf3247.png) 前言一、写组件、我这里就没有写组件了直接写了一个页面&#xff1f;总结 前言 在…

职场十大法则:与大家共勉

现在的社会很浮躁&#xff0c;在职的我们也都很浮躁&#xff0c;总是这山望着那山高&#xff0c;都是在为薪资而努力奋斗&#xff08;甚至跳槽&#xff09;。以下是关于职场法则的一些主要内容和建议&#xff0c;与大家共勉&#xff1a; 职场法则一&#xff1a;主动与积极&…

Elasticsearch 认证模拟题 - 12

一、题目 在集群上有 task2 索引&#xff0c;请重建它到 task2_new 索引上&#xff0c;并满足以下要求&#xff1a; task2 索引的 a 字段包含有关键字 Yoo-Hoo 和 YooHoo&#xff0c;不管搜索 Yoo-Hoo 还是YooHoo 它们的结果应该一样task2_new 和 task2 的 mapping 应该一样 …

软件架构x86 、 x86_64、 arm64、aarch64

看系统信息: 大多数Linux发行版都提供如 uname -a命令 arch命令用于显示当前主机的硬件架构类型。 例如 下面的是Kylin Linux Advanced Server for Kunpeng V10 操作系统 (鲲鹏处理器是华为在2019年1月向业界发布的高性能数据中心处理器 ) 下面这个是 ubuntu 18.04.6 …

CMakeLists如何多行注释

在使用Visual Studio编写CMakeLists的时候你可能会遇到需要多行注释的情况&#xff0c;可又不知道快捷键是什么。。。 其实你只需要敲个 #[[ 就行了&#xff0c;另外一般方括号VS会自动帮你补全&#xff0c;之后将需要注释的内容放在第二个方括号与第三个方括号之间就完成注释…

1-8 C语言分支循环语句

C语言的语句分为 5 类 1&#xff1a;表达式语句2&#xff1a;函数调用语句3&#xff1a;控制语句4&#xff1a;复合语句5&#xff1a;空语句 控制语句&#xff1a;用于控制程序的执行流程&#xff0c;以实现程序的各种结构方式&#xff0c;它们由特定的语句定义符组成&#x…