Vue-router

是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

安装：npm install vue-router --save

通过以上步骤，我们已经安装好了vue-router，但是在vue-cli中我们如何使用呢？

首先，我们需要在main.js文件中导入并注册vue-router:

//ES6语法导入

import VueRouter from 'vue-router'

//注册

Vue.use(VueRouter)

然后便是实例化：

const router = new VueRouter({

mode: 'history',

routes:[

  {path: '/', component:DemoHome},

  {path: '/about', component:DemoAbout},

  {path: '/contact', component:DemoContact}

]

})

path: 是路由的路径。

component: 是该路由需要渲染的组件。

Element-ui

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

安装：npm i element-ui -S

在main.js中引入和注册

引入：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

注册：

Vue.use(ElementUI);

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装：

npm install vuex --save

在main.js中引入和注册

引入：

import Vuex from 'vuex‘

注册：

Vue.use(Vuex)

VueAwesomeSwiper

轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，随着vue的广泛使用，其中插件swiper也算是使用的比较频繁的插件。

安装：

npm install vue-awesome-swiper --save

在main.js中引入和注册

引入：

import VueAwesomeSwiper from 'vue-awesome-swiper'

注册：

Vue.use(VueAwesomeSwiper)

Echarts

实现数据界面可视化

安装：

npm install echarts --save

在main.js中配置：

import echarts from 'echarts' //引入echarts

Vue.prototype.$echarts = echarts //引入组件

jQuery

安装：npm install jquey

在main.js中引入：

import $ from 'jquery'

这是jquery不是全局的，如果要使用在每一个模块中需要import 。比较麻烦，下面是设置jquery为全局的方法：

修改webpack.base.conf.js(在build文件下)两个地方：

var webpack=require('webpack');

在module.exports的里面加入

plugins: [

    new webpack.optimize.CommonsChunkPlugin('common.js'),

    new webpack.ProvidePlugin({

        jQuery: "jquery",

        $: "jquery"

    })

]

bootstrap

想要在vue中引入bootstrap，引入的时候需要按照如下的步骤进行。

1、引入jquery(上一步骤即可)

2、引入bootstrap

安装：

npm install bootstrap --save-dev

把bootstrap库的js和css放到assets文件夹下，在webpack.base.conf.js的module.exports = {}中的resolve中增加

'bootstrap':resolve('src/assets/bootstrap'),

在main.js中引入：

import 'bootstrap/js/bootstrap.js'

import 'bootstrap/css/bootstrap.css'

axios

安装：npm install axios --save-dev

在main.js中引入注册：

引入：

importaxiosfrom'axios'

注册：

Vue.prototype.$http= axios