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

Vue2之Vue-cli应用及组件基础认识

news 2026/2/7 12:30:31

Vue2之Vue-cli应用及组件基础认识

  • 一、Vue-cli
    • 1、单页面应用程序
    • 2、vue-cli介绍
    • 3、安装和使用
    • 4、创建项目
      • 4.1 输入创建项目
      • 4.2 选择第三项，进行自主配置，按回车键即可
      • 4.3 选择自己需要的库
      • 4.4 选择Vue的版本
      • 4.5 选择CSS选择器
      • 4.6 选择Babel、ESLint、etc等配置文件的存放方式
      • 4.7 保存自己做的所有选择，下次创建项目会自动默认这些选择，而不用重新勾选。
      • 4.8 编写方案名字
      • 4.9 运行后的结果
      • 4.10 启动服务
    • 5、项目目录解读
      • 5.1 node_modules目录
      • 5.2 public目录
      • 5.3 src目录
      • 5.4 .gitignore文件
      • 5.5 babel.config.js文件
      • 5.6 package.json文件
    • 6、vue项目的运行流程
    • 7、$mount()方法
      • 7.1 介绍
      • 7.2 相关代码
  • 二、Vue组件简单应用
    • 1、组件化开发
    • 2、vue中的组件化开发
    • 3、vue组件的三个组成部分
      • 3.1 template
      • 3.2 script
      • 3.3 style
    • 4、vue组件的使用
      • 4.1 介绍
      • 4.2 代码
      • 4.3 结果

一、Vue-cli

1、单页面应用程序

单页面应用程序简称SPA，指的是一个Web网站中只有唯一的一个HTML页面，所有的功能和交互都在这唯一的一个页面内完成。

2、vue-cli介绍

vue-cli是Vue.js开发的标准工具，它简化了程序员基于webpack创建工程化的Vue项目的过程。
中文官网：https://cli.vuejs.org/zh/

3、安装和使用

vue-cli是npm上的一个全局包，使用npm install命令，即可方便地装到自己电脑上。

npm install -g @vue/cli

安装成功后
输入命令，检查是否正常

vue -V

如果是这样就说明成功了
在这里插入图片描述

4、创建项目

4.1 输入创建项目

vue create 自定义的项目名

4.2 选择第三项，进行自主配置，按回车键即可

在这里插入图片描述

4.3 选择自己需要的库

按空格键便可以选择或取消选择
在这里插入图片描述

4.4 选择Vue的版本

按自己的需求选择
在这里插入图片描述

4.5 选择CSS选择器

按自己的需求选择
在这里插入图片描述

4.6 选择Babel、ESLint、etc等配置文件的存放方式

第一项是存档到独立的文件
第二项是存放到package.json里
默认选第一个
在这里插入图片描述

4.7 保存自己做的所有选择，下次创建项目会自动默认这些选择，而不用重新勾选。

如果输入y，则会保存选择。如果输入N，则并不会保存选择，下次又得重新勾选。
在这里插入图片描述

4.8 编写方案名字

在这里插入图片描述

4.9 运行后的结果

如下所示说明成功了
在这里插入图片描述

4.10 启动服务

先进入创建好的项目的目录里

cd 项目名

再开启服务

npm run serve

最后
在这里插入图片描述

复制地址到浏览器
结果如下图，说明启动服务成功
在这里插入图片描述

5、项目目录解读

在这里插入图片描述

5.1 node_modules目录

存放所有的第三方包

5.2 public目录

（1）favicon.ico
网站的图标
在这里插入图片描述

（2）index.html
生成的文件会注入其中

5.3 src目录

项目的源代码目录，所有的代码都在src目录里
（1）assets文件夹
存放项目中用到的静态资源文件，例如：css样式表、图片资源。
（2）components文件夹
存放封装的、可复用的组件
（3）main.js文件
是项目的入口文件。整个项目的运行，要先执行main.js
（4）App.vue文件
项目的根组件

5.4 .gitignore文件

git相关的配置

5.5 babel.config.js文件

babel的配置文件

5.6 package.json文件

包管理配置文件

6、vue项目的运行流程

（1）App.vue用来编写待渲染的模板结构
（2）index.html中需要预留一个el区域
（3）main.js把App.vue渲染到了Index.html所预留的区域中

7、$mount()方法

7.1 介绍

Vue实例的$mount()方法，作用和el属性完全一样。

7.2 相关代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body><div id="app">{{username}}</div><!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// data对象就是要渲染到页面上的数据// 相当于 model层data: {username: 'admin'},})vm.$mount('#app')</script>
</body>
</html>

二、Vue组件简单应用

1、组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。

2、vue中的组件化开发

（1）vue是一个支持组件化开发的前端框架。
（2）vue中规定：组件的后缀名是.vue。也就是说App.vue文件本质上就是一个vue的组件。

3、vue组件的三个组成部分

3.1 template

组件的模板结构

3.2 script

组件的JavaScript行为

3.3 style

组件的样式

4、vue组件的使用

4.1 介绍

