Vue第一天（了解）

is：是一套用于构建用户界面的渐进式框架

npm和node关系

NPM作为node.js的包管理系统

框架：

Vue是框架，它的架构是MVVM模式

MVVM：模型（M）视图（V）和VM（将DOM操作完全封装，开发人员不需要管Model和view之间的影响）----->只要Model发生了改变，View上自然就会表现；当用户修改View，Model中的数据也会跟着改变

项目结构：

package.json：项目的依赖项列表，元数据和eslint配置（是一个用于检测和纠正 JavaScript 代码中潜在问题的工具）

babel.config.js：这个是 Babel 的配置文件，Babel 是一个 JavaScript 编译器，用于将使用了最新 ECMAScript 版本（如 ES6/ES2015、ES7/ES2016 等）的代码转换为向下兼容的旧版本 JavaScript 代码。

jsconfig.json：是用于配置 JavaScript 项目的文件，通常用于 Visual Studio Code 编辑器。它提供了关于项目结构的上下文信息，帮助编辑器理解项目中的 JavaScript 文件、模块和依赖关系，从而提供更好的代码补全、导航和代码分析功能。

public：在一个 Webpack 项目中，通常会有一个名为 public 的目录，用于存放一些不需要经过 Webpack 编译处理的静态文件。这些文件包括但不限于图片、字体、样式表等，它们不需要被转换、压缩或打包，直接被引用即可。这样做的目的是为了提高构建性能，避免对不需要处理的文件进行额外的编译和转换，节省构建时间。

index.html：这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。

src：这个是 Vue 应用的核心代码目录{
main.js：这是应用的入口文件。目前它会初始化 Vue 应用并且制定将应用挂载到 index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。
App.vue：这是 Vue 应用的根节点组件。
components：这是用来存放自定义组件的目录，目前里面会有一个示例组件。
assets：这个目录用来存放像 CSS、图片这种静态资源，但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。}

根据创建项目时候的一些配置项，可能会有一些其他的预设目录（例如，如果你选择了路由配置，会看到一个 views 的文件夹）

.vue文件：Vue 把模板、相关脚本和 CSS 一起整合放在 .vue 结尾的一个单文件中。这些文件最终会通过 JS 打包工具（例如 Webpack）处理（优势：组件化开发：单文件组件将一个组件的所有相关内容放在一个文件中，有利于组件的独立开发、维护和复用。代码分离：虽然在单文件中整合了模板、脚本和样式，但实际上它们在开发过程中是分离的，只是在构建时被整合到一起。构建时工具支持：单文件组件可以通过构建工具（如 Webpack）进行处理和打包，可以使用一些工具和插件来处理模板、脚本和样式，比如 Babel、TypeScript、SCSS 等，从而创建更复杂、功能更强大的组件。）

App.vue：打开 App.vue 文件，可以看到由 <template>、<script> 和 <style> 三部分组成，分别包含了组件的模板、脚本和样式相关的内容。所有的单文件组件都是这种类似的基本结构。

<template> 包含了所有的标记结构和组件的展示逻辑。template 可以包含任何合法的 HTML，以及一些 Vue 特定的语法。

<script> 包含组件中所有的非显示逻辑，最重要的是，<script> 标签需要默认导出一个 JS 对象。该对象是你在本地注册组件、定义属性、处理本地状态、定义方法等的地方。在构建阶段这个包含 template 模板的对象会被处理和转换成为一个有 render() 函数的 Vue 组件。

对于 App.vue，我们的默认导出将组件的名称设置为 App ，并通过将 HelloWorld 组件添加到 components 属性中来注册它。以这种方式注册组件时，就是在本地注册。本地注册的组件只能在注册它们的组件内部使用，因此你需要将其导入并注册到使用它们的每个组件文件中。这对于拆包/摇树优化（tree shaking）很有用，因为并不是应用程序中的每个页面都不一定需要每个组件