今天整理文件突然發現了一份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下載原始碼（無法FQ的做法），
  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
```