主要代码写在template标签下，JavaScript代码则写在script标签下，同时还必须有export default，CSS代码写在style标签下，也必须有lang=“less”。

4.2 代码

<template><div><div class="text-box"><h3>自定义的属性 {{ username }}</h3><button @click="changeName">修改用户名</button></div></div>
</template><script>
// 默认导出，这是固定写法
export default {// data 数据源// 注意：.vue组件中的data不能像之前一样，不能指向对象// 注意：组件中的data必须是一个函数data(){// 这个return出去的{}中，可以定义数据return {username: 'admin'}},methods: {changeName(){console.log(this.username)// 在组件中，this就表示当前组件的实例对象this.username = '张三'}},// 当前组件中的侦听器watch:{},// 当前组件中的计算属性computed:{},// 当前组件中的过滤器filters:{},
};
</script>// CSS渲染
<style lang="less">
.text-box{background-color: aqua;h3{color: red;}
}
</style>

4.3 结果

在这里插入图片描述

相关文章：

Vue2之Vue-cli应用及组件基础认识

Vue2之Vue-cli应用及组件基础认识一、Vue-cli1、单页面应用程序2、vue-cli介绍3、安装和使用4、创建项目4.1 输入创建项目4.2 选择第三项&#xff0c;进行自主配置&#xff0c;按回车键即可4.3 选择自己需要的库4.4 选择Vue的版本4.5 选择CSS选择器4.6 选择Babel、ESLint、etc等…...

编程日记 2023/2/15 15:25:31

C 学习笔记 —— 声明、定义、初始化

文章目录声明定义初始化定义和初始化的区别静态变量初始化自动变量初始化声明 说明符表达式列表 int a; char j, k l;定义 一般的情况下&#xff0c;我们把建立空间的声明称之为定义&#xff0c;而把不需要建立存储空间的声明称之为声明。 int tern 1; //定义int main() {…...

编程日记 2023/2/15 15:24:22

机械狗控制算法

一. MIT Cheetah特点 1.驱动器 Cheetah 2采用了定制的本体感受驱动器设计&#xff0c;具有高冲击缓解、力控制和位置控制能力。这种设计使其能够自主跳过障碍物&#xff0c;并以6m/s的高速跳跃&#xff0c;但其运动范围有限&#xff0c;只能进行矢状面运动。 Cheetah 3采用高扭…...

编程日记 2023/2/15 15:23:17

向量与矩阵 导数和偏导数 特征值与特征向量 概率分布 期望方差 相关系数

文章目录向量与矩阵标量、向量、矩阵、张量向量范数和矩阵的范数导数和偏导数特征值和特征向量概率分布伯努利分布正态分布&#xff08;高斯分布&#xff09;指数分布期望、⽅差、协⽅差、相关系数期望方差协⽅差相关系数向量与矩阵 标量、向量、矩阵、张量 标量&#xff08;…...

编程日记 2023/2/15 15:22:09

记录--前端实现登录拼图验证

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 不知各位朋友现在在web端进行登录的时候有没有注意一个变化&#xff0c;以前登录的时候是直接账号密码通过就可以直接登录&#xff0c;再后来图形验证码&#xff0c;数字结果运算验证&#xff0c…...

编程日记 2023/2/15 15:21:03

