前端工程化-vue项目创建

news2025/1/12 13:27:10

可以使用html、css、javascpript ,以及使用vue、axios等技术搭建前端页面,但效率低、结构乱。

实际前端开发:

前端工程化开发步骤:

一、环境准备

 

1.安装NodeJS2. 安装vue-cli

 

二、创建Vue项目 

 

 有两种方式创建,一般采用第二种图形界面的方式创建,vue ui ,输入命令后呈现下图:

创建后的项目各目录的含义:

 

src中  APP.vue(以前的页面是.html结尾的,脚手架中都是以.vue结尾,没有.html文件了) 代表的就是页面,这里也称组件。是vue已经定义好的组件;views中则是用户自定义的组件。main.js、App.vue、views、router四个文件(夹)重点关注。

三、vue项目启动

两种启动方式,图形化界面、命令行

1.图形化界面启动

vscode中,展示npm脚本; 点击serve vue-cli-service serve

 

项目运行成功界面 :

 

按ctrl +c 终止项目 

 通过Local中的 http://locatehost:8080可以访问 vue-cli项目。

 

因为8080端口是后端tomcat默认的端口号,所以,还需要修改端口号: 

 

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

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

相关文章

【连续3年稳定发表,门槛低 易中稿】第四届先进制造技术与电子信息国际学术会议(AMTEI 2024,9月20-22)

由深圳技术大学集成电路与光电芯片学院、中南大学自动化学院联合支持的第四届先进制造技术与电子信息学术会议(AMTEI 2024)将于2024年09月20-22日在重庆召开。 本次会议主要围绕先进制造技术与电子信息的最新研究领域,为来自国内外高等院校、…

Springboot+Thymeleaf实现纯静态化页面处理

前言&#xff1a;引入包什么的就不讲了&#xff0c;这里我只记录如何实现。 在template目录下构建模板页面 IndexTemplate.html。一般模板文件都是放在这个下面<!DOCTYPE html> <html lang"zh" xmlns:th"http://www.thymeleaf.org"> <head&…

深度模型中的优化 - 优化策略和元算法篇

序言 在人工智能与机器学习的快速发展中&#xff0c;深度模型作为核心技术之一&#xff0c;其优化问题至关重要。深度模型通过构建多层神经网络来模拟人脑的学习与推理过程&#xff0c;处理复杂数据模式与任务。然而&#xff0c;这些强大能力的背后&#xff0c;离不开高效的优…

【python函数】调用系统命令进行文件夹的创建与删除

大家好&#xff0c;我是一名_全栈_测试开发工程师&#xff0c;已经开源一套【自动化测试框架】和【测试管理平台】&#xff0c;欢迎大家关注我&#xff0c;和我一起【分享测试知识&#xff0c;交流测试技术&#xff0c;趣聊行业热点】。 一、函数说明&#xff1a; 获取系统名称…

人工智能计算机视觉系列—构建你的图像标签管理系统:使用Flask和SQLite实现前后端应用

文章目录 1. 项目背景2. 方案概述3. 环境部署4. 具体实现5. 运行步骤6. 总结 1. 项目背景 在机器学习和计算机视觉的开发过程中&#xff0c;我们经常需要处理大量的图像及其标签信息。一个直观、便捷的图像和标签展示工具可以极大地提高开发效率。本文将介绍如何使用Flask框架…

最靠谱的搭建方式-ESP32入门搭建Arduino开发环境基于mac系统

ESP32入门搭建Arduino开发环境基于mac系统 1.概述 ESP32开发版作为物联网开发非常的方便&#xff0c;不过在入门时候搭建Arduino开发环境比较麻烦&#xff0c;因为Arduino在下载ESP32开发环境时总是失败&#xff0c;因此不得不采用手动安装环境方式。 这篇文章主要介绍mac系统…

Java 并发编程实战权威指南(电子版教程)

前言 Java并发编程主要涉及多线程编程&#xff0c;通过创建多个线程来并发执行任务&#xff0c;从而提高程序的执行效率和响应能力。Java提供了多种机制和技术来实现并发编程&#xff0c;包括进程和线程的管理、同步机制、高级并发工具以及最佳实践。 一、下载地址 下载地址…

hadoop学习笔记3-yarn

4.YARN yarn本质上是一个负责管理资源节点、调度资源节点的资源调度平台&#xff0c;负责为运算程序提供服务器计算资源&#xff0c;把任务调度到合适的节点上执行 4.1yarn架构 yarn 主要由ResourceManager、NodeManager、applicationmaster组件构成 yarn将资源管理和应用程…

PowerDNS架构解析与安装部署指南

