garsonguo / xiaobogBlog

Vue的后台管理系统：前端Vue2全家桶+饿了么elementUI；

xiaobogBlog

• 全栈开发之博客：前端Vue2全家桶+饿了么elementUI；后台node.js+mongodb；
• Markdown语法介绍参照：http://www.appinn.com/markdown/

任务

• 本系统将详细讲解各种实现过程
• 脚手架工具详解
• 引入elementUI

前端脚手架工具

1. 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
   

2. 脚手架工具webpack解析之（build/dev-server.js）主要完成以下几件事情
   * 检查node和npm的版本
   * 引入相关插件和配置
   * 创建express服务器和webpack编译器
   * 配置开发中间件（webpack-dev-middleware）和热重载中间件
   （webpack-hot-middleware） * 挂载代理服务和中间件
   * 配置静态资源
   * 启动服务器监听特定端口（8080）
   * 自动打开浏览器并打开特定网址（localhost:8080）
   注：前端开发过程中需要使用到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。
3. 脚手架工具webpack解析之（webpack.base.conf.js）主要完成以下几件事情
   * 配置webpack编译入口
   * 配置webpack输出路径和命名规则
   * 配置模块resolve规则
   * 配置不同类型模块的处理规则
   
4. 脚手架工具webpack解析之（build/webpack.dev.conf.js）主要完成以下几件事情
   * 将hot-reload相关的代码添加到entry chunks
   * 合并基础的webpack配置
   * 使用styleLoaders
   * 配置Source Maps
   * 配置webpack插件
   
5. 脚手架工具webpack解析之（build/utils.js和vue-loader.conf.js）主要完成以下几件事情
   * 配置静态资源路径
   * 生成cssLoaders用于加载.vue文件中的样式
   * 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件
   注：vue-loader.conf则只配置了css加载器以及编译css之后自动添加前缀
   
6. 脚手架工具webpack解析之（build/build.js）主要完成以下几件事情
   * loading动画
   * 删除创建目标文件夹
   * webpack编译
   * 输出信息
   注：webpack编译之后会输出到配置里面指定的目标文件夹；删除目标文件夹之后再创建是为了去除旧的内容，以免产生不可预测的影响。
7. 脚手架工具webpack解析之（build/webpack.prod.conf.js）主要完成以下几件事情
   * 合并基础的webpack配置
   * 使用styleLoaders
   * 配置webpack的输出
   * 配置webpack插件
   * gzip模式下的webpack插件配置
   * webpack-bundle分析
   注：webpack插件里面多了丑化压缩代码以及抽离css文件等插件。
8. 脚手架工具webpack解析之（build/check-versions.js和build/dev-client.js）主要完成以下几件事情
   * 对node和npm的版本检测
9. 脚手架工具webpack解析之（build/index.js）主要完成以下几件事情
   * 描述了开发和构建两种环境下的配置
   

引入ElementUI

安装element-ui

npm i element-ui -S

修改src/main.js，引入ElementUI