一、前言
“脚手架”是一种元编程的方法，用于构建基于数据库的应用。许多MVC框架都有运用这种思想。
是不是感觉很高大上的样子，好吧，其实说直白点就是：别人共享出来的，可以快速帮你搭建一个项目的基础架子，你可以在上面添砖加瓦，以满足你的需求。这篇博文要介绍的为vue-cli2.x版本的。
二、准备工作
node安装
在node官网，下载安装包，然后一路点击next，即可进行傻瓜式安装。安装完成后可以，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功：如下
当然也可以参考我之前的文章windows系统下如何安装多版本node，进行多版本的安装
webpack的安装
安装完成node之后，我们就可以使用node自带的包管理工具，全局安装webpack了，命令行为：npm install webpack -g，此时默认安装最新版本。
注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令： npm install webpack webpack-cli -g
vue-cli安装
全局安装vue-cli，在cmd中输入命令:
npm install -g vue-cli安装完成后，输入 vue -V 记住 大写V ! 大写V ! 大写V !
vue -V结果如下：
至此，环境准备工作已经结束了， 如果在上述操作中，遇到了问题，请自行去找百度哦
三、用vue-cli构建项目
-
生成项目
通过命令行，切换到项目的存放目录下，然后执行命令：
vue init webpack vue-webpack-demo过程如下图
-
初始化，安装依赖
cd vue-webpack-demo npm install到这一步，通vue-cli构建项目基本就完成了，当然这只是一个很基础的项目框架。
四、项目的运行
项目创建完成后，在根目录有一个package.json的文件中，有这样一个字段
1"scripts": {
2 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
3 "start": "npm run dev",
4 "lint": "eslint --ext .js,.vue src",
5 "build": "node build/build.js"
6 },
以上就是默认的几个项目相关的命令。
本地开发：npm run dev
执行命令npm run dev
然后在浏览器打开http://localhost:8080 ，会看到欢迎页：
到此，我们的demo就跑起来了，当然这只是在开发环境跑起来的。
打包上线：npm run build
执行命令npm run build，打包后会生成dist文件夹
打开dist文件夹下新生成的index.html文件，会发现页面空白，打开控制台会发现页面中引用的css和js文件都找不到。
说明引用路径错了，需要手动修改：
进入config/index.js
此时，再重新执行命令，即可运行成功了。
将来项目上线时，只需要将 dist 文件夹放到服务器就行了。
以上是基于vue-cli脚手架创建vue项目的基本过程，希望对你有所帮助。欢迎关注同步微信公众号：前端小菜的进阶之路
