Vue实战（二）框架和环境

本文是Vue实战系列的第二篇文章，主要讨论Falcon项目所依赖的Vue框架和环境。
Falcon项目地址：https://github.com/thierryxing/Falcon

Vue版本

生活上，本人一向是敝帚自珍的典范，一条裤子都能穿到抽丝还不舍得扔；而技术上，本人确是喜新厌旧的实例，无论是操作系统，IDE还是框架，能用最新版本绝对不用旧的。由于Falcon没有任何历史包袱，所以理所当然的Vue及相关框架也选用最新的版本：

    "vue": "^2.3.3",
    "vue-router": "^2.5.3",
    "vue-resource": "^1.3.3",
    "vuex": "^2.3.1",
    "vue-highlightjs": "^1.3.1"

另外，由于Falcon是内部项目，所以我果断抛弃IE9及以下浏览器（一个字：爽），猛然回想起刚开始做前端时，和IE6斗争的残酷往事：不堪回首。

AdminLTE和Vue

由于本人一向是界面控，如果UI层面丑陋的话，那么基本上没有任何编码的心情。所以经过一段时间的精挑细选，我最终选择使用基于Bootstrap的AdminLTE作为展示层框架，这样只用少量的自定义CSS就能完成比较漂亮的界面展示，所涉及到的框架和版本如下：

    "admin-lte": "^2.3.11",
    "jquery": "^2.2.3",
    "bootstrap": "^3.3.7",
    "ionicons": "^3.0.0",
    "font-awesome": "^4.7.0",

问题也随之而来，即Vue和Bootstrap及jQuery的混用。好在这方面的解决方案网上多的是，经过最终的实践，在Vue中使用AdminLTE（Bootstrap）的正确方式如下：

1. 在webpack.base.conf.js文件中的plugin数组中增加新插件：

  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery',
      slimscroll: 'jquery.slimscroll'
    })
  ]

完整的例子：https://github.com/thierryxing/Falcon/blob/master/build/webpack.base.conf.js

2. 在main.js中增加相关js和css的引用：

import slimScroll from 'admin-lte/plugins/slimScroll/jquery.slimscroll'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import 'font-awesome/css/font-awesome.min.css'
import 'admin-lte/dist/css/AdminLTE.min.css'
import 'admin-lte/dist/css/skins/skin-blue.min.css'
import 'admin-lte/dist/js/app.min'

完整的例子：https://github.com/thierryxing/Falcon/blob/master/src/main.js

经过上面的两步，界面能够正常展示，一些基于jQuery的交互也能正常完成，且Console中无报错和警告，完美。