前端框架VUE——安装及初始化

本篇文章适合，想要学习 vue，但对 vue 又没有接触过的同学阅读，是非常基础的内容。告诉大家使用 vue 时的安装方式，及如何创建实例，展示内容。

一、安装方式

vue 是一种前端框架，所以使用前我们必须安装，有三种安装方式分别为：

1.1、使用 script 标签引入

在 vue 官方文档，我们可以下载开发版本和生产版本两个 js 文件，生产版本是经过压缩，删除注释，警告等，比开发版本文件要小，下载之后直接通过 script 标签引入，Vue 会被注册为一个全局变量。

//使用
<script src="static/js/vue.js"></script>

1.2、CDN

使用 cdn 方式引入 vue.js 文件，与上述 script 标签引入是类似的，使用 cdn 引入需要注意引入文件的版本号，建议链接到一个明确的版本号和构建文件，避免新版本造成影响。

//使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

1.3、NPM

vue 构建大型应用项目时，推荐使用 npm 安装，因为 npm 能很好的和 webpack 或 browserify 模块打包器配合使用，同时 vue 也提供配套工具来开发单文件组件。

什么是脚手架？

vue 提供了一个官方的 cli，为单页面应用(SPA)快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。

使用 npm 安装 vue 之前，需要先安装 node.js 环境。

// 安装语法
npm install vue

1.4、Bower

# 最新稳定版本
$ bower install vue

二、初始化

突然想起一个特别有意思的话，程序员遍地都是对象，唯独我没有对象。听起来特别扎心的一句话，作为程序媛的妹子之前也有过这种苦恼，不过我还是要告诉你一句，缘分未到，静待缘来！

vue实例化的时候，与我们面向对象的实例是一样的，想看《面向对象》的，可自行翻看下。

创建一个 vue 实例，代码如下：

var vm = new Vue({
    el:'#app',
  data(){
   //定义数据
  }
})

vm 是（ViewModel）的缩写，表示 Vue 的实例。

实例化时，可传入一个选项对象，选项对象中可以加入很多选项。

el 是用于挂载要管理的元素，el之外的元素不会被vue解析。

data 用于定义绑定到元素的数据。

三、第一个 vue 页面

做一个简单的 hello world 页面，我们使用cdn方式引入vue。具体实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Document</title>
</head>
<body>
 <div id="app">{{msg}}</div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  let app = new Vue({
  el:"#app",
  data(){
   return{
    msg:'hello world'
   }
  }
 })
 </script>
</body>
</html>

打开网页，正常运行，显示 hello world。

3.1、如果我们继续给div添加一个兄弟节点，继续展示 msg 数据，如：

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

运行结果如图：

此时我们发现 {{msg}} 并没有被解析，直接原样输出。是因为，el 挂载要管理的元素，而后边的 div 没有在管理元素内，所以直接输出了，并没有解析内容。

值得注意的是，开发时，需要解析的内容都要放到被挂载管理的元素内。