当前位置: 首页 > news >正文

前端 | 前端工程化

文章目录

    • 前端工程化
      • 1. Vue项目创建
      • 2. Vue项目目录结构
      • 3. vue项目开发


前端工程化

1. Vue项目创建

  • 安装插件vue-cli
npm install -g @vue/cli
  • 命令行创建 Vue 项目
vue create vue-project(项目名称)
  • 图形化界面创建 VUe 项目
vue ui
  • 图形化界面如下:
1697035816690-2023-10-1122:50:17.png

选择功能:

第一步:创建项目名称,选择包管理器

第二步:手动配置

第三步:勾选router(路由功能)

第四步:选择 vue2.0(企业主流),默认第一个语法检查

注意:
CMD程序要普通用户开启,不然资源管理器加载龟速!

2. Vue项目目录结构

  • vue项目的标准目录结构以及目录对应的解释:

1 - vue项目目录-2023-10-1123:26:33.png

  • 修改 vue 端口号
// 修改vue.config.js文件的内容
devServer:{port:7000
}

3. vue项目开发

  • 项目框架:
<template><div id="app">{{message}}</div>
</template><script>
export default {data(){return {"message":"hello world"}}
}
</script><style></style>

相关文章:

前端 | 前端工程化

文章目录 前端工程化1. Vue项目创建2. Vue项目目录结构3. vue项目开发 前端工程化 1. Vue项目创建 安装插件vue-cli npm install -g vue/cli命令行创建 Vue 项目 vue create vue-project(项目名称)图形化界面创建 VUe 项目 vue ui图形化界面如下&#xff1a; 选择功能&…...

学信息系统项目管理师第4版系列24_整合管理

1. PMBOK 1.1. 自1987年以来&#xff0c;PMBOK-直是基于过程的项目管理标准的重要代表 1.1.1. 基于过程的方法是项目管理的基石 1.2. 从2021年开始&#xff0c;第7版PMBOK采用了基于原则的标准&#xff0c;其中包含了 12个项目管理基本原则&#xff0c;这些基本原则为有效的…...

轻量级虚拟化技术草稿

Support Tech ST.1 virtiofs ST.1.1 fuse framework 引用wiki中关于fuse的定义&#xff1a; Filesystem in Userspace (FUSE) is a software interface for Unix and Unix-like computer operating systems that lets non-privileged users create their own file systems w…...

bootz启动 Linux内核过程中涉及的 do_bootm_states 函数

一. bootz启动Linux uboot 启动Linux内核使用bootz命令。当然还有其它的启动命令&#xff0c;例如&#xff0c;bootm命令等等。 本文只分析 bootz命令启动 Linux内核的过程中涉及的几个重要函数。具体分析 do_bootm_states 函数执行过程。 本文继上一篇文章&#xff0c;地址…...

springcloud学习笔记(3)-服务管理组件Nacos

Nacos简介 在2中学习了服务治理中心eureka&#xff0c;而本节的nacos来自springcloud alibaba。 Nacos也是一个服务注册和管理的组件。 Nacos 支持几乎所有主流类型的“服务”的发现、配置和管理 官方文档 快速开始 | Spring Cloud Alibaba (aliyun.com) 概述 | Spring C…...

Insight h2database 更新、读写锁以及事务原理

文章基于 RegularTable 来分析和拆解更新操作。 锁模型比较简单&#xff0c;方便了解更新的整个流程。并发读写的实现在 MVStore 存储引擎中分析。 主要关注数据更新的实现、事务的提交和回滚。 相关概念 讨论更新操作&#xff0c;就需要涉及到事务隔离级别以及事务的概念。 也…...

skywalking动态配置[集成nacos/apollo/consul]

说明:以下配置仅关于的阈值规则的动态配置,其他参数也可以进行配置。 1,skywalking动态配置集成nacos 编辑application.yml nacos配置参数如下: nacos:# Nacos Server HostserverAddr: 10.10.5.145# Nacos Server Portport: 8848# Nacos Configuration Groupgroup: skywal…...

UniApp创建项目HelloWorld

浏览器预览效果镇楼 普通项目创建 点击创建完成后&#xff0c;就如下所示 确实和微信小程序开发差不多。只是稍微换了一个名字的概念了&#xff0c;这个就是开发嘛&#xff0c;不要过于纠结概念性东西。开发开发&#xff0c;开了就知道怎么发了&#xff1f; 或许是 反正write就…...

Qt/C++原创推流工具/支持多种流媒体服务/ZLMediaKit/srs/mediamtx等

