vue新手入门指导，一篇让你学会vue技术栈，本人初学时候的文档

今天整理文档突然发现了一份md文档，打开一看 瞬间想起当年学习vue的艰难路，没人指导全靠自己蒙，下面就是md文档内容，需要的小伙伴可以打开个在线的md编译器看一看，我相信不管是新人还是老人  入门总是可以的（这只是初学时候做的笔记，如果有哪里写错了还望联系我修改，免得误导其他新人，本人qq：421217189）

# vuex
##### 五大模块：
## state 数据
```
在vuex中调用：state.xxx;

组件内使用：this.$store.state.xxxx

mapstate函数:
computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])
```

## mutation 同步方法
```
在vuex中调用 store.commit('func',{arguments}) 第一个为方法名，第二个为载荷（参数），为一个对象。
在组件调用  this.$store.commit('func',{arguments}) 同上，
mapMutation:
methods:{
  ...mapMutation([
    "func",
    func1:"func"
    ])
}
```

## action 异步方法
```
异步方法调用同步方法，而不是直接去更改state的值！
例如：
mutation:{
  mutationfunc(){
    //dosomething
  }
}
action:{
/*  actionfun(store){
    store.commit('mutationfunc')
  }*/
简写：
es6解构
actionfun({commit}){
  commit("mutationfunc");
}
}

action 触发方式：
   store里面：store.dispatch('actionfun');
  组件里面：this.$store.dispatch('actionfun');
  mapActions:
  methods:{
    ...mapActions([
      'actionfun',
      func:"actionfun"
    ])
  }
```

## getters 过滤
```
  与vue过滤属性几乎一致：调用方法：
  store：store.getters.doneTodos
  组件里面：this.$store.getters.doneTodos
  mapGetters:
  computed:{
    ...mapGetters([
      'getters',
      othergetters:"getters",
    ])
  }
```
## Module vuex分模块
```
  例子：
  new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
调用：store.state.a; 可以获得moduleA的状态
组件内 this.$store.state.a;
对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。
对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点为context.rootState：
对于模块内部的 getter，根节点状态会作为第三个参数暴露出来
默认情况下： action、mutation 和 getter 是注册在全局命名空间的（也就是调用时候和全局一样调用），可以通过namespaced: true（在module模块命名空间内加），设置所有action、mutation、getter设置为命名空间的。通过调用命名空间才可以触发，
在命名空间模块内访问全局内容（Global Assets）（官网）
```
## 模块动态注册的方法：
```
// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})

// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})
之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。

```
## 模块卸载的方法：store.unregisterModule(moduleName)
## vuex api:https://vuex.vuejs.org/zh-cn/api.html

-
-
-
-
-

# vue-router :
## 动态路由匹配
```
使用冒号
例子：
const router = new VueRouter({
  router:[
    {
      path:'/index/:id',component:index,
    }
  ]
})

可以通过beforeRouteUpdate(to,from,next)钩子来获取路由变化

```
## 嵌套路由：
```
例子：
const router = new VueRouter({
  router:[
    {
      path:'/father',
      component:index,
      children:[
        {
          //地址是：/father/children
          path:'children',
          component:children,
        }
      ]
    }
  ]
})
以 / 开头的嵌套路径会被当作根路径。
```
## 操作浏览器地址
```
 router.push        组件内  this.$router.push        导航到指定的url（会在历史记录中添加当前url）
 router.replace     组件内  this.$router.replace     导航到指定的url（不会在历史记录中添加当前url）
 router.go          组件内  this.$router.go          后退或者前进多少步

 以上方法同js中window.history
```
## 命名视图
```
<router-view name = "a"/>
可以在路由中设置渲染到指定视图
const router = new VueRouter({
  router :[
    {
      path:"/zhangsan",
      component:[
        a:A-view,
        default:default-view,
      ]
    }
  ]
})
```
## History 模式: mode: 'history'

## vue-router 守卫（生命周期函数）：
```
 全局导航：前面都需要加router
 一、beforeEach ： 前置守卫；参数：
  to: Route: 即将要进入的目标 路由对象
  from: Route: 当前导航正要离开的路由
  next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
二、beforeResolve 在所有组件内守卫和异步路由组件被解析之后
三、afterEach 全局后置钩子

组件内导航：
beforeRouteEnter：在实例创建以前调用，
beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用
beforeRouteLeave 导航离开该组件的对应路由时调用
```
 ## 完整的导航解析流程

* 导航被触发
* 在失活的组件里调用离开守卫。
* 调用全局的 beforeEach 守卫。(beforeEach)
* 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
* 在路由配置里调用 beforeEnter。
* 解析异步路由组件。
* 在被激活的组件里调用 beforeRouteEnter。
* 调用全局的 beforeResolve 守卫 (2.5+)。
* 导航被确认。
* 调用全局的 afterEach 钩子。
* 触发 DOM 更新。
* 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
## 滚动行为
```
const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
     return { x: 0, y: 0 }
  }
})
```
## 路由懒加载
```
const Foo = () => import('./Foo.vue')
```
## sass转化
```
npm install node-sass --save-dev
npm install sass-loader --save-dev
{
         test: /\.scss$/,
         loaders: ["style", "css", "sass"]
},
```
## vue+axios
```
在vue中axios不支持use可以使用一下两种方法进行写入：
1\Vue.prototype.$http = axios

2\在 Vuex 中封装
  actions: {
    // 封装一个 ajax 方法
    saveForm (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.test02
      })
    }
  }

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.request(config)
axios.delete(url[, config])
axios.head(url[, config])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
//多重并发
function getUserAccount(){
    return axios.get('/user/12345');
}

function getUserPermissions(){
    return axios.get('/user/12345/permissions');
}

axios.all([getUerAccount(),getUserPermissions()])
    .then(axios.spread(function(acc,pers){
        //两个请求现在都完成
    }));
//拦截器

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);
});
```
## 预写： vue-devtools google调试vue插件
```
  1、github下载源码（无法翻墙的做法），
  https://github.com/vuejs/vue-devtools
  2、下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖
  3、执行npm run build，编译源程序。
  4、修改shells/chrome目录下的mainifest.json 中的persistent为true
  5、打开谷歌浏览器的设置--->扩展程序，并勾选开发者模式
  6、然后将刚刚编译后的工程中的shells目录下，chrome的整个文件夹直接拖拽到当前浏览器中，并选择启用，即可将插件安装到浏览器。
  7、入口文件加上Vue.config.devtools = true

  8、打开一个已有的vue项目，运行项目，然后在浏览器中--->设置--->更多工具--->开发者工具，进入调试模式，点击vue
```
## github提交项目流程
```
1 、第一步： 建立本地仓库cd到你的本地项目根目录下，执行git命令
2、git init
3、git add .
4、git commit -m “注释"
5、git log（如果有则添加缓存区成功）
6、git show (检测是否添加的对)
7、git remote add origin github地址
8、git push -f origin master
```
## github增加内容
```
1、git add .
2、git commit
3、git push -f origin master
```