前述.
最近在学习前端框架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


