详解使用nodeJs安装Vue-cli

请跟我一起来详解使用Node.js安装Vue-cli的完整攻略。

1. 安装Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，可以用于服务器端JavaScript环境的搭建。因为Vue-cli是基于Node.js开发的，所以安装Node.js是使用Vue-cli的前提。Node.js支持多操作系统安装，例如Windows，Mac OS X和Linux等。下面将以Windows系统为例，展示安装步骤：

1.1 访问Node.js官网

首先，访问Node.js官网，下载最新的稳定版。

1.2 安装Node.js

选择安装包后，双击打开。一路确认，直到安装完成。

1.3 验证Node.js是否安装成功

打开命令行，输入下面的语句，如果输出了当前Node.js的版本号，则说明安装成功。

node -v

2. 使用npm安装Vue-cli

Vue-cli是一个Vue.js官方提供的脚手架工具，可以为Vue.js项目自动创建目录结构、生成文件等。安装此工具可以大大提高开发效率。

2.1 npm是什么

npm是Node.js的包管理工具，可以帮助我们安装、升级和卸载Node.js模块。我们可以使用npm搜索需要使用的模块并直接安装，非常方便。

2.2 全局安装Vue-cli

在命令行中，输入下面的语句，全局安装Vue-cli。

npm install -g vue-cli

2.3 创建一个基于模板的新项目

在命令行中，输入以下命令：

vue init webpack my-project
cd my-project
npm install
npm run dev

上述命令的含义是：

vue init webpack my-project：创建一个新的Vue.js项目，项目名称为my-project，使用的是webpack模板。
cd my-project：进入到my-project项目目录。
npm install：安装依赖。
npm run dev：启动项目。

2.4 新建一个页面

在命令行输入：

npm run addpage

上述命令会执行 addpage.js 文件，实现以下步骤（假设要创建一个名称为MyPage的页面）：

在 src/router 下新建一个名为 MyPage.vue 的 Vue 组件。
在 src/pages 下新建一个名为 MyPage 的目录，在该目录下新增 index.vue 文件，作为 MyPage.vue 的子组件。
在 src/router/index.js 中，新建一个 /page/MyPage 的路由，并指向 MyPage.vue 组件。
在 src/App.vue 中，添加一个指向 /page/MyPage 的 router-link。

2.5 打包发布项目