Vue-cli 脚手架的安装与使用（详细说明）

1.1.1.1 安装Node.js

无疑Node.js是前端编程的必备环境配置之一。 安装过程非常简单，与平时安装的一般软件无异。 官方网站：https://nodejs.org/en/

Node.js自带npm包管理工具，使用npm可使我们快速安装项目中所需要的组件。 打开Node.js命令行工具，输入

node –version # 查看node的版本
npm -version #查看npm版本

可查看Node.js当前的版本，如果没有出现版本号，很可能是Node.js没安装成功，或者电脑环境没配置好

node版本

1.1.1.2 2.安装Vue.js devtools扩展程序

打开Chrome网上应用店，安装Vue.js devtools。这个插件，便于我们在进行Vue.js开发过程中的调试，是一个很有用的工具。

1.1.1.3 安装vue-cli脚手架工具

安装好了 node，我们可以直接全局安装 vue-cli：

npm install -g vue-cli

如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存但是这种安装方式比较慢，推荐使用国内镜像来安装，所以我们先设置 cnpm：

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

同样可以使用 cnpm -v 查看是否安装成功

cnpm install -g vue-cli

安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

vue-cli安装.png

1.1.1.4 项目的搭建

使用vue –help查看Vue的可用的命令：

vue-help.png

使用vue list 命令操作显示如下：

vue list.png

在看看vue init的用法，输入vue init –help

vue-cli安装.png

使用如下命令构建项目：

vue init webpack my_vue_project_2018-04-05

构建项目.png

关于项目的运行操作：

运行效果.png

输入 npm run dev 运行下项目：

运行效果.png

1.1.1.5 项目目录结构

项目目录结构.png

详细说明参考文章：Gitbook文章