首页 > 其他分享 >学习vue第一天

学习vue第一天

时间:2024-07-24 20:26:38浏览次数:13  
标签:HTML vue CLI 第一天 项目 JavaScript 学习 Vue

文章目录

1.什么是 Vue?

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
下面是一个最基本的示例:

<template>  
  <div id="app">  
    <button @click="count++">  
      Count is: {{ count }}  
    </button>  
  </div>  
</template>  
<script>  
export default {  
  data(){  
    return{  
      count:0  
    }  
  }  
}  
</script>

上面的示例展示了 Vue 的两个核心功能:

  • 声明式渲染:Vue 基于标准 HTML 拓展了一套模板语法,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  • 响应性:Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
    你可能已经有了些疑问——先别急,在后续的文档中我们会详细介绍每一个细节。现在,请继续看下去,以确保你对 Vue 作为一个框架到底提供了什么有一个宏观的了解。

2.渐进式框架

Vue 是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点,Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景,你可以用不同的方式使用 Vue:

  • 无需构建步骤,渐进式增强静态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 静态站点生成 (SSG)
  • 开发桌面端、移动端、WebGL,甚至是命令行终端中的界面
    如果你是初学者,可能会觉得这些概念有些复杂。别担心!理解教程和指南的内容只需要具备基础的 HTML 和 JavaScript 知识。即使你不是这些方面的专家,也能够跟得上。
    无论再怎么灵活,Vue 的核心知识在所有这些用例中都是通用的。即使你现在只是一个初学者,随着你的不断成长,到未来有能力实现更复杂的项目时,这一路上获得的知识依然会适用。如果你已经是一个老手,你可以根据实际场景来选择使用 Vue 的最佳方式,在各种场景下都可以保持同样的开发效率。这就是为什么我们将 Vue 称为“渐进式框架”:它是一个可以与你共同成长、适应你不同需求的框架。

3.如何新建一个vue项目

创建一个新的Vue项目是一个相对简单的过程,以下是使用Vue CLI(Vue命令行工具)来创建项目的步骤:

  1. 安装Vue CLI:
    如果你还没有安装Vue CLI,可以通过npm(Node Package Manager)来安装它。打开终端或命令提示符,并运行以下命令:

    npm install -g @vue/cli
    
  2. 创建项目:
    安装Vue CLI后,你可以使用它来创建一个新的Vue项目。在终端中运行以下命令:

    vue create my-vue-app
    

    my-vue-app替换为你的项目名称。

  3. 选择项目设置:
    命令执行后,CLI会询问你一些关于项目设置的问题,比如是否使用历史模式、选择预设配置等。你可以根据需要选择。

  4. 等待安装依赖:
    根据你的选择,CLI会自动为你的项目安装所需的依赖。

  5. 进入项目目录:
    创建项目后,使用以下命令进入项目目录:

    cd my-vue-app
    
  6. 运行项目:
    在项目目录中,可以通过以下命令来启动开发服务器:

    npm run serve
    

    这将启动Vue项目,并在浏览器中打开它。

  7. 开发你的应用:
    现在你可以开始编写代码,开发你的Vue应用了。

如果你使用的是Yarn作为包管理器,步骤基本相同,只是将npm命令替换为yarn命令。

请注意,Vue CLI会定期更新,所以具体的命令和步骤可能会有所变化。如果你遇到任何问题,可以查看Vue CLI的官方文档或寻求社区的帮助。

标签:HTML,vue,CLI,第一天,项目,JavaScript,学习,Vue
From: https://blog.csdn.net/2303_82176667/article/details/140672587

