- 全栈开发之博客：前端Vue2全家桶+饿了么elementUI；后台node.js+mongodb；
- Markdown语法介绍参照：http://www.appinn.com/markdown/
- 本系统将详细讲解各种实现过程
- 脚手架工具详解
- 引入elementUI
- vue脚手架工具安装参照：http://cn.vuejs.org/v2/guide/installation.html
npm install --global vue-cli vue init webpack my-project cd my-project npm install npm run dev - 脚手架工具webpack解析之（build/dev-server.js）主要完成以下几件事情
* 检查node和npm的版本
* 引入相关插件和配置
* 创建express服务器和webpack编译器
* 配置开发中间件（webpack-dev-middleware）和热重载中间件
（webpack-hot-middleware） * 挂载代理服务和中间件
* 配置静态资源
* 启动服务器监听特定端口（8080）
* 自动打开浏览器并打开特定网址（localhost:8080）
注：前端开发过程中需要使用到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。 - 脚手架工具webpack解析之（webpack.base.conf.js）主要完成以下几件事情
* 配置webpack编译入口
* 配置webpack输出路径和命名规则
* 配置模块resolve规则
* 配置不同类型模块的处理规则
- 脚手架工具webpack解析之（build/webpack.dev.conf.js）主要完成以下几件事情
* 将hot-reload相关的代码添加到entry chunks
* 合并基础的webpack配置
* 使用styleLoaders
* 配置Source Maps
* 配置webpack插件
- 脚手架工具webpack解析之（build/utils.js和vue-loader.conf.js）主要完成以下几件事情
* 配置静态资源路径
* 生成cssLoaders用于加载.vue文件中的样式
* 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件
注：vue-loader.conf则只配置了css加载器以及编译css之后自动添加前缀
- 脚手架工具webpack解析之（build/build.js）主要完成以下几件事情
* loading动画
* 删除创建目标文件夹
* webpack编译
* 输出信息
注：webpack编译之后会输出到配置里面指定的目标文件夹；删除目标文件夹之后再创建是为了去除旧的内容，以免产生不可预测的影响。 - 脚手架工具webpack解析之（build/webpack.prod.conf.js）主要完成以下几件事情
* 合并基础的webpack配置
* 使用styleLoaders
* 配置webpack的输出
* 配置webpack插件
* gzip模式下的webpack插件配置
* webpack-bundle分析
注：webpack插件里面多了丑化压缩代码以及抽离css文件等插件。 - 脚手架工具webpack解析之（build/check-versions.js和build/dev-client.js）主要完成以下几件事情
* 对node和npm的版本检测 - 脚手架工具webpack解析之（build/index.js）主要完成以下几件事情
* 描述了开发和构建两种环境下的配置
安装element-ui
npm i element-ui -S
修改src/main.js，引入ElementUI