一、前言

说到 Web 前端框架目前市面上比较热门的应该就是 Vue.js 以及 React 了，事实上两者都是在 NPM 以及原生 JavaScript 基础上诞生的产物，在此不得不再次感叹 JavaScript 的强大之处。

最近因为项目需要（闲着无聊）终于开始了拖延已久的前端框架学习，才发现和前段时间接触的微信小程序有着异曲同工之妙，由于难度系数有较大的提升，在此做一下学习笔记。

二、索引

  1. 开发环境搭建
  2. Vue.js 的引入以及简单实例

三、开始

1. 开发环境搭建

① 工具安装

本人使用的工具为微软家的 Visual Studio Code，因基础学习部分尚未涉及 Vue-CLI 所以暂不介绍 NPM 环境的部署过程，可从该 下载链接 获取最新 Stable 版本，直接安装即可使用。

安装完成后为英文版本，很多人可能有中文强迫症（例如我）受不了全英文环境，此时可以通过左侧菜单最后的选项卡进行简体中文插件的安装（搜索 Chinese 就能找到），当然也可以安装其他有便于我们开发的辅助插件，如 Live Server 可用于实时预览修改的网页，Vetur 可用于支持 Vue 语法高亮以及代码补全等等。

下图为本人安装的插件列表：

image-20200221142549.png

② 项目新建

不管是用任何开发环境都必须要有工作空间（Workspace）的概念，在这里也不例外。

在本地磁盘新建 Vue 工作目录并新建我们第一个用于测试的实例项目文件夹 vue-demo：

image-20200221145609.png

接着我们将 vue-demo 文件夹直接拖进 Visual Studio Code 打开，便进入到我们的工作空间。

我们可以通过单击按钮新建文件：

image-20200221145946781.png

命名为 demo.html：

image-20200221150045.png

之后便会自动打开该文件，此时我们可以通过 VS Code 自带的 Emmet 插件来新建 HTML5 文档框架。

输入 html 使用方向键 ↓ 选择 html:5 按并下回车键：

image-20200221150246.png

便会生成以下代码：

image-20200221150301.png

至此我们的第一个项目便新建完成。

2. Vue.js 的引入以及简单实例

① 引入文件

开始前我们需要先引入 Vue.js 官方提供的 vue.js 或 vue.min.js 库文件。

右键该 下载链接 另存至本地即可获取最新开发版本的 vue.js 文件，我们将它放入工作空间新建的 js 文件夹中，并通过下列代码在 head 中进行引入：

<script type="text/javascript" src="js/vue.js"></script>

image-20200221151316.png

② 简单实例

程序猿的第一行代码都从 Hello World! 开始，这里当然也不例外。

我们先在 body 中插入一个新的 div 元素，并命名 id 为 app，内容为 {{msg}}：

    <div id="app">{{msg}}</div>

在 body 结束符前插入 JavaScript 代码，通过新建 Vue 对象，指定 el 为我们上面新增的 #app 元素，并在 data 里添加 msg 对象，内容为 'Hello World!'：

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World!'
            }
        })
    </script>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <!-- Vue 主体对象区域 Start -->
    <div id="app">{{msg}}</div>
    <!-- Vue 主体对象区域 End -->
    
    <!-- Vue 实例代码区域 Start -->
    <script type="text/javascript">
        var app = new Vue({
            el: '#app', //绑定该 Vue 实例对象至元素 #app
            data: {
                msg: 'Hello World!' //定义数据对象 msg 内容为 'Hello World!'
            }
        })
    </script>
    <!-- Vue 实例代码区域 End -->
</body>
</html>

如安装了 Live Server 插件，我们可以通过右键单击 Open with Live Server 进行实时预览：

image-20200221152611.png

最终运行效果如下：

image-20200221152656.png

至此我们就顺利完成了环境搭建以及第一个 Vue.js 实例项目。