相关文章

  • Java基础常见面试题学习(上)
    1、JVMvsJDKvsJRE①Java虚拟机(JVM)是运行Java字节码的虚拟机。JVM有针对不同系统的特定实现(Windows,Linux,macOS),目的是使用相同的字节码,它们都会给出相同的结果。字节码和不同系统的JVM实现是Java语言“一次编译,随处可以运行”的关键所在。JVM并不是只有一种!只要满足JVM规范,......
  • 小目标检测:深度学习中的微观挑战
    小目标检测:深度学习中的微观挑战在计算机视觉领域,小目标检测是一个具有挑战性的任务。小目标由于其在图像中占据的像素较少,常常难以被准确识别和定位。这一问题在交通监控、卫星图像分析、医学成像等领域尤为突出。本文将探讨小目标检测面临的主要挑战,并讨论一些流行的解决......
  • 修改el-popover样式不生效问题,vue中element-ui样式修改不生效问题
    修改el-popover样式不生效问题在最近公司写的项目中,使用到了el-popover,但是想要修改弹出层中文本的字体样式,尝试过很多方法之后,发现修改的样式都没有生效,查阅资料发现:el-popover比较特殊,他生成的div不在当前组件之内,甚至不在App.vue组件的div内,他和App.vue组件的div平级,需要设置......
  • Java学习 - Springboot 集成 Security 入门小实例
    前言SpringSecurity是Spring家族中一个强大可定制的身份验证和访问控制框架,和Shiro一样,它们都具有认证、授权、加密等用于权限管理的功能。但相比于Shiro,SpringSecurity的功能无疑更加强大。而且作为Spring家族中的一份子,配合家族中的其它兄弟-SpringBoot、S......
  • 《你敢不学习?》numpy库——细细学<4>
    一、numpy库的一些常用函数1、np.tile(A,reps):        将数组的数据按照行列复制扩展,A为需要复制的数组,rep为:重复次数,可以是整数,表示沿每个维度重复的次数;也可以是元组,每个元素表示对应维度的重复次数。a=np.arange(4)#复制2次np.tile(a,2)#行列复制np.til......
  • 基于CAT的VBM和SBM计算学习笔记(一)VBM
    前言  基于体素的形态学方法(voxel-basedmorphometry,VBM),是大脑结构研究中最常见的指标。我刚开始学习fMRI数据处理时主要都聚焦在功能差异的研究,但接触了一批受外伤的被试,对其脑结构的改变产生兴趣,遂学习之。 VBM用T1计算,稳定性强;覆盖全脑,全面性强;而且其计算软件发......
  • 网络规划设计师-日常学习3-VLAN部分
    VLAN1、定义:VLAN是在交换机或路由器上创建的一组逻辑上分离的网络,即使它们共享相同的物理媒介(例如以太网)。2、工作原理VLAN通过将网络设备按照逻辑需求而不是物理位置来划分,实现逻辑上的隔离和分组。每个VLAN有其自己的广播域,因此广播和多播流量不会跨越VLAN传播,从而减少网......
  • FreeModbus学习——eMBInit初始化
    FreeModbus版本:1.6在mb.c文件中先看一下静态变量的定义/*-----------------------Staticvariables---------------------------------*/staticUCHARucMBAddress;staticeMBModeeMBCurrentMode;ucMBAddress是从机地址,eMBCurrentMode是Modbus的工作模式,如......
  • FreeModbus学习——eMBPoll轮询
    FreeModbus版本:1.6eMBPoll在mb.c文件中eMBPoll函数是一个核心的Modbus协议栈事件处理函数,负责接收和发送帧,处理不同的事件,并根据需要返回错误码。eMBErrorCodeeMBPoll(void){staticUCHAR*ucMBFrame;//接收到的帧数据staticUCHARucRc......
  • kaggle竞赛宝典 | 时序表示学习的综述!
    本文来源公众号“kaggle竞赛宝典”,仅用于学术分享,侵权删,干货满满。原文链接:时序表示学习的综述!1 介绍本文综述了时间序列数据中的通用表示学习方法,提出了一种新颖的分类方法,并讨论了其对提高学习表示质量的影响。文章全面回顾了各种神经网络架构、学习目标和数据相关技术......