vue作为国内普及率最高的前端开发框架，学会vue，我们就如同有了一把神兵利器。

引入Vue框架库

1.CDN引入

CDN即内容分发网络，这里建议使用字节提供的网站字节跳动静态资源公共库。

    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.2.2/vue.js" type="application/javascript"></script>

我们可以去vue的官方文档使用官方提供的CDN地址。其次我们要注意vue版本选择。

CDN了解

CDN，通过良好性能的服务器提高我们获取资源的速度，并且根据请求地址动态分配就近服务器提供资源。通常是开源常用的资源或库会被大公司挂载到CDN上供所有开发者或公司使用。

2.下载源文件

通过CDN地址或则其他人提供的资源，我们可以直接下载vue库下来，也就是一个vue.min.js。

下载了源文件vue.js后，我们就直接本地引入即可。

3.模块化引入

我们可以通过模块下载vue，在node_modules中我们看到vue.js库文件。

4.脚手架模式

脚手架模式其实和模块化引入本质一样，只是我们下载vue-cli后内置了vue，自动下载了vue库。

这种情况我们更加关心需求代码，vue作为底层引入被淡化了。

脚手架也是我们vue开发常用的模式。

实例化测试

我们通过简单的vue实例来测试是否引入成功。

创建一个html，在head引入上面的资源，然后我们编写以下代码：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CDN引入</title>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.2.2/vue.js" type="application/javascript"></script>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'123'
            }
        })
    </script>
</body>
</html>

效果：

写篇文章之必须马上精通vue——（1）引入Vue