【Go语言基础】Go语言中的map集合详细使用(附带源码）

文章目录Go语言中的map集合1-1 定义1-2 map遍历1-3 map集合删除1-4 map是引用类型Go语言中的map集合 Go 语言提供了内置类型 map集合&#xff0c;它将一个值与一个键关联起来&#xff0c;可以使用相应的键检索值。 map是一种集合&#xff0c;可以像遍历数组或切片那样去遍历它…...

编程日记 2023/2/15 15:19:55

C++11 lambda

Lambda 介绍 Lambda 函数也叫匿名函数&#xff0c; 是C 11中新增的特性; 1. Lambda函数的好处 如果你的代码里面存在大量的小函数&#xff0c;而这些函数一般只被调用一次&#xff0c;那么将他们重构成 lambda 表达式。 Lambda函数使代码变得更加紧凑、更加结构化和更富有表现…...

编程日记 2023/2/15 15:18:47

【新】华为OD机试 - 分苹果（Python）

分苹果 题目 AB两个人把苹果分为两堆 A希望按照他的计算规则等分苹果 他的计算规则是按照二级制加法计算 并且不计算进位12+5=9(1100+0101=9), B的计算规则是十进制加法, 包括正常进位,B希望在满足A的情况下获取苹果重量最多 输入苹果的数量和每个苹果重量 输出满足A的情况下…...

编程日记 2023/2/15 15:17:37

Python 模块

Python 模块(Module)&#xff0c;是一个 Python 文件&#xff0c;以 .py 结尾&#xff0c;包含了 Python 对象定义和Python语句。 模块让你能够有逻辑地组织你的 Python 代码段。 把相关的代码分配到一个模块里能让你的代码更好用&#xff0c;更易懂。 模块能定义函数&#…...

编程日记 2023/2/15 15:16:27

gdb调试功能从零到会（Linux详解）

目录 &#x1f440; 1.安装gdb &#x1f440;2.判断是否安装成功 &#x1f440;3.改成debug方式发布。 &#x1f440; 4.gdb功能简介 前言 gdb是Linux 下功能全面的调试工具。gdb支持断点、单步执行、打印变量、观察变量、查看寄存器、查看堆栈等调试手段。在Linux环境软件…...

编程日记 2023/2/15 15:15:18

【C语言学习笔记】：数组、指针相关面试题

无特殊说明情况下&#xff0c;下面所有题s目都是linux下的32位C程序。 「1、计算以下sizeof的值。」 char str1[] {a, b, c, d, e}; char str2[] "abcde";char *ptr "abcde";char book[][80]{"计算机应用基础","C语言","C程…...

编程日记 2023/2/15 15:14:09

go语言环境配置 项目启动

一 安装go语言 go语言各个版本之间兼容性比较差。所以可能你需要安装固定的版本 1 安装最新版的go brew install go2 查看go可以安装的版本 brew search go3 安装指定版本的go brew install go1.134 查看安装的go语言的版本 go version5 查看go的安装路径 which go || w…...

编程日记 2023/2/15 15:11:52

Springboot 使用插件 自动生成Mock单元测试 Squaretest

缘起 很多公司对分支单测覆盖率会有一定的要求&#xff0c;比如 单测覆盖率要达到 60% 或者 80%才可以发布。 有时候工期相对紧张&#xff0c;就优先开发功能&#xff0c;测试功能&#xff0c;然后再去补单元测试。 但是编写单元测试又比较浪费时间&#xff0c;有没有能够很大…...

编程日记 2023/2/15 15:10:44

「JVM 执行引擎」栈架构的字节码的解释执行引擎

JVM 执行引擎在执行 Java 代码时有解释执行&#xff08;通过解释器执行&#xff09;和编译执行&#xff08;通过即时编译器产生本地代码执行&#xff09;两种选择&#xff1b; HotSpot 实际的实现中&#xff0c;模版解释器工作时&#xff0c;并不是按照概念模型中进行机械式计…...

编程日记 2023/2/15 15:09:37

SSM项目-商城后台管理系统

SSM项目-商城后台管理系统开发说明开发环境项目界面演示项目功能具体的技术指标开发过程1、搭建SSM框架1.1、建库建表1.2、新建Maven工程1.3、配置pom.xml1.4、目录结构1.5、jdbc.properties1.6、mybatis-config.xml1.7 两个Spring的配置文件applicationContext_dao.xmlapplica…...

编程日记 2023/2/15 15:08:28

什么是装运单IFTMIN?

符合EDIFACT国际报文标准的IFTMIN主要用于传输电子运输订单&#xff0c;这些装运单作为EDI数据交换的一部分&#xff0c;由客户或托运人发送给物流服务提供商。通过EDI传输的运输信息可以被用来计划当前所需的运输能力&#xff0c;并且物流服务提供商也可以据此提前将包装材料准…...

编程日记 2023/2/15 15:07:18

深度负反馈

负反馈放大电路的方块图因为负反馈放大电路有四种组态&#xff0c;而且对于同一种组态&#xff0c;具体电路也各不相同&#xff1b;所以为了研究负反馈放大电路的共同规律&#xff0c;可以利用方块图来描述所有电路一.负反馈放大电路的方块图表示法任何负反馈放大电路都可以用下…...

编程日记 2023/2/15 15:06:09

【每日随笔】手指训练 ( 产品需求探索、技术无关 | 手指训练作用 | 哪些人需要手指训练 | 手指操 | 手指康复训练器材 )

文章目录一、手指训练作用二、哪些人需要手指训练三、手指操四、手指康复训练器材产品需求探索 , 研究下手指训练的市场 , 前景 , 是否可以开发 ; 一、手指训练作用 手指训练作用 : 改善 上肢协调性手眼 协调性训练提高 手指 抓握 能力提高 手指 灵活性提高 上肢运动 准确性 和…...

编程日记 2023/2/15 15:05:02

Apple Safari 16.3 - macOS 专属免费浏览器 (独立安装包免费下载)

Safari 浏览器 16 for macOS Montery, Big Sur 请访问原文链接&#xff1a;https://sysin.org/blog/apple-safari-16/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;www.sysin.org 之前 Safari 浏览器伴随 macOS 更新一起发布&#xff…...

编程日记 2023/2/15 15:02:45

【java】Spring Boot --Spring Boot 集成 MyBatis

文章目录1. 前言2. 实例场景3. 数据库模块实现4. Spring Boot 后端实现4.1 使用 Spring Initializr 创建项目4.2 引入项目依赖4.3 数据源配置4.4 开发数据对象类4.5 开发数据访问层4.6 添加 MyBatis 映射文件5. 测试6. 小结1. 前言 企业级应用数据持久层框架&#xff0c;最常见…...

编程日记 2023/2/15 15:01:39

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2026/2/1 20:49:03

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2026/2/4 23:29:22

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/12/23 11:20:24

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/1/31 6:09:20

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2026/2/4 17:33:27