当前位置：网站首页 > IT知识 > 正文

02《Vue 入门教程》Vue 的安装

liuian 2025-01-05 18:41 163 浏览

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)}

3. 使用 CDN 方法

使用 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.js

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

3.2、Mac 上安装 Node.js

1、在官方下载网站下载 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 的学习，我们将在最后一个章节中一起探讨。

安装指定版本npm

上一篇：舒心了，终于知道怎么同时安装多个版本的node.js
下一篇：Mac M1下安装、升级npm(国内源)

02《Vue 入门教程》Vue 的安装

1. 前言

2. 独立版本

3. 使用 CDN 方法

4. 使用NPM的方法

3.1、Windows 上安装 Node.js

3.2、Mac 上安装 Node.js

5. 命令行工具（CLI）

6. 小结

相关推荐

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

【验证码逆向专栏】vaptcha 手势验证码逆向分析

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

python使用fitz模块提取pdf中的图片

《人人译客》如何规划你的移动电商网站(2)

Jupyterhub安装教程 jupyter怎么安装包

02《Vue 入门教程》Vue 的安装

1. 前言

2. 独立版本

3. 使用 CDN 方法

4. 使用NPM的方法

3.1、Windows 上安装 Node.js

3.2、Mac 上安装 Node.js

5. 命令行工具（CLI）

6. 小结

相关推荐

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

【验证码逆向专栏】vaptcha 手势验证码逆向分析

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

python使用fitz模块提取pdf中的图片

《人人译客》如何规划你的移动电商网站(2)

Jupyterhub安装教程 jupyter怎么安装包

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