Vue.js入门系列(1)--三种安装方法

  在进行安装之前，先来了解一下Vue到底是什么东西

一、Vue是什么

1.定义：简单的说，Vue是一套构建用户界面的渐进式的框架（渐进式指由浅入深，由简单到复杂）

2.特点

① 体积小
  压缩后仅仅33k
② 更高的运行效率
  基于虚拟DOM，一种预先通过JavaScript进行计算，把最终的DOM操作计算出来并优化的技术，因为此操作没有直接操作在DOM身上，而是预处理操作，所以叫虚拟DOM
③ 双向数据绑定
  让开发者不用再操作DOM对象，把更过精力投入到业务逻辑上
④ 生态丰富，学习成本低

二、安装

1.通过script标签引入

直接进入Vue的官网下载Vue.min.js文件即可：https://cn.vuejs.org/v2/guide/installation.html

image.png

如果是初学者，直接下载生产版本即可，如果是开发者，下载开发版本

2.使用CDN方法引入

① 对于初学者，可以使用最新版本的CND链接：

② 对于生产环境，建议链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

③ 如果使用原生 ES Modules，这里也有兼容的 ES Module 的构建文件：

3.通过npm安装

①安装node.js（安装过的小伙伴可以直接跳过）

  因为npm是node.js中的一个包资源管理器，一般安装了node.js的同时也安装了npm，如果没有安装node.js的小伙伴不要着急，笔者也给出笔者安装node.js的全过程
1.1 安装node.js步骤
① 下载node.js
② 检测node，npm下载是否成功
③ 配置环境变量
④ 测试是否安装成功
第一步：下载node.js
下载：进入node.js官方(https://nodejs.org/en/download/) --> 点击32bit或者64bit --> 选择下载路径 --> 点击下载。下载完成后可以在刚刚自己下载的目录下看到相应的node.js应用文件

image.png

image.png

image.png

安装：双击 node-v12.16.1-x64.msi 进入开始安装界面 --> 点击【netx】按钮

image.png

点击接受协议选框，点击【netx】按钮

image.png

选择路径，点击【netx】按钮（路径因个人可以自行修改）

image.png

点击 Add to PATH，点击【next】按钮

image.png

点击【next】按钮

image.png

点击【Install】按钮

image.png

点击【finish】按钮，完成安装

image.png

第二步：检测node和npm是否安装成功
打开命令窗口 -- 输入 “node -v” --> 输入“npm -v”

image.png

出现了node的版本和npm的版本说明安装成功。

如果检测npm版本出现 operation not permitted, mkdir 'C:\Program Files\nodejs\node_cache' 问题，说明权限不够，你需要用管理员的身份来运行cmd命令窗口

image.png

第三步：配置环境
进入到安装好的node文件

image.png

新建名字为【node_global】和【node_cache】的文件夹
解释：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，因为在执行类似：npm install express [-g] 安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】

image.png

打开命令行，输入下面两行命令：

npm config set prefix "F:\nodejs\node_global"
npm config set cache "F:\nodejs\node_cache"

image.png

进入环境变量界面

image.png

配置系统变量：

image.png

image.png

配置用户变量：将C:\Users\jer-pc\AppData\Roaming\npm 修改成F:\nodejs\node_global （自己刚刚创建的node_global 文件夹的路径）

image.png

image.png

点击确认，到此环境变量配置完成
第四步：检测安装是否成功
安装module中最常用的express模块来测试一下，打开cmd窗口，输入命令：
npm install express -g 【 # -g是全局安装的意思】

image.png

说明node.js以及node.js自带的npm安装成功

②通过npm安装vue

2.1 安装cnpm（npm 的地址是在国外，传输速度很慢，所以可以用淘宝提供的镜像文件下载 cnmp 工具），所以本例子中采用淘宝镜像
打开cmd，赋值粘贴镜像地址 npm install -g cnpm --registry=https://registry.npm.taobao.org （淘宝镜像 https://npm.taobao.org/）

image.png

2.2 检测cnpm是否安装成功：cnpm -v

image.png

image.png

如果在当前目录下输入cnpm -v 失败，那么可以尝试进入到自己安装的cnpm目录（F:\nodejs\node_global）
2.3 使用cnpm下载vue安装包：cnpm install -g vue-cli

image.png

image.png

可以看到vue安装包已经出现在文件夹下。
到此，下载vue的三种方法讲解完毕，个人觉得可以多尝试几遍npm下载vue，虽然笔者刚开始也是安装node.js安装了几小时，但是当你成功后，你就会很喜欢那份成就感！万事开头难，相信自己一定可以克服的！