node.js 安装及vue工程创建

1、下载安装包

Node.js 官方网站下载：https://nodejs.org/en/

2、安装

打开安装，傻瓜式下一步即可，
安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：

3、安装 Vue的工具

执行 npm install 命令时，默认使用的是国外的下载源 ，可以通过如下代码配置为使用淘宝的镜像：

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

修改完成后，就能有效提高下载的成功率。

npm install -g vue-cli    # 只需要第一次安装时执行

4、创建VUE工程

1、在需要创建的目录底下shift+右键，打开命令窗口：

2、使用webpack模板创建一个vue项目

vue init webpack vue02

确认项目名称是否叫vue02，如果确认直接回车，否则可以修改。


是否安装依赖，我们第一次先不安装看下：

可以看到新建的工程是非常小的，因为依赖还没有下载，

需要的依赖在package.json中可以看到：

接下来我们手动下载一下：

可以看到，依赖下载好之后工程将变得非常大：

为了方便起见，后面我们创建VUE项目直接选择第一项：

5、Vue 项目结构介绍

使用webstorm打开项目，可以看到下面的目录：

1、build 文件夹，用来存放项目构建脚本
2、config 中存放项目的一些基本配置信息，最常用的就是端口转发
3、node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件
4、src 这个目录下存放项目的源码，即开发者写的代码放在这里
5、static 用来存放静态资源
6、index.html 则是项目的首页，入口页，也是整个项目唯一的HTML页面
7、package.json 中定义了项目的所有依赖，包括开发时依赖和发布时依赖

对于开发者来说，以后 99.99% 的工作都是在 src 中完成的，src 中的文件目录如下：

6、Vue项目启动

1、使用命令启动

npm run dev

启动成功后，我们可以访问下面的网址

如果出现如下页面说明项目已经启动成功了：

2、我们也可以在webstrom中进行配置启动：


配置完成后，点击右上角启动按钮，就可以启动一个 Vue 项目，如下：