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

序章 熟悉战场篇—了解vue的基本操作

了解vue 的基本目录:

  • dist 是打包后存放的目录(打包目录后续可以改)
  • node_modules 是依赖包
  • public 是静态index页面
  • src 是存放文件的目录
  • assets 是存放静态资源的目录
  • components 是存放组件的目录
  • views 是存放页面文件的目录(没有views 自己新建一个)
  • App 是页面首加载文件(可以处理一些逻辑)
  • main.js 入口文件,全局的配置js
  • vue.config.js 是一个可选的配置文件,可对vue-cli(webpack)自定义配置。(没有自己建一个)

其他的自行理解

首先我们可能需要修改vue 的默认配置项

比如我们需要关闭eslint,就是语法报错提示,这个在运行的时候会报错就很烦,可以使用vue ui 或者在配置里直接修改

使用vue ui关闭:

在命令行中运行: vue ui 会自动打开一个配置项页面

如下图:

Plugins是可以安装哪些插件包

Dependencies是开发环境的依赖包

Configuration 是配置项

我们点击 Configuration :

选择这个选项,把开关关闭,再点击保存即可

注意:使用vue ui关闭没效果的话直接在vue.config.js里关闭

在vue.config.js里关闭:

module.exports = {// 关闭eslint语法验证lintOnSave: false,devServer: {// 关闭eslint语法验证overlay: {warning: false,errors: false,},},
};

保存后再重新运行项目就行了

现在试着自己写一个页面当作首页:

在views下面建一个Home目录,在Home目录下再建一个Home.vue文件

注意:这里的Home文件命名要进行驼峰命名法,规范开发最为重要,要养成这个习惯

Home.vue

<template><div class="content"><h1>{{message}}</h1></div>
</template><script>
/*
结构介绍template 是html层,相当于html下的body专门写标签的script 是逻辑层style 是样式层,其中scoped是表示样式只在本页面下生效*/
export default {//存放变量属性,放在变量可以动态变化data() {return {message: '我是Home页面',}},// ------生命周期介绍 start------//页面销毁前beforeDestroy() {console.log('页面销毁前')},//页面销毁后destroyed() {console.log('页面销毁后')},//页面创建前beforeCreate() {console.log('页面创建前')},//页面创建后created() {console.log('页面创建后')},//页面dom挂载前beforeMount() {console.log('页面dom挂载前')},//页面dom挂载后mounted() {console.log('页面dom挂载后')},//页面数据更新前beforeUpdate() {console.log('页面数据更新前')},//页面数据更新后updated() {console.log('页面数据更新后')},// ------生命周期介绍 end------//方法写在这里methods: {methodName() {},},//注册组件components: {},//计算属性函数computed: {property() {return this.property},},//监听属性函数watch: {propertyName(newValue, oldValue) {},},//接收父组件传的值props: {},
}
</script><style scoped>
</style>

在app.vue下引入Home页面

<template><div id="app"><!-- 组件形式可不写闭合标签 --><home /> </div>
</template><script>
import Home from '@/views/Home/Home'//引入页面export default {name: 'App',components: {//注册为组件Home}
}
</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>

保存后会自动刷新页面,效果图:

下一篇 基础篇 vue模板语法

一、基础篇 vue模板语法icon-default.png?t=N7T8https://blog.csdn.net/qq_45963071/article/details/135595862

后续会持续更新😁......

相关文章:

序章 熟悉战场篇—了解vue的基本操作

了解vue 的基本目录&#xff1a; dist 是打包后存放的目录(打包目录后续可以改)node_modules 是依赖包public 是静态index页面src 是存放文件的目录assets 是存放静态资源的目录components 是存放组件的目录views 是存放页面文件的目录&#xff08;没有views 自己新建一个&…...

MongoDB聚合:$bucketAuto

按照指定的表达式对输入文档进行分类后放入指定数字的桶中&#xff0c;跟$bucket不太一样&#xff0c;$bucketAuto可以指定分组的数量&#xff08;颗粒度&#xff09;&#xff0c;$bucketAuto会根据groupBy的值和颗粒度自动生成桶的边界。 语法 {$bucketAuto: {groupBy: <…...

认识监控系统zabbix

利用一个优秀的监控软件&#xff0c;我们可以: ●通过一个友好的界面进行浏览整个网站所有的服务器状态 ●可以在 Web 前端方便的查看监控数据 ●可以回溯寻找事故发生时系统的问题和报警情况 了解zabbix zabbix是什么&#xff1f; ●zabbix 是一个基于 Web 界面的提供分布…...

东北编程语言???

在GitHub闲逛&#xff0c;偶然发现了东北编程语言&#xff1a; 东北编程语言是由Zhanyong Wan创造的&#xff0c;它使用东北方言词汇作为基本关键字。这种编程语言的特点是简单易懂&#xff0c;适合小学文化程度的人学习&#xff0c;并且易于阅读、编写和记忆。它的语法与其他编…...

React16源码: React中的schedule调度整体流程

schedule调度的整体流程 React Fiber Scheduler 是 react16 最核心的一部分&#xff0c;这块在 react-reconciler 这个包中这个包的核心是 fiber reconciler&#xff0c;也即是 fiber 结构fiber 的结构帮助我们把react整个树的应用&#xff0c;更新的流程&#xff0c;能够拆成…...

springboot mybatis-plus swing实现报警监听

