01 Vue.js开发环境搭建

前言

本次主要是为了记录Vue.js开发环境的搭建，在此之前我已经安装好了 node和 git接下来就进入到Vue.js开发环境的搭建工作吧。

1.安装淘宝镜像

① 首先，在电脑中新建一个文件夹准备存放项目，在此文件夹中点击鼠标右键选择 Git Bash Here，如下图所示。

② 在弹出命令窗口中输入淘宝npm镜像，如下所示，然后回车。

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

2.全局安装 vue-cli

在命令窗口输入:cnpm install -g vue-cli

3.安装完成后输入 vue，出现以下内容则说明安装成功。

4.创建一个基于webpack模板的新项目，名称为 demo。

在命令窗口中输入： vue init webpack demo 。（注意后面的 demo 为我的项目名称，可以根据需要进行改动。）
输入上述命令后，系统开始下载模板：
① 项目的名称
括号中为你创建模板时候的名称，如果不改直接按 Enter ，改动的话则直接在后面输入项目名称，如下图所示。

② 项目的描述
有时候，我们会为我们的项目添加描述，就可以在这里填写项目描述，如果不填写则直接按下 Enter ，如下图所示。

③ 项目作者
需要的话直接输入项目作者，不需要的话直接按 Enter ，如下图所示。

④ 是否安装编译器，直接按 Enter 即可，如下图所示。

⑤ 是否安装路由，输入 y ，按下 Enter，如下图所示。

⑥ 是否使用 ESLint
根据需要选择 y 或者 n，这里我选择的是 n ，按 Enter，如下图所示。

⑦ 是否安装测试工具，输入 n ，按 Enter，如下图所示。

⑧ 是否安装 e2e 测试工具，输入 n ，按 Enter，如下图所示。

⑨ 项目创建后，是否直接使用命令依赖，按 Enter 即可，如下图所示。

出现如下图所示界面，即表示基于webpack模板的项目已经创建完成。

5.进入项目

在命令窗口输入：cd demo

6.安装依赖

在命令窗口输入：cnpm install
输入完此命令后，即可在项目文件夹中看到多了一个node_modules文件夹，这个文件夹就是所安装的依赖，如下图所示。

7.运行项目

在命令窗口输入：npm run dev ，出现 http：//localhost:8080 即可，如下图所示。

8.浏览器中访问项目

在浏览器中输入 http：//localhost:8080 ，出现如下图所示界面，说明项目运行成功。

在下次我们重新启动项目时只需要直接输入 npm run dev 运行项目即可。