Web-Vue

概述

Vue 是一个现代 JavaScript 框架，提供了有用的设施渐进增强——不像许多其他框架，你可以使用 Vue 增强现有的 HTML。这使你可以使用 Vue 作为 jQuery 等库的直接替代品。

安装 Vue

要在现有站点中使用 Vue，可以通过 

生产环境版本，优化了尺寸和速度，建议你在站点上包含 Vue 时指定版本号，这样任何框架更新都不会影响你的网站。

为了使使用 Vue 构建应用程序更容易，有一个 CLI 来简化开发过程。要使用 npm 软件包和 CLI，你需要：

1. 安装 Node.js 8.11 及以上的版本。
2. npm 或 yarn。

安装 CLI，终端中运行以下命令：

npm install --global @vue/cli

如果你使用 yarn:

yarn global add @vue/cli

安装之后，要初始化一个新项目，可以在要创建项目的目录中打开一个终端，并运行 vue create 。

 初始化一个新项目

在终端，用 cd 命令进入你想要创建示例的文件夹，然后执行 vue create moz-todo-vue。你可以选择默认选项 Default ([Vue 3] babel, eslint) 然后按下键盘上的 Enter 继续。CLI 现在将开始构建你的项目，并安装所有依赖项。

然后脚手架工具就开始构建项目，并且安装所需的依赖。

如果你以前从未运行过 Vue CLI，则会再有一个问题——你将被要求选择一个包管理器，它默认为 yarn。从现在开始，Vue CLI 将默认使用此包管理器。如果你此后需要使用不同的包管理器，则可以在运行 vue create 时传入参数 --packageManager=。因此，如果你想要使用 npm 创建 moz-todo-vue 项目，并且之前选择了 yarn，则应运行 vue create moz-todo-vue --packageManager=npm。

项目结构

• package.json：该文件包含项目的依赖项列表，以及一些元数据和 eslint 配置。
• yarn.lock：如果你选择 yarn 作为你的包管理器，将生成此文件，其中包含项目所需的所有依赖项和子依赖项的列表。
• babel.config.js：这个是 Babel 的配置文件，可以在开发中使用 JavaScript 的新特性，并且将其转换为在生产环境中可以跨浏览器运行的旧语法代码。你也可以在这个里配置额外的 babel 插件。
• jsconfig.json：这是一份用于 Visual Studio Code 的配置文件，它为 VS Code 提供了关于项目结构的上下文信息，并帮助自动完成。
• public：这个目录包含一些在 Webpack 编译过程中没有加工处理过的文件（有一个例外：index.html 会有一些处理）。
  • favicon.ico：这个是项目的图标，当前就是一个 Vue 的 logo。
  • index.html：这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，也可以通过 lodash 这种模板语法在这个文件里插值
• src：这个是 Vue 应用的核心代码目录
  • main.js：这是应用的入口文件。目前它会初始化 Vue 应用并且制定将应用挂载到 index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。
  • App.vue：这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。
  • components：这是用来存放自定义组件的目录，目前里面会有一个示例组件。
  • assets：这个目录用来存放像 CSS、图片这种静态资源，但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。

.vue 文件（单文件组件）

就像很多其他的前端框架一样，组件是构建 Vue 应用中非常重要的一部分。组件可以把一个很大的应用程序拆分为独立创建和管理的不相关区块，然后彼此按需传递数据，这些小的代码块可以方便更容易的理解和测试。

在其他框架都鼓励把模板、逻辑和样式的代码区分成不同文件的时候，Vue 却反其道行之。使用单文件组件，Vue 把模板、相关脚本和 CSS 一起整合放在 .vue 结尾的一个单文件中。这些文件最终会通过 JS 打包工具（例如 Webpack）处理，这意味着你可以使用构建时工具。你可以使用比如 Babel、TypeScript、SCSS 等来创建更多复杂的组件。

另外，使用 Vue CLI 创建的项目被配置为在开箱即用的情况下借助 Webpack 使用 .vue文件。实际上，如果你查看我们使用 CLI 创建的项目中的 src 文件夹，你会看到第一个.vue 文件：App.vue。

App.vue

打开 App.vue 文件，可以看到由