vue框架安装教程图解学习 02Vue入门教程Vue的安装
本小节将带领大家学习一下如何安装 Vue包括独立版本、CDN、NPM、CLI 工具四种不同的安装方法，现在小编就来说说关于vue框架安装教程图解学习 02Vue入门教程Vue的安装?下面内容希望能帮助到你，我们来一起看看吧!
vue框架安装教程图解学习 02Vue入门教程Vue的安装
1. 前言本小节将带领大家学习一下如何安装 Vue。包括独立版本、CDN、NPM、CLI 工具四种不同的安装方法。
2. 独立版本我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用<script>标签引入。
下载Vue.js
安装步骤：
- 打开Vue.js下载地址并拷贝所有代码。
- 创建vue.min.js文件，并将拷贝的源码粘贴进去。
- 创建index.html并通过<script>标签引入。
- 打印Vue验证是否成功。
//文件结构
└─ lession
├─ index.html
└─ vue.min.js
实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
Hello Imooc ！
</div>
</body>
<script src="./vue.min.js"></script>
<script type="text/javascript">
console.log(Vue)
</script>
</html>
123456789101112131415161718
"运行案例" 可查看在线运行效果
## 打印结果
ƒ wn(e){this._init(e)}
使用 CDN 的方式引入Vue更加方便、快捷。以下推荐几个比较稳定的 CDN。
- https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- https://unpkg.com/vue/dist/vue.js
- https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
- https://cdn.jsdelivr.net/npm/vue/dist/vue.js
实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
Hello Imooc ！
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script type="text/javascript">
console.log(Vue)
</script>
</html>
"运行案例" 可查看在线运行效果
4. 使用NPM的方法使用NPM的方法进行安装需要先在本地安装Node环境。
3.1、Windows 上安装 Node.js32 位安装包下载地址 64 位安装包下载地址 下载对应的安装包后，双击安装包，傻瓜式下一步安装就好了。
3.2、Mac 上安装 Node.js1、在官方下载网站下载 pkg 安装包，直接点击安装即可。 2、使用 brew 命令来安装：brew install node
brew install node
代码块1
# 查看本地node环境
$ node -v
v10.16.0
代码块123
在用 Vue 构建大型应用时推荐使用 NPM 安装。当然，仅仅使用npm install是不能完整搭建Vue开发环境的。还需要webpack或 Browserify 等模块打包器配合使用。
# 创建项目目录
$ mkdir demo
# 进入项目文件夹
$ cd demo
$ npm init -y
# 最新稳定版
$ npm install vue
# 安装指定版本Vue
$ npm install vue@2.6.3
代码块123456789101112
安装完成后可以查看到demo目录下多了 node_module/vue 文件夹。说明Vue成功安装。
5. 命令行工具（CLI）当然，看过 Vue 官网的同学肯定都知道 Vue 提供了一个官方的 CLI，为我们快速搭建大型单页应用。我们并不建议同学们在一开始就使用 Vue-cli 来构建项目，因为这需要同学们对 Node.js、Webpack 等技术有所了解。在熟悉了 Vue 的语法之后，我们将有一个完整的章节来学习和使用 Vue-cli。
6. 小结本小节我们介绍了 Vue 安装的几种方式。作为初学者，我们建议同学们先使用第一、第二种方式进行学习。在对 Vue 有一定的了解之后再学习脚手架工具 Vue-Cli 的使用。在接下来 Vue 基础的章节中我们都将使用 <script src="https://unpkg.com/vue/dist/vue.js"></script> 的方式进行代码演示。关于脚手架工具 Vue-Cli 的学习，我们将在最后一个章节中一起探讨。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
