学习vue第一天

文章目录

[1.什么是 Vue?](#1.什么是 Vue?)
2.渐进式框架
3.如何新建一个vue项目

1.什么是 Vue?

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

下面是一个最基本的示例：

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命令行工具）来创建项目的步骤：

安装Vue CLI :

如果你还没有安装Vue CLI，可以通过npm（Node Package Manager）来安装它。打开终端或命令提示符，并运行以下命令：
sh 复制代码
```
npm install -g @vue/cli
```
创建项目 :

安装Vue CLI后，你可以使用它来创建一个新的Vue项目。在终端中运行以下命令：
sh 复制代码
```
vue create my-vue-app
```
将my-vue-app替换为你的项目名称。
选择项目设置 :

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

根据你的选择，CLI会自动为你的项目安装所需的依赖。
进入项目目录 :

创建项目后，使用以下命令进入项目目录：
sh 复制代码
```
cd my-vue-app
```
运行项目 :

在项目目录中，可以通过以下命令来启动开发服务器：
sh 复制代码
```
npm run serve
```
这将启动Vue项目，并在浏览器中打开它。
开发你的应用 :

现在你可以开始编写代码，开发你的Vue应用了。

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

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