Vue是当前最流行的三大前端框架之一，刚学Vue的时候感觉也没什么新奇的地方，后来对Vue的接触深了才知道这个框架流行的原因了。
现在进入正题：
先说一说脚手架的作用——它能帮助你快速开始一个vue项目，其实其本质就是给你一套文件结构，包含基础的依赖库，你只需要npm install一下就可以安装。让你不需要为编译或其他琐碎的事情而浪费时间，这并不会限制到你的发挥。
如何安装：
进入网址后，选择下载方式最好是选择官网
链接】安装Node.js和npm
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000
下载完事后在“终端”按照以下的步骤完成：
（本人是Mac，windon的用户根据自己终端指令完成）
1、确保安装过vue-cli模块 npm install vue-cli -g
2、初始化本地项目（下载脚手架摸版）vue init webpack xxx(工程名称)
vue-router：路由器组件：YES
（YES完事是三个no，具体的记不太清楚）（一个YES三个NO，记住就好了）
3、进入到工程文件夹下，cd xxx
4、运行项目于本地服务器，npm run dev
当出现这种样式，这名你已经完成了脚手架的创建！ 你就可以在网址上输入：http://localhost:8080 看看效果
用你的编译软件，找到脚手架的位置，打开。你会看到很多的文件。
给你们整理了一下，看一下这些文件用处：
build ——项目配置文件夹
build.js ——项目环境配置代码
check-version.js ——检查node-npm版本的插件
logo.png ——vue的logo图片
utils.js ——项目配置变量
vue-loader.conf.js ——在.vue文件中用于处理css的规则
webpack.base.conf.js ——webpack基础配置
webpack.dev.conf.js ——webpack开发环境配置（包括测试服务器环境）
webpack.prod.conf.js ——webpack生产环境配置（打包时的配置代码）
config ——环境变量的配置
dev.env.js ——开发环境变量配置
index.js ——webpack相关变量配置（开发环境接口代理在这里配置）
prod.env.js ——发布环境变量配置
node_modules ——当前工程下载的第三方模块插件包（npm下载和管理的模块所在的位置）
src ——源码目录
assets ——静态资源文件（会被webpack构建并打包的）
logo.png ——logo图片属于静态资源
components ——vue公共组件
HelloWorld.vue ——一个组件文件(.vue)
router ——路由配置
index.js ——具体路由代码
App.vue ——vue的页面入口，打开的页面就是这个文件
main.js ——webpack打包的入口文件，加载各种组件、配置、变量
static ——纯静态资源文件夹，不会被webpack打包
babelrc ——es6语法编译配置
editorconfig ——定义代码格式
gitignore ——git上传时需要忽略的文件的列表
postcssrc.js ——postcss-loader模块配置文件，用于加载css
index.html ——项目真正的入口（app.vue需要嵌入在html里）
package.json ——项目基本信息(包括一些指令等)
package-lock.json ——项目依赖包版本，锁定文件
README.md ——项目说明文件（使用markdown语法编写）
原文地址：https://www.cnblogs.com/buwang/p/9931792.html