一、前言 1.1 功能特点 支持各种本地视频文件和网络视频文件。支持各种网络视频流&#xff0c;网络摄像头&#xff0c;协议包括rtsp、rtmp、http。支持将本地摄像头设备推流&#xff0c;可指定分辨率和帧率等。支持将本地桌面推流&#xff0c;可指定屏幕区域和帧率等。自动启…...

学习黑马程序员JavaScript总结

今天注意学习了数据类型、运算符、常量、数组&#xff0c;这些内容接受的还是比较快的&#xff0c;因为前面学过C语言还有Python&#xff0c;比较不同的地方就是未定义类型undefined&#xff0c;这个类型是在只声明了变量但未赋值&#xff0c;而unll空类型它是赋了值但该值是空…...

浅谈高速公路服务区分布式光伏并网发电

前言 今年的国家经济工作会议提出&#xff1a;将“做好碳达峰、碳中和工作”作为 2021年的主要任务之一&#xff0c;而我国高速公路里程 15.5万公里&#xff0c;对能源的需求与日俱增&#xff0c;碳排放量增速明显。 为了实现采用减少碳排放量&#xff0c;采用清洁能源替代的…...

MATLAB算法实战应用案例精讲-【图像处理】机器视觉(番外篇)

目录 前言 算法原理 机器视觉检测系统工作原理 机器视觉光源分类...

塑胶材料检测对激光焊机的作用

塑胶材料的激光焊接已经普遍用于各种零配件&#xff0c;而塑料的透光率是焊接工艺质量的一个重要指标。针对这类塑胶材料推出这款专门检测塑胶材料近红外透光率特性的透光率检测仪&#xff0c;对注塑件的透光率进行全画面扫描。 全球工业致力于贯彻绿色环保、节能减排发展理念&…...

将Eureka服务注册到Eureka中心

1、在微服务的pom.xml引入依赖文件中 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId> </dependency>2、在微服务的application.yml配置文件中加上…...

将网站域名访问从http升级到https(腾讯云/阿里云)

文章目录 1.前提说明2.服务器安装 docker 与 nginx2.1 安装 docker&#x1f340; 基于 centos 的安装&#x1f340; 基于ubuntu 2.2 配置阿里云国内加速器&#x1f340; 找到相应页面&#x1f340; 创建 docker 目录&#x1f340; 创建 daemon.json 文件&#x1f340; 重新加载…...

QT通过TCP协议发送结构体数据

QT通过TCP协议发送结构体数据 Chapter1 QT通过TCP协议发送结构体数据前言1. memcpy方式1.1 发送整个结构体1.2 发送部分数据 2. QDataStream2.1 符号<<2.2 wrieteRawData 总结 Chapter2 qt中操作json&#xff0c;读取json&#xff0c;写入json&#xff0c;转换json一、说…...

C++标准库之numeric

文章目录 一. numeric库介绍二.详解accumulate1. 计算数组中所有元素的和2. 计算数组中所有元素的乘积3. 计算数组中每个元素乘以3之后的和4.计算数组中每个元素减去3之后的和5.计算班级内学生的平均分6.拼接字符串 adjacent_differenceinner_productpartial_sumiota 三. 参考 …...

第六章:最新版零基础学习 PYTHON 教程—Python 正则表达式(第二节 - Python 中的正则表达式与示例套装)

正则表达式 (RegEx)是一种特殊的字符序列,它使用搜索模式来查找字符串或字符串集。它可以通过将文本与特定模式进行匹配来检测文本是否存在,并且还可以将模式拆分为一个或多个子模式。Python 提供了一个re模块,支持在 Python 中使用正则表达式。它的主要功能是提供搜索,其中…...

【Python】WebUI自动化—Selenium的下载和安装、基本用法、项目实战(16)

文章目录 一.介绍二.下载安装selenium三.安装浏览器驱动四.QuickStart—自动访问百度五.Selenium基本用法1.定位节点1.1.单个元素定位1.2.多个元素定位 2.控制浏览器2.1.设置浏览器窗口大小、位置2.2.浏览器前进、刷新、后退、关闭3.3.等待3.4.Frame3.5.多窗口3.6.元素定位不到…...

c++视觉处理---图像重映射

图像重映射&#xff1a;cv::remap cv::remap 是OpenCV中的一个函数&#xff0c;用于执行图像重映射&#xff0c;允许您通过重新映射像素的位置来变换图像。这个函数非常有用&#xff0c;可以用于各种图像处理任务&#xff0c;如校正畸变、透视变换、几何变换等。 下面是 cv::…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...