vue开发项目，核心知识点总结

  vue   框架
  单页面

  UI框架 
   pc elementUI  iview 
   移动端 vantUI  

   vue 全家桶
   vue + vue-router +axi os +vuex 

   常用vue-cli 脚手架生成项目  使用打包工具 webpack  (nodesjs)
   版本管理  git工具， 上传到码云或者GitHub  



   vue 组件  
   组件之间 通信  
语法
{{}}       v-bind:  (:)     数据绑定

v-if  v-else-if v-else  判断是否显示
v-show 判断是否显示

v-for  循环
v-on:click   (@click)  事件
v-model   表单数据绑定
实例
new Vue({
    // 选项
  })

  vue单页面 实例的生命周期
  beforeCreate   el 和 data 并未初始化
  created   完成了 data 数据的初始化，el没有
  beforeMounte   完成了 el 和 data 初始化
  mounted 完成挂载
  beforeUpdate  视图页面更新前
  updated 视图页面更新后
  beforeDestroy 视图页面销毁前
  destroyed 视图页面销毁后

  el 
  data  数据
  methods 方法
  computed 计算属性
  watch 监听器
  v-bind:class (:class)
  v-bind:style(:style)



  vuex   状态管理器 
  new Vuex.Store({
    state: {
      count: 1
    },
    mutations: {
      increment (state) {
        // 变更状态
        state.count++
      }
    },
    getters: {
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        }
      }
    actions:{
        increment (context) {
            context.commit('increment')
          }
    }
  })
五大核心
state  数据源   store.state
getters 条件过滤方法 处理数据源   store.getters.doneTodos 
mutations （唯一）改变数据源的方法 (同步)  使用方法 store.commit
actions 异步操作 （调用mutations修改数据源） store.dispatch('increment')
modules  分割成模块

模块举例：
const moduleA = {
    state: () => ({ ... }),
    mutations: { ... },
    actions: { ... },
    getters: { ... }
  }
  
  const moduleB = {
    state: () => ({ ... }),
    mutations: { ... },
    actions: { ... }
  }
  
  const store = new Vuex.Store({
    modules: {
      a: moduleA,
      b: moduleB
    }
  })
  
  store.state.a // -> moduleA 的状态
  store.state.b // -> moduleB 的状态

  vue-router  路由管理器
  举例：
  new VueRouter({
    routes: [
      // 动态路径参数 以冒号开头
      { path: '/user/:id',name:'user' component: User }
    ]
  })

  beforeEach 全局前置守卫
  afterEach 全局后置守卫

  路由守卫
  beforeEnter

  组件内的守卫
  beforeRouteEnter
  beforeRouteUpdate
  beforeRouteLeave

  导航使用
  声明式导航
  <router-link to='/home'></router-link>
  编程式导航
  router.push('home')

  // 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }}) 
 获取参数 this.$route.params

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }}) 
获取参数   this.$route.query


axios  promise 的 HTTP

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });


  axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

  // 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(function(response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });
并发请求  多个请求同时执行
function getUserAccount() {
    return axios.get('/user/12345');
  }
  
  function getUserPermissions() {
    return axios.get('/user/12345/permissions');
  }
  
  axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread(function (acct, perms) {
      // 两个请求现在都执行完成
    }));

拦截器
    // 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });




  git 使用 github 码云 

  git add .   提交到暂存区
  git commint -m '上传本地版本库'

  git pull 拉取代码库的最新代码   远程版本库
  git push 上传代码到代码库 远程版本库
  git clone  'url' 克隆代码库