一、安装node.js
1、什么是node.js？
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。
只需要在官网上下载对应的系统软件安装上即可（http://nodejs.cn/）
2、安装
略
二、vue-cli脚手架
1、vue-cli的作用？
vue-cli是一个vue脚手架，可以快速构造项目结构
2、vue-cli集成的项目模板： simple 很少简单 webpack 包含ESLint代码规范检查和unit单元测试等 webpack-simple 没有代码规范检查和单元测试 browserify 使用的也比较多 browserify-simple3、安装vue-cli流程
1、 安装vue-cli，配置vue命令环境
cnpm install vue-cli -g #-g指代的是全局安装 vue --version #查看版本 vue list #列出可以使用的模板 2、 初始化项目（使用vue-cli），生成项目模板 语法：vue init 模板名 项目名 Project name (myfristvue) 项目名称，默认即可 3 进入生成的项目目录，安装项目依赖模块包 cd vue-cli-demo npm install #吧响应的依赖模块都安装上，解决依赖性 4 运行 npm run dev #启动测试服务打开浏览器默认8080端口，如果端口被占用就自动往后找（8081）,浏览器默认页面是app.vue 测试环境下可以这样运行 npm run build #将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上三、vue.js文件目录
├── index.html 入口页面
├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面 │ ├── build.js 生产环境构建脚本 │ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新 │ ├── dev-server.js 运行本地开发服务器 │ ├── utils.js 构建相关工具方法 │ ├── webpack.base.conf.js wabpack基础配置 │ ├── webpack.dev.conf.js wabpack开发环境配置 │ └── webpack.prod.conf.js wabpack生产环境配置 ├── config 项目配置 │ ├── dev.env.js 开发环境变量 │ ├── index.js 项目配置文件 │ ├── prod.env.js 生产环境变量 │ └── test.env.js 测试环境变量 ├── mock mock数据目录 │ └── hello.js ├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息 ├── eslintrc.js 配置缩进，允许几个字符等配置文件 ├── eslintignore 指定哪些文件不进行exlintrc的检测 ├── src 项目源码目录 │ ├── main.js 入口js文件 │ ├── app.vue 根组件 │ ├── components 公共组件目录 │ │ └── title.vue │ ├── assets 资源目录，这里的资源会被wabpack构建 │ │ └── images │ │ └── logo.png │ ├── routes 前端路由 │ │ └── index.js │ ├── store 应用级数据（state） │ │ └── index.js │ └── views 页面目录 │ ├── hello.vue │ └── notfound.vue ├── static 纯静态资源，不会被wabpack构建。 └── test 测试文件目录（unit&e2e） └── unit 单元测试 ├── index.js 入口脚本 ├── karma.conf.js karma配置文件 └── specs 单测case目录 └── Hello.spec.js 四、其他 1、ESLint是用来统一代码规范和风格的工具，如缩进、空格、符号等，要求比较严格。[官网](http://eslint.org) 2、会出现的问题 1、问题Bug：如果版本升级到node 8.0 和 npm 5.0，控制台会报错： GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING 2、解决方法： a)降低Node版本到7.9或以下 b)修改build/dev-server.js文件，如下： var hotMiddleware = require('webpack-hot-middleware')(compiler, { log: () => {}, heartbeat:2000 //添加此行 }) 参考：https://github.com/vuejs-templates/webpack/issues/731