vue-cli脚手架的搭建（详细有图解）

vue-cli脚手架的搭建

一、安装脚手架工具

1、安装nodejs（自带npm）
安装过程非常简单，与平时安装的一般软件无异。
官方网站：https://nodejs.org/en/
安装之后，打开Node.js命令行工具，输入

node --version

测试安装是否成功，出现版本号则安装成功，如图：

2、安装淘宝镜像cnpm（npm安装vue-cli比较慢，可以使用cnpm进行替换）

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

3、全局安装webpack

 cnpm install webpack –g

4、安装vue-cli脚手架构建工具

cnpm install vue-cli –g

使用vue --version进行验证vue-cli是否安装成功，若出现版本号则安装成功。

二、搭建项目
1、准备一个文件夹作为你的工作空间（以后的每个项目都在文件夹下）

           如：f:\workspace

2、使用vue脚手架构建项目
在工作空间的目录下运行 vue init webpack 项目名称，如：vue init webpack music

当出现Project initialization finished时，则项目搭建完成。

3、项目目录如下：

4、启动项目
在命令行（转到项目目录下，如：f:\workspace\music）执行命令： npm run dev。看到如下画面，说明成功启动，默认端口号是8080

5、 运行（测试安装是否成功）
在地址栏中输入：http://localhost:8080/#/，成功如图所示：

一套完整的脚手架安装步骤如上······