最近在做angularJs的一个BI开源项目的重构，之前做版本迭代的时候，算是被这么个半死，现在做框架迁移也是困难重重，之前没有做过这方面的内容，也算是试水了。希望在博客中记录是如何一点一点完成的。废话不多说了，看一看本文主要完成的任务。

任务：
  1.安装vue-cli，配置router，vuex
  2.引入原项目中用到的bootstrap和jquery(这里后期再处理)
  3.完成登录页面的改造

一.配置router和vuex不多说，官网有。下面引入jquery：

1.使用命令npm install jquery –save-dev 引入jquery。

2.在webpack.base.conf.js中添加如下内容：

var webpack = require('webpack')

//module.exports中加入
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ],

3.在main.js中引入

import $ from 'jquery'

接下来引入bootstrap：

1.将bootstrap下的文件放入assets目录下

2.这时候需要在main.js中添加如下内容：

import './assets/bootstrap/css/bootstrap.min.css'
import './assets/bootstrap/js/bootstrap.min.js'

到此为止任务完成.

二.完成登录页的迁移

完成步骤：

  1.将原有的html页面container部分移至login.vue的template
  2.将原有的css文件内容移至login的style内
  3.将原有的js方法，改写成vue的methods
  4.登入成功跳转到index首页