VUE2.0引入各依赖方法

1.Vue引入jquery

使用命令npm install jquery --save-dev 安装jquery。

--save-dev表示自动添加配置依赖到package.json文件的devDependencies中,开发环境

如果只加--save表示自动添加配置依赖到package.json文件的dependencies中，生产环境

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

var webpack = require('webpack')

和

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

在main.js中配置全局配置

import $ from 'jquery'

然后在组件中即可使用，引入bootstrap需要先引入jquery

2.Vue引入bootstrap

安装bootstrap，使用命令npm install bootstrap --save-dev

在main.js中添加如下内容：

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

3.引入vue-router

安装：npm install vue-router

在src下创建router.js或在src创建router/index.js的路由配置文件，内容如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

上边三个是必须的，示例配置如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Side from './components/Side'
import Content from './components/Content'
import Child2 from './components/Child2'
import Child3 from './components/Child3'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Side',
    component: Side,
    //redirect: '/content/side'  //重定向到Content组建
    alias: '/content/side'  //别名，即当访问/content/side与访问/一样
  },
  {
    path: '/content/:id', // 定义Test组件的访问路径
    name: 'Content', // 命个名，没有太大作用
    component: Content, // 指向真正的Test组件
    children: [
      {
        // 当 /user/:id/profile 匹配成功，
        // UserProfile 会被渲染在 User 的 <router-view> 中
        path: 'profile',
        component: Child2
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 会被渲染在 User 的 <router-view> 中
        path: 'posts',
        component: Child3
      }
    ]
  }
]

export default new VueRouter({
  routes
//（缩写）相当于 routes: routes
})

在main.js中引入路由配置

import router from './router'

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

此时即可在组件中直接使用，如

<router-link to="/">Go to Side</router-link>

4.引入Vuex

参考博文：http://blog.csdn.net/h5_queenstyle12/article/details/75386359

官方文档：https://vuex.vuejs.org/zh-cn/

安装npm install vuex

新建vuex/store.js，引入必须的依赖

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

state：简单将就是设置全局变量；组件读取state的值的最好方案就是在计算属性computed中使用

...mapState(['变量名'])获取

mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，接受 state 作为第一个参数。如需调用定义的mutation需要在组件的method中使用

...mapMutations(['方法名','方法名'])
getter：getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

getters基本用法：
比如我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100.我们首先要在store.js里用const声明我们的getters属性。 在组件的 计算属性computed中使用

...mapGetters(["count"])获取

action：actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。Action 函数接受一个与 store 实例

具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

如需调用定义的action需要在组件的method中使用
...mapActions(['方法名','方法名'])

module：当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 
state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割 

声明模块组：
在vuex/store.js中声明模块组，我们还是用我们的const常量的方法声明模块组。代码如下:
    const moduleA={
        state,mutations,getters,actions
    }
   
   
1
2
3
声明好后，我们需要修改原来 Vuex.Stroe里的值：
    export default new Vuex.Store({
        modules:{a:moduleA}
    })
   
   
1
2
3
在模板中使用
现在我们要在模板中使用count状态，要用插值的形式写入。
    <h3>{{$store.state.a.count}}</h3>
   
   
1
如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态。写法如下：
    computed:{
        count(){
            return this.$store.state.a.count;
        }
    },