1.安装项目相关指令

1.1安装脚手架
vue install @vue/cli -g 安装脚手架4.0
vue install vue-cli -g 安装脚手架2.0

1.2安装脚手架2.0项目
vue init webpack demo  安装脚手架2.0项目

1.3安装router 路由
npm install vue-router 安装router
vue add router

1.4安装axios
npm install axios安装axios

1.5安装vuex/store存储 功能类似于cookie但是更加强大
npm install vuex 安装store存储
vue add vuex

执行代码 
npm run dev

2 vue项目

2.1 vue组件使用

1.src-》components 常见vue组件文件
<!--这里写html-->
<template>
<div>

</div>
</template>

<script>
// 这里写组件的配置
export default {
    
}
</script>
<!--这里写css-->
<style scoped>

</style>

2.2组件的调用（A组件使用B组件）

A组件中
<script>
1.引入B组件
import nev from './components/nev'
export default {
  name: 'App',
  components:{
    2.注册B组件
    nev,
  },


}
</script>

3.路由的使用

3.1配置路由

可在安装vue项目时，自动安装
也可
vue install vue-router 安装router
vue add router

3.2.组件使用

1.src-》components 常见vue组件文件
<!--这里写html-->
<template>
<div>

</div>
</template>

<script>
// 这里写组件的配置
export default {
    
}
</script>
<!--这里写css-->
<style scoped>

</style>

3.2路由配置

router->index.js
1.引入组件 @代表跳到当前文件夹
import HelloWorld from '@/components/HelloWorld'
import home from '@/components/home'
2.路由配置
  routes: [
{
  path: '/',
  name: 'HelloWorld',
  component: HelloWorld
},
{
  path:'/home',
  name:'home',
  component:home
},
]
3.main.js中引入路由
import router from './router'
4.main.js中注册路由
new Vue({ 
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4.vuex/store 状态管理模式

4.1vuex安装

npm install vuex 安装store存储
vue add vuex  
main.js中引入
import store from './store'

4.2结构解析

export default new Vuex.Store({
  // data
  state: {
  },
  // 方法同步的 methods
   // mutations里面所有的函数 在调用的时候 必须通过commit来进行
  mutations: {
    // 所有的方法都是两个参数 1.state 2.vue传递过来的数值
    changName(state,value){
      state.name = value
    },
    changAge(state,value){
      state.age = value;
    },
    changeRoomList(state,value){
      state.roomList = value
    }
  },
  // 方法异步的 必须通过dispatch来调用
  actions: {
    getRoomList(store){
      return new  Promise(function(resolve,reject){
        console.log('22222222222')
        setTimeout(() => {
          store.commit('changeRoomList',[{name:'lol'},{name:'英雄联盟'}])
        }, 3000);
      })
    }
  },
  // 相当于组件中的computed属性
  getters:{

  },
  // 相当于组件中的components
  modules: {
  }
})

4.3逐个解析

4.3.1 state

state与组件中的data作用相等
组件使用state步骤
在组件中
1.引入mapState
mapState 相当于 store文件中 State
import { mapState , mapMutations ,mapActions } from 'vuex'

2.在computed中注册
computed: {
    //2. 注册
    ...mapState(['name','age','roomList'])
},

3.使用与组件使用data中的初始值方法一样

4.3.2 mutations

this.$store.commit('changName','王五')

// 方法同步的 methods 
//用于改变state中的值
// mutations里面所有的函数 在调用的时候 必须通过commit来进行
     mutations: {
    // 所有的方法都是两个参数 1.state 2.vue传递过来的数值
    changName(state,value){
      state.name = value
    },
    changAge(state,value){
      state.age = value;
    },
    changeRoomList(state,value){
      state.roomList = value
    }
  },

组件使用
1. import { mapMutations } from 'vuex'
2.method注册
methods: {
    // mutations里面所有的函数 在调用的时候 必须通过commit来进行
    // 注册changName方法
    ...mapMutations(['changName','changAge']),
    
},
3.调用方法
this.$store.commit('changName','王五')
// mutations里面所有的函数 在调用的时候 必须通过commit来进行

4.3.3 actions

this.$store.dispatch('getRoomList')

  // 方法异步的 必须通过dispatch来调用
  actions: {
    getRoomList(store){
      return new  Promise(function(resolve,reject){
        console.log('22222222222')
        setTimeout(() => {
          store.commit('changeRoomList',[{name:'lol'},{name:'英雄联盟'}])
        }, 3000);
      })
    }
  },
组件调用actions中的方法
import {mapActions } from 'vuex'
...mapActions(['getRoomList']),
this.$store.dispatch('getRoomList')

4.3.4 getters

  // 相当于组件中的computed属性
  getters:{

  },

4.3.5 modules 不常用

// 相当于组件中的components

modules: { }

5.axios

5.1 axios安装配置

 npm install axios安装axios

5.2 config=>配置代理表

proxyTable: {
  '/douyu':{
    target:"" ,
    changeOrigin:true ,
    pathRewrite:{
      '^/douyu':""
    }
  }
}

5.3.创建api.js专门放请求数据的

import axios from 'axios'


function sendGetRequest(url , param){
    console.log(param.params.offset)
    return new Promise(function(resolve , reject){
        axios.get(url , param).then(function(data){
            resolve(data)
        },function(err){
            reject(err)
        })
    })
}
// 发起post请求
function sendPostRequest(url , params){
    return new Promise(function(resolve , reject){
        axios.get(url , params).then(function(data){
            resolve(data)
        },function(err){
            reject(err)
        })
    })
}


var baseUrl = '/douyu'
export default {
    // 获取首页数据
    getHomeData( param){
        // console.log(param.offset)
       return sendGetRequest(baseUrl,{'params':param})
    }
}

5.4 main.js中引入

import api from './API/api.js'
Vue.prototype.api = api

5.5使用

this.api.getHomeData(info).then(
data=>{
    
},err=>{
    
})

6.类似awesome的使用

1.将font-awesome-4.7.0文件放到项目内
2.main.js中引入数据
import  '@/assets/font-awesome-4.7.0/css/font-awesome.css'