VUE学习环境搭建.

前述.

最近在学习前端框架Vue，也是从零开始学习的小白，主要参考学习资料：Vue官网 、菜鸟教程现记录学习过程中的心得，先从搭建环境开始。

---

搭建基础环境.

1. 下载 Node ,根据自己的电脑系统类型、位数，下载响应的Node版本

2. Node下载后，安装：一路下一步即可，验证Node.js是否安装成功，win+r输入cmd，打开黑窗口输入： node -v 、npm -v 能查询相关软件版本即可安装成功。

3. 在使用vue进行开发的时候，项目有可能需要下载其他依赖包，此时依赖包下载的镜像地址默认是国外的地址，下载过程会有些慢；现修改镜像地址，改为淘宝的镜像地址。在cmd黑窗口中执行指令：npm install -g cnpm --registry=https://registry.npm.taobao.org

注意：上面的指令输入后，会安装cnpm这个指令，安装结束后，只有cnpm的镜像地址是淘宝的，npm指令的镜像地址依然是国外的。也就是说：当使用npm指令安装依赖的时候，依然是从国外下载，使用cnpm指令安装依赖才从淘宝镜像下载。使用如下指令可查看对应的镜像地址：

npm config get registry   查看npm的镜像地址

cnpm config get registry 查看cnpm的镜像地址

如果需要将npm的镜像地址也改为淘宝的镜像地址，执行如下指令：

npm config set registry https://registry.npm.taobao.org npm info underscore

此时，在执行：npm config get registry 即可查看镜像地址为淘宝镜像地址

至此，基础环境搭建结束。

---

搭建学习环境-预热篇

在搭建学习环境之前，先说一下如何使用vue创建一个项目，对vue框架也有一个预先认识。在使用vue搭建项目时，需安装 vue-cli ，在cmd黑窗口中执行如下指令：

npm.cmd install vue-cli -g

vue-cli是否安装成功，执行指令：vue -list 能查询到模板说明已安装成功，如下：

在上述的模板中，我们使用webpack模板创建一个hello项目，运行指令如下：

vue init webpack hello 

项目创建结束后，分别执行如下指令：

cd hello 进入创建的项目中

npm run dev 启动项目

项目分析

Vue编程，我使用的软件 VSCode，使用VsCode打开项目后，项目结构如下：

对于vue创建的项目，先不过多深入学习，因为需要先把原生的Vue学会，当原生的Vue熟悉后，在回过来头使用vue项目制开发，就很容易了，至此搭建学习环境-预热篇结束。

搭建学习环境

创建 文件夹learn，使用VSCode打开项目，依次创建子目录，目录结构如下：

从 VUE官网下载 vue2.0的两个版本，放js目录中

使用VSCode打开项目后，在终端输入指令进行安装live-server，指令如下

npm install live-server -g

最后在终端运行项目，指令如下：

live-server.cmd