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

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

news 2026/3/30 13:23:32

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

手把手教你用Python搭建IPTV直播源管理系统（DIYP影音定制版）

Python实战&#xff1a;构建高可用IPTV直播源管理系统&#xff08;DIYP影音深度集成版&#xff09; 在流媒体技术蓬勃发展的今天&#xff0c;个性化直播解决方案正成为技术爱好者的新宠。本文将带你从零开始&#xff0c;用Python打造一个功能完备的IPTV直播源管理系统&#xf…...

编程新知 2026/3/30 11:07:38

革新性暗黑破坏神2存档管理开源工具：d2s-editor全功能解析

革新性暗黑破坏神2存档管理开源工具&#xff1a;d2s-editor全功能解析 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor 暗黑破坏神2存档修改门槛高&#xff1f;复杂二进制格式难以操作&#xff1f;d2s-editor作为免费开源的Web端…...

编程新知 2026/3/30 9:35:52

Blender3mfFormat插件全攻略：从基础到进阶的3MF文件处理指南

Blender3mfFormat插件全攻略&#xff1a;从基础到进阶的3MF文件处理指南 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 一、基础认知&#xff1a;3MF格式与插件价值解析…...

编程新知 2026/3/30 9:21:50

ThinkPad X1 Tablet Gen3 vs Gen2键盘对比：为何Gen3更适合改装Type-C？

ThinkPad X1 Tablet Gen3键盘Type-C改装全解析&#xff1a;为何它成为DIY玩家的终极选择&#xff1f; 在移动办公设备轻量化与模块化设计成为主流的今天&#xff0c;ThinkPad X1 Tablet系列凭借其独特的二合一形态和标志性键盘手感&#xff0c;始终保持着特殊地位。特别是第三代…...

编程新知 2026/3/30 6:22:50

CMake vs. MsBuild vs. Ninja：C++编译工具链全解析（附Windows平台实战示例）

CMake vs. MsBuild vs. Ninja&#xff1a;C编译工具链全解析&#xff08;附Windows平台实战示例&#xff09; 在C开发的世界里&#xff0c;构建工具的选择往往决定了项目的可维护性和跨平台能力。当你在Windows平台上打开Visual Studio时&#xff0c;背后默默工作的可能是MsBui…...

编程新知 2026/3/30 4:33:47

fre:ac音频转换全攻略：跨平台高效工作流搭建指南

fre:ac音频转换全攻略&#xff1a;跨平台高效工作流搭建指南 【免费下载链接】freac The fre:ac audio converter project 项目地址: https://gitcode.com/gh_mirrors/fr/freac 在数字音频处理领域&#xff0c;开源工具的选择往往决定了工作流的效率与质量。fre:ac作为一…...

编程新知 2026/3/30 4:17:27

Gauge常见问题解决：10个典型错误及修复方法

Gauge常见问题解决&#xff1a;10个典型错误及修复方法 【免费下载链接】gauge Light weight cross-platform test automation 项目地址: https://gitcode.com/gh_mirrors/ga/gauge Gauge作为一款轻量级跨平台测试自动化工具&#xff0c;在使用过程中可能会遇到各种错误…...

编程新知 2026/3/30 3:45:10

OpenClaw技能组合：GLM-4.7-Flash多功能集成方案

OpenClaw技能组合&#xff1a;GLM-4.7-Flash多功能集成方案 1. 为什么需要技能组合&#xff1f; 去年冬天&#xff0c;我接手了一个内容运营的兼职项目&#xff0c;需要每周整理行业动态、生成分析报告并发布到三个不同平台。最初我尝试手动操作&#xff0c;但很快发现这种重…...

编程新知 2026/3/30 2:10:29

如何通过Bilibili-Evolved打造个性化B站体验？解锁高效视频浏览新方式

如何通过Bilibili-Evolved打造个性化B站体验&#xff1f;解锁高效视频浏览新方式 【免费下载链接】Bilibili-Evolved 强大的哔哩哔哩增强脚本 项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved 你是否曾经在B站浏览时遇到这样的困扰&#xff1a;界面广告太…...

编程新知 2026/3/30 1:18:02

韩式健康板供应商筛选：企业采购决策策略深度解析

韩式健康板供应商筛选&#xff1a;企业采购决策6步策略&#xff0c;避开80%行业坑点“韩式健康板供应商筛选不是只看价格&#xff0c;掌握6个关键步骤才能选到靠谱伙伴”——这是行业内资深采购的共识。本文针对企业采购韩式健康板的核心痛点&#xff0c;从需求梳理到持续监控&…...

编程新知 2026/3/30 1:11:57