通过声音控制报警器&#xff0c;实现声光报警&#xff0c;使用beautyeye_lnf.jar美化界面如下 EnableTransactionManagement(proxyTargetClass true) SpringBootApplication EnableScheduling public class AlarmWarnApplication {public static void main(String[] args) …...

【计算机网络】网络层——详解IP协议

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】 本专栏旨在分享学习计算机网络的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 &#x1f431;一、I…...

【Java数据结构】03-二叉树,树和森林

4 二叉树、树和森林 重点章节&#xff0c;在选择&#xff0c;填空&#xff0c;综合中都有考察到。 4.1 掌握二叉树、树和森林的定义以及它们之间的异同点 1. 二叉树&#xff08;Binary Tree&#xff09; 定义&#xff1a; 二叉树是一种特殊的树结构&#xff0c;其中每个节点…...

Element UI Input组件内容格式化:换行时行首添加圆点

<el-input v-model"input"placeholder"请输入"type"textarea":rows"8"focus"handleFocus"input.native"handleInput" /> 解释一下&#xff1a; Element UI对 input 事件做了一层包装&#xff0c;无法返回…...

十、Qt 操作PDF文件

《一、QT的前世今生》 《二、QT下载、安装及问题解决(windows系统)》《三、Qt Creator使用》 ​​​ 《四、Qt 的第一个demo-CSDN博客》 《五、带登录窗体的demo》 《六、新建窗体时&#xff0c;几种窗体的区别》 《七、Qt 信号和槽》 《八、Qt C 毕业设计》 《九、Qt …...

开源软件合规风险与开源协议的法律效力

更多内容&#xff1a;​​​​​​OWASP TOP 10 之敏感数据泄露 OWASP TOP 10 之失效的访问控制 ​​​​​​OWASP TOP 10 之失效的身份认证 一、开源软件主要合规风险 1、版权侵权风险 没有履行开源许可证规定的协议导致的版权侵权&#xff0c;例如没有按照许可要求的保留…...

2024全新开发API接口调用管理系统网站源码 附教程

2024全新开发API接口调用管理系统网站源码 附教程 用layui框架写的 个人感觉很简洁 方便使用和二次开发...

[Linux 进程(四)] 再谈环境变量,程序地址空间初识

文章目录 1、前言2、环境变量2.1 main函数第三个参数 -- 环境参数表2.2 本地环境变量和env中的环境变量2.3 配置文件与环境变量的全局性2.4 内建命令与常规命令2.5 环境变量相关的命令 3、程序地址空间 1、前言 上一篇我们讲了环境变量&#xff0c;如果有不明白的先读一下上一…...

【C++】STL(标准模板库)

文章目录 1. 基本概念2. 容器2.1. 容器的分类2.2. vector2.2.1. 构造vector对象2.2.2. vector的赋值 1. 基本概念 STL&#xff08;Standard Template Library&#xff0c;标准模板库)是惠普实验室开发的一系列软件的统称&#xff0c;现在已经成为C标准库的重要组成部分。STL的…...

【已解决】fatal: Authentication failed for ‘https://github.com/.../‘

文章目录 异常原因解决方法 异常原因 在 Linux 服务器上使用git push命令&#xff0c;输入用户名和密码之后&#xff0c;总会显示一个报错&#xff1a; fatal: Authentication failed for https://github.com/TianJiaQi-Code/Linux.git/ # 致命&#xff1a;无法通过验证访问起…...

SqlAlchemy使用教程(二) 入门示例及编程步骤

SqlAlchemy使用教程(一) 原理与环境搭建SqlAlchemy使用教程(三) CoreAPI访问与操作数据库详解 二、入门示例与基本编程步骤 在第一章中提到&#xff0c;Sqlalchemy提供了两套方法来访问数据库&#xff0c;由于Sqlalchemy 官方文档结构有些乱&#xff0c;对于ORM的使用步骤的描…...

HTML+JS+CSS移动端购物车选购界面

代码打包资源下载&#xff1a;【免费】HTMLJSCSS移动端购物车选购界面资源-CSDN文库 关键部分说明&#xff1a; UIGoods 类&#xff1a; 构造函数&#xff1a; 创建 UIGoods 实例时&#xff0c;传入商品数据 g&#xff0c;初始化商品的数据和选择数量。getTotalPrice() 方法…...

微服务治理:为什么要分析微服务的依赖关系?

在微服务架构中&#xff0c;单个服务相互协作以交付功能。这些协作会在服务之间形成依赖关系&#xff0c;其中一个服务依靠另一个服务来完成自己的任务。虽然依赖关系使功能得以实现&#xff0c;但不受控制的依赖关系可能会导致一系列挑战&#xff1a; 复杂性: 错综复杂的依赖…...

【程序员的自我修养—系统调用与API】

系统调用 背景&#xff1a; 为了避免有限的系统资源被多个不同的应用程序同时访问&#xff0c;需要加以保护&#xff0c;避免冲突&#xff1b;提供一套统一的接口&#xff0c;是应用程序能做一些由操作系统支持的行为&#xff1b;接口通过中断的方式实现&#xff0c;Linux使用…...

使用宝塔面板部署后端项目到服务器

文章目录 前言第一步&#xff1a;安装数据库第二步&#xff1a;打包后端项目第三步&#xff1a;配置数据库第四步&#xff1a;部署后端项目第五步&#xff1a;前后端联调测试总结 前言 在之前我已经写了一篇如何去部署前端项目&#xff0c;虽然能访问网站&#xff0c;但是没有…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

tauri项目,如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...