曾几何时听过这样一句话：2016年是JavaScript最火的一年；因为涌现出了很多优秀的前端框架，比如：vue，ng，react 这三个以react为首的被称作前端三大框架。听着就很吊，有木有？原先一直只玩过jquery，此框架在原生JavaScript基础上做了大量改进比如对一些浏览器兼容性上，对dom节点的读取和渲染上都做了很多便利的输出。

这段时间有幸接手之前交由外包团队做的前端项目，很显然是很牛逼的那种！用的就是Vue. 自己在一个人的情况下独自接手该项目，刚一开始的时候真的是无从下手，后面加了几次班也算是小小的入门的了，此外在百度或者其它交流群中也看了，市面上像这种从0开始学Vue的教程真的是少之又少，特此想简短的记录一下，我两周前开始学vue的感受，顺便也给想从jq转Vue的同学一点点参考.

第一步：首先去nodejs官网（https://nodejs.org/en/）下载最新的node包（个人而言喜欢用最新的，就像女朋友，我喜欢是处女一样）

下面截图是最新的node安装包，不要下错了哦（其实也不会错啦，我相信现在没有谁的电脑会是32位的！！）

image

下载完成以后，眼睛闭着一路next安装即可。
我尝试过，你默认安装完成以后，系统环境变量会自动把node的安装路径加到path里。如果没有请自行加上，记得路径不要错，是指到有node.exe的目录；（可参考下面两个截图）

image image

第三步：需要进dos命令行查看所安装的node可以正常使用；其中npm是node下载安装完成之后自带的包管理器，可以使用npm进行安装一些常用modules；（后面会经常使用npm命令）

随即可以执行：

node -v

npm -v

image

第四步：以上node安装完毕之后就可以开始进入新建vue工程啦；进入某个磁盘执行命令：

npm install --global vue-cli

（以上命令为全局安装vue脚手架--把它理解成让你不需要为编译或其他琐碎的事情而浪费时间，帮助你快速开始一个vue项目，其实其本质就是给你一套文件结构，包含基础的依赖库）

再执行：

vue init webpack my-project

（以上命令是生成一个基于webpack模板的新vue工程，工程的名字是：my-project；当然，名字取啥样，随你意）

再执行：

cd my-project

（以上命令是在dos命令行中指定进入my-project这个工程文件夹里面）

正常情况下是以下截图的样纸；红框里的dist和node_modules文件夹先不要管，我后面会讲解到；

image

再执行：

npm install

（此命令是为本工程下载安装所有的依赖包文件，也就是上面截图提到的node_modules）

下载安装时可能由于被墙和windows机器本身没mac“速度”的原因会很慢，建议开启vpn，进行翻墙操作，至于如何进行翻墙，，我想你懂得。
哦，这里我说一下，上次我女朋友带有挑逗的语气跟我说，如果她出墙了，我会怎么办？我想了一下，回答说：

你出墙一尺，我挪墙一丈。

然后，，，就没有然后了，咱们继续。

再执行：

npm run dev

（此命令是开启正常开发模式，会正常监听8080端口，默认也会在浏览器开启一个窗口，地址就是：http://localhost:8080/，当然，这里的端口你可以在config文件下的index.js里进行更改）

下面截图是我修改完之后重新执行npm run dev后浏览器上的界面

image

很显然，可以正常监听我修改后的端口。

咱们再看这里：红框里的 “my-project” 是工程的根目录下的index.html里面的title标识，现在咱们尝试着改下这个标识，比如加个1234什么的，再保存（ctrl+s）操作，再看下这里的标识.

image

没错！！ 已经有热更新的包在里面啦，哇咔咔，是不是很吊很吊的样纸！！

image

在此之后就可以进行任意修改再保存即可查看效果。很炫很炫有木有？想想以前玩jq，还要清空缓存并硬性重新加载才能看到效果。
刷新浏览器的日子将会一去不复返；

当然，就新建一个工程而言其中可以遇到的问题还有很多，

1、比如下载很慢的常态如何解决？

建议使用淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

随后所有用npm命令安装的包文件全部用cnpm代替可能会快一点

2、又如：执行npm run dev 命令下面报

express Error: Cannot find module 'XXX'

我这里给出的建议就是：报错内容说找不到哪个module就安装哪个就行了

npm install xxx

3、比如你从github下载别人上传的工程时，首先阅读md文件说明，一般情况下，会有写如何在本地访问该工程，或者可以将其工程的node_modules包全部删了，自己在本地执行npm install 安装本地依赖文件。

以上内容 仅仅 仅仅 是把工程跑起来，后面要做的还有很多。。。。

相信你和我一样，都喜欢开发，都喜欢前端。