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

《Vue3实战》 第二章 创建项目和目录结构

1、创建项目

1.1、命令格式:vue create 项目名称

vue create vue3_example001

1.2、运行项目

npm run serve

1.2.1、增加run命令

启动时想修改命令,例如:

npm run dev

1、找到项目根路径下的package.json文件;
2、找到【scripts】数据

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"}

修改后:

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","dev": "vue-cli-service serve"}

1.2.1、修改启动默认端口

总结:优先级:方法一>方法二=方法三>方法四
如果方法二和方法三同时使用,且端口号设置不同,就会报错

1.2.1.1、修改package.json文件

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","dev": "vue-cli-service serve --port 81"}

修改后再次运行项目,端口号就变更为:81

1.2.1.2、修改启动命令

在运行项目时追加端口号

npm run serve -- --port 81

1.2.1.3、修改vue.config.js文件

在根目录下创建vue.config.js文件(和package.json同一目录)

module.exports = {devServer:{port:8090, // 启动端口号open:true  // 启动后是否自动打开网页}
}

2、目录结构

在这里插入图片描述

2.1、 目录说明

目录/文件说明
build项目构建(webpack)相关代码
config配置目录,包括端口号等。我们初学可以使用默认的。
node_modulesnpm 加载的项目依赖模块
src这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: 1、assets: 放置一些图片,如logo等。2、components: 目录里面放了一个组件文件,可以不用。3、App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。 4、main.js: 项目的核心文件。5、index.css: 样式文件。
static静态资源目录,如图片、字体等。
public公共资源目录。
test初始测试目录,可删除
.xxxx文件这些是一些配置文件,包括语法配置,git配置等。
index.html首页入口文件,你可以添加一些 meta 信息或统计代码啥的。package.json
README.md项目的说明文档,markdown 格式
dist使用npm run build命令打包后会生成该目录。

2.2、Vue源码

查看Vue工程下面的src/App.vue

<!--模板展示-->
<template><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/>
</template><!--Vue代码-->
<script>
// 引入组件
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script>
<!--定义样式-->
<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

相关文章:

《Vue3实战》 第二章 创建项目和目录结构

1、创建项目 1.1、命令格式&#xff1a;vue create 项目名称 vue create vue3_example0011.2、运行项目 npm run serve1.2.1、增加run命令 启动时想修改命令&#xff0c;例如&#xff1a; npm run dev1、找到项目根路径下的package.json文件&#xff1b; 2、找到【scripts…...

13433元!上海一季度平均薪酬出炉!你拖后腿了吗?(附招聘岗位)

2023年第一季度智联招聘&#xff0c; 发布《中国企业招聘薪酬报告》&#xff0c; 显示上海平均招聘薪酬为 13433元/月&#xff01;&#xff01;&#xff01; 13433元/月&#xff01;&#xff01;&#xff01; 13433元/月&#xff01;&#xff01;&#xff01; ☟ ☟ ☟ 同…...

leetcode剑指 Offer 16. 数值的整数次方

题目描述解题思路执行结果leetcode .题目描述 实现 pow(x, n) &#xff0c;即计算 x 的 n 次幂函数&#xff08;即&#xff0c;xn&#xff09;。不得使用库函数&#xff0c;同时不需要考虑大数问题。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;1…...

漏洞挖掘相关-信息收集

一、常见端口以及漏洞 1.FTP&#xff1a;文件传输协议 TCP端口20、21&#xff0c;20用于传输数据&#xff0c;21用于传输控制信息 (1) ftp基础爆破: owasp的Bruter,hydra以及msf中的ftp爆破模块。 (2) ftp匿名访问:用户名: anonymous密码:为空或者任意邮箱 (3) vsftpd后门: …...

海外分支如何加速访问国内总部办公系统?海域网发布 Sea-WAN解决方案

近年来&#xff0c;一大批优秀的中国企业走向世界&#xff0c;品牌越来越响亮&#xff0c;海外影响力越来越大&#xff0c;比如名创优品&#xff0c;国货之光“花西子”&#xff0c;安科创新等&#xff0c;很多企业在海外设立分支机构为当地客户服务&#xff0c;与此同时&#…...

js设计模式——责任链模式

一、概述 责任链是一种行为设计模式&#xff0c;它允许将请求沿着处理链传递&#xff0c;直到有一个处理器可以处理该请求。在这种模式中&#xff0c;每个处理器都有机会处理请求&#xff0c;如果没有一个处理器能够处理请求&#xff0c;那么请求最终将被忽略。这种模式可以帮…...

接口组成更新

接口组成更新概述&#xff1a; 接口的组成&#xff1a; 常量 public static final 抽象方法 public abstract 默认方法java8 静态方法java8 私有方法java9 接口中默认方法 接口中默认方法的定义格式&#xff1a; 格式&#xff1a;public default 返回值类型 方法名&#x…...

int(1) 和 int(10)区别

有个表的要加个user_id字段&#xff0c;user_id字段可能很大&#xff0c; alter table xxx ADD user_id int(1)。 int(1)怕是不够用吧&#xff0c;接下来是一通解释。 我们知道在mysql中 int占4个字节&#xff0c;那么对于无符号的int&#xff0c;最大值是2^32-1 4294967295&a…...

华为OD机试-组合出合法最小数-2022Q4 A卷-Py/Java/JS

给一个数组,数组里面都是代表非负整数的字符串,将数组里所有的数值排列组合拼接起来组成一个数字,输出拼成的最小的数字。 输入描述 一个数组,数组不为空,数组里面都是代表非负整数的字符串,可以是0开头,例如:[”13","045","09","56&qu…...

ChatGPT中文在线官网-如何与chat GPT对话

怎么下载ChatGPT中文版 ChatGPT是一种基于Transformer架构的自然语言处理技术&#xff0c;其中包含了多个预训练的中文语言模型。这些中文ChatGPT模型大多数发布在Github上&#xff0c;可以通过Github的源码库来下载并使用&#xff0c;包括以下几种方式&#xff1a; 下载预训练…...

macOS 13.3.1 (22E261)With OpenCore 0.9.2开发版 and winPE双引导分区原版镜像

镜像特点 原文来源于黑果魏叔官网&#xff0c;转载需注明出处。&#xff08;下载请直接百度黑果魏叔&#xff09; 完全由黑果魏叔官方制作&#xff0c;针对各种机型进行默认配置&#xff0c;让黑苹果安装不再困难。系统镜像设置为双引导分区&#xff0c;全面去除clover引导分…...

《iTOP-3568开发板快速测试手册》第7章 Yocto系统外设功能测试(1)

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…...

【周末闲谈】AI的旅途

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️周末闲谈】 系列目录 ✨第一周 二进制VS三进制 ✨第二周 文心一言&#xff0c;模仿还是超越&#xff1f; ✨第二周 畅想AR 文章目录系列目录前言AIAI的开端第一个AI程序AI的寒冬关于AI的思考末尾前言…...

回溯算法--01背包问题

目录 回溯算法--01背包问题 [算法描述] [回溯法基本思想] 法一&#xff1a; 法二&#xff1a; 代码&#xff1a; 运行结果 代码改进 回溯算法--01背包问题 [算法描述] 0-1背包问题是子集选取问题。一般情况下&#xff0c;0-1背包问题是NP完全问题。0-1背包问题的解空…...

Spring MVC请求处理流程分析

Spring MVC请求处理流程分析一 Spring MVC 请求处理流程二 Spring MVC 请求处理流程源码分析2.1架构图解2.2 重要时机点分析2.3核心步骤分析2.3.1 getHandler⽅法剖析2.3.2 getHandlerAdapter⽅法剖析2.3.3 ha.handle⽅法剖析2.3.4 processDispatchResult⽅法剖析三 Spring MVC…...

Python高阶知识之属性管理

本文主要介绍Python高阶知识中的属性管理&#xff0c;这部分知识在常规Python编程中用的很少&#xff0c;但对于想深度了解Python甚至有志于自己编写实用框架的人&#xff0c;还是很有必要的&#xff0c;并且如果掌握了&#xff0c;对日常的代码学习等也会有一定好处。 本文结…...

【Linux】创建目录文件,并完成删除,拷贝,移动,比较等操作

操作前&#xff1a; 1.创建目录 mkdir命令 格式&#xff1a; mkdir 目录名 示例&#xff1a; 点击主文件夹查看 2.创建文件夹 touch命令 格式&#xff1a; touch 文件夹名 示例&#xff1a; 3.重命名文件 mv命令 格式 &#xff1a; mv 123.txt abc.txt 示…...

python http服务搭建教程

作为互联网时代的基础技术之一&#xff0c; HTTP是一个简单的 HTTP协议&#xff0c;它包含了请求、应答和超文本传输控制等机制。HTTP协议由 TCP/IP协议族定义&#xff0c;其中包括了三个基本的服务&#xff1a;发送、接收、存储。客户端和服务器之间传输信息时&#xff0c;数据…...

高速数字信号VS射频信号,到底哪个更难设计?

一博高速先生成员&#xff1a;黄刚熟悉高速先生的小伙伴们会知道&#xff0c;我们是以研究高速数字信号为主的团队&#xff0c;从不到1G到目前在研究的112G&#xff0c;高速先生就这样一直研究过来的&#xff0c;分享的案例也大多是以高速数字信号为主的案例。最近受到我们粉丝…...

相对路径读取json文件 labelme_shapes_to_label 标签

直接读取&#xff1a; import jsonwith open(file.json, r, encodingutf-8) as f:data json.load(f) 忽略错误读取&#xff1a; import jsonimport codecs with codecs.open(file.json, r, encodingutf-8, errorsignore) as f:data json.load(f) labelme_shapes_to_labe…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...