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

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

news 2025/9/16 0:51:35

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

接口测试中缓存处理策略

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

编程新知 2025/9/15 0:18:50

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/9/7 12:10:26

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/8/6 0:12:05

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/8/26 5:10:22

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/9/13 17:42:33

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/8/28 22:40:10

深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

编程新知 2025/8/6 9:00:09

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...

编程新知 2025/9/9 10:07:00