开始使用 Vue

Vue 是一个用于构建用户界面的渐进式框架

构建用户界面：基于数据动态渲染页面

① Vue 核心包开发

场景：局部模块改造

② Vue 核心包 & Vue 插件工程化开发

场景：整站开发

Vue 简介

Vue 是一个现代 JavaScript 框架提供了有用的设施渐进增强——不像许多其他框架，你可以使用 Vue 增强现有的 HTML。

话虽如此，你也可以使用 Vue 编写完整的单页应用程序（SPA）。这允许你创建完全由 Vue 管理的标记，当处理复杂应用程序时可以提高开发人员的体验和性能。它还允许你在需要时利用用于客户端路由和状态管理的库。

除了允许你逐步将 Vue 集成到你的应用程序中，Vue 还提供了一种渐进的方式编写标记。像大多数框架，Vue 通过组件允许你创建可重用块标记。大多数时候，Vue 组件是使用一个特殊的 HTML 模板的语法写的。

安装Vue

要在现有站点中使用 Vue，可以通过<script> 元素在页面中使用。这使你可以开始在现有站点上使用 Vue，这就是 Vue 引以为傲的渐进式框架的原因。通过这种方法，你可以使用 Vue 的许多核心功能，例如属性、自定义组件和数据管理。

开发环境版本，包含了有帮助的命令行警告

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

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

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

然而，这种方法有一些局限性。要构建更复杂的应用程序，你需要使用 Vue NPM package。这将允许你使用 Vue 的高级功能并利用 WebPack 等捆绑包。为了使使用 Vue 构建应用程序更容易，有一个 CLI 来简化开发过程。要使用 npm 软件包和 CLI:

1、安装Node.js 8.11及以上的版本

2、npm或yarn

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

npm：

npm install --global @vue/cli

yarn：

yarn global add @vue/cli

初始化一个新项目

为了探索 Vue 中各种各样的特征，我们将建立一个简单的任务清单应用。我们将会使用 Vue 脚手架工具去创建一个新的应用框架并在上面搭建我们的应用。

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

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

如果你以前从未运行过 Vue CLI，则会再有一个问题——你将被要求选择一个包管理器，它默认为 yarn。从现在开始，Vue CLI 将默认使用此包管理器。如果你此后需要使用不同的包管理器，则可以在运行 vue create 时传入参数 --packageManager=<package-manager>。因此，如果你想要使用 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。