引入(安装)
- 一、CDN 引入
- 二、下载引入(前期推荐)
- 三、NPM 引入(后续使用)
源码工程文件为:
一、CDN 引入
CDN 的全称是 Content Delivery Network,即内容分发网络。
CDN 的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求。
纵观整个宽带服务的价值链,内容提供商和用户位于整个价值链的两端,中间依靠网络服务提供商将其串接起来。随着互联网工业的成熟和商业模式的变革,在这条价值链上的角色越来越多也越来越细分。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。
比如 js 有 2 种 引入 方式:
- 下载代码文件至本地项目中引入
- 通过 CDN(内容分发网络) 引用它
拿 JQuery 来举例子,使用 CDN 引用的一个好处:许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。
Vue.js 也是这样的,官方提供了两个本版的 CDN 映入方式,如下:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
我们自然是处于开发阶段,所以这里我们使用开发版本就可以了,当项目发布的时候,我们在使用发布版本即可!
二、下载引入(前期推荐)
开发环境版本https://cn.vuejs.org/js/vue.js
生产环境版本https://cn.vuejs.org/js/vue.min.js
下载两个版本打开以后可以看到,所谓的开发版本的概念也就是压缩过的,所以我们在开发的时候尽量还是选择未被压缩过的版本,方便源码的查看,发布的时候更换成压缩版即可!
三、NPM 引入(后续使用)
NPM 的全称是 Node Package Manager,是一个 NodeJS 包管理和分发工具,已经成为了非官方的发布 Node 模块(包)的标准。
NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
最新稳定版
$ npm install vue
命令行工具 (CLI)
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
官网已经指出,在用 Vue 构建大型应用时推荐使用 NPM 安装。如果你是新手,我们强烈建议先在不用构建工具的情况下通读指南,在熟悉 Vue 本身之后再使用 CLI。
如有错误,欢迎指正!