转自：https://zhuanlan.zhihu.com/p/50445658(强烈推荐去看原文)
前言: 初学Vue是有一定的学习成本的。比如我刚开始接触Vue时，我还未接触node.js，脚手架webpack。在安装时就遇到了难题。vue-cli作为一款mvvm框架语言(vue)的脚手架，集成了webpack环境及主要依赖，对于项目的搭建、打包、维护管理等都非常方便快捷。
一、安装Node环境
在node.js官网下载稳定版本，我是在Windows下安装的。
下载完成后点击安装，安装过程很简单，一直next即可，安装完成会自动添加node及npm环境变量。
检验是否安装成功，在cmd输入命令 node -v,回车 及 npm -v,回车，如出现下图所示版本信息，表示安装成功
查看node与npm版本
二、安装vue-cli
打开cmd命令行工具，输入npm install -g vue-cli,回车 全局安装vue-cli
(注：npm会有点慢，建议更改为国内淘宝的镜像，只换源即可。在cmd输入命令：npm config set registry https://registry.npm.taobao.org)
构建vue-cli项目
1、创建项目
打开cmd，进入想要创建项目的目录下，输入：vue init webpack projectname
projextname是自定义的项目名称，例：我这里命名为vuedemo
创建项目
命令输入完成后敲回车，此时会自动下载template模板，稍微等待一会，会让你按提示完成项目的创建，如下图
创建vue-cli项目
- Project name:——项目名称
- Project description:——项目描述
- Author:——作者
- Vue build:——构建模式，一般默认选择第一种
- Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到
- Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦，eslint的格式验证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度
- Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，可以不用安装
2、安装依赖
项目创建完成，打开文件夹可以看到目录结构如下
未安装依赖时项目结构
此时，项目已经初具雏形，但还未安装依赖。安装依赖库就是node_modules目录下一堆的库。这里你先简单理解为项目运行所需的东西就好。打开cmd，进入项目所在根目录下，输入npm install，回车，如果网络不好，需要一段时间。
依赖安装中
依赖安装结束
我们此时再打开项目文件夹，可以看到多了node_modules文件夹，里面是各种需要的依赖包
安装依赖后项目结构
3、运行项目
打开cmd，进入到项目所在目录下，输入npm run dev,回车，启动项目
完成后，浏览器会自动打开，监听端口8080
可以在浏览器看到如下画面，恭喜你，已成功构建vue-cli项目，接下来就可以开始开发啦
成功了
你也许初学，不懂webpack，node.js，vue.cli，OK，没关系，照着这篇文章一步步做下来，安装webpack,npm,node,vue.cli，最终能运npm dev run运行项目即可。至少你现在能访问vue项目的页面了。