Vue 安装方法

发布时间：2023-03-31 14:16:22 所属栏目：教程来源：

导读：本小节将带领大家学习一下如何安装 Vue。包括独立版本、CDN、NPM、CLI 工具四种不同的安装方法。

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用<script>标签引入。

下载Vue.js

安装步骤：

打开Vu

本小节将带领大家学习一下如何安装 Vue。包括独立版本、CDN、NPM、CLI 工具四种不同的安装方法。

我们可以在 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>
## 打印结果
ƒ 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>

使用NPM的方法进行安装需要先在本地安装Node环境。

32 位安装包下载地址
64 位安装包下载地址
下载对应的安装包后，双击安装包，傻瓜式下一步安装就好了。

1、在官方下载网站下载 pkg 安装包，直接点击安装即可。
2、使用 brew 命令来安装：brew install node

brew install node
# 查看本地node环境
$ node -v
v10.16.0
在用 Vue 构建大型应用时推荐使用 NPM 安装。当然，仅仅使用npm install是不能完整搭建Vue开发环境的。还需要webpack或 Browserify 等模块打包器配合使用。

# 创建项目目录
$ mkdir demo

# 进入项目文件夹
$ cd demo
$ npm init -y

# 最新稳定版
$ npm install vue

# 安装指定版本Vue
$ npm install vue@2.6.3
安装完成后可以查看到demo目录下多了 node_module/vue 文件夹。说明Vue成功安装。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!