1、背景介绍 目前公司使用PowerDNS进行DNS管理&#xff0c;但由于采用的是单节点架构&#xff0c;存在不可用的风险。为提升系统的稳定性和可靠性&#xff0c;我们计划对现有架构进行重构。通过引入高可用性设计&#xff0c;我们将优化系统架构&#xff0c;使其能够在故障情况…

设计模式 之 —— 抽象工厂模式

目录 什么是抽象工厂模式&#xff1f; 定义 特点 抽象工厂模式&#xff08;java代码示例&#xff09; 首先定义第一个接口 实现第一个接口的类 定义第二个接口 实现第二个接口的类 * 创建抽象工厂类 创建扩展了 AbstractFactory 的工厂类 饮料工厂 食物工厂 * 创建一个…

非科班出身的你,如何转行web安全工程师?零基础入门到精通,收藏这一篇就够了

想从其他行业转行到算法工程师的人&#xff0c;无外乎以下几个原因&#xff1a; 现在工资太低 工作没有前景 对现在的工作没有热情 对web安全工程师很感兴趣 那么&#xff0c;转行web安全工程师&#xff0c;你需要掌握哪些技能呢&#xff1f; ​ 为了帮助大家更好的学习网络…

第100+18步 ChatGPT学习:R实现SVM分类

基于R 4.2.2版本演示 一、写在前面 有不少大佬问做机器学习分类能不能用R语言&#xff0c;不想学Python咯。 答曰&#xff1a;可&#xff01;用GPT或者Kimi转一下就得了呗。 加上最近也没啥内容写了&#xff0c;就帮各位搬运一下吧。 二、R代码实现SVM分类 &#xff08;1&a…

Docker部署nacos...用户名密码错误

前提 镜像选择v2.3.0版本&#xff0c;因为最新的没拉下来用的别的地方save load的镜像。 官方示例 官方文档 数据库脚本&#xff0c;直接去数据库新建数据库nacos吧&#xff0c;执行脚本&#xff0c;执行完成后&#xff0c;发现只有建表语句&#xff0c;查询得知&#xff0c…

springboot+Activiti7整合实践 (九) 网关

系列文章目录 第一章 springbootActiviti7整合实践 (一) 第二章 springbootActiviti7整合实践 (二) 模型定义 第三章 springbootActiviti7整合实践 (三) 流程定义 第四章 springbootActiviti7整合实践 (四) 分配规则 第五章 springbootActiviti7整合实践 (五) 发布流程 第…

股票预测模型中注意力多层Attention RNN LSTM 的应用

全文链接&#xff1a;https://tecdat.cn/?p37152 原文出处&#xff1a;拓端数据部落公众号 Attention 机制是一种在神经网络处理序列数据时极为关键的技术&#xff0c;它赋予了模型“聚焦”能力&#xff0c;能够自动评估输入序列中各部分的重要性。通过为序列中的每个元素分…

一文读懂CST电磁仿软件的TLM算法原理和历史背景

这期我们免公式地介绍一下TLM原理。TLM&#xff08;Transmission Line Method&#xff09;是传输线矩阵算法&#xff0c;基于Huygens的波传播模型的三维全波电磁算法&#xff0c;注意是full wave哦&#xff01; 什么是Huygens原理&#xff1f; 惠更斯原理能准确计算波的传播。…

三大旗舰实力,奇瑞风云T10全球上市,售价18.99万元起

旗舰之上&#xff0c;10力超群&#xff01;7月25日&#xff0c;超长续航旗舰电混SUV——风云T10于弥勒全球上市。基于全球标准及全球验证体系打造的风云T10&#xff0c;凭借旗舰级的性能、安全、空间三大产品价值&#xff0c;树立了新能源时代的新标杆。新车共推出3款车型&…

目标检测 YOLOv5-7.0 详细调试自制数据集实战

目标检测 YOLOv5-7.0 详细调试&自制数据集实战 一、项目介绍及环境配置&#xff08;一&#xff09;项目解读&#xff08;二&#xff09;版本选择&#xff08;三&#xff09;环境配置 二、如何利用YOLOv5进行预测&#xff08;detect.py&#xff09;&#xff08;一&#xff0…

DOS攻击实验

实验背景 Dos 攻击是指故意的攻击网络协议实现的缺陷或直接通过野蛮手段&#xff0c;残忍地耗尽被攻击对象的资源&#xff0c;目的是让目标计算机或网络无法提供正常的服务或资源访问&#xff0c;使目标系统服务系统停止响应甚至崩溃。 实验设备 一个网络 net:cloud0 一台模…

如何在go里使用jwt(包含示例)

什么是JWT JWT就是一种基于Token的轻量级认证模式&#xff0c;服务端认证通过后&#xff0c;会生成一个JSON对象&#xff0c;经过签名后得到一个Token&#xff08;令牌&#xff09;再发回给用户&#xff0c;用户后续请求只需要带上这个Token&#xff0c;服务端解密之后就能获取…