//在此之前先安裝less 就不說了
npm install sass-resources-loader --save-dev  //下載

然後在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下程式碼：
path.resolve   //改為自己的程式碼目錄

 function lessResourceLoader() {
        var loaders = [
            cssLoader,
            'less-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        path.resolve(__dirname, '../src/assets/styles/common.less'),
                    ]
                }
                        }
        ];
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }

然後後面將 return{} 塊中的 less: generateLoaders('less') 替換成上面自定義的函式 less: lessResourceLoader()   //就行了
 

//之前用過less 但是用的都是小部分功能，少點命名而已 這次用了全域性變數還是要記下的 less不能直接通用要用sass的方法

npm install vuex --save  //安裝vuex
//main.js中寫入
import Vuex from 'vuex'
Vue.use(Vuex)


在src 下建立資料夾store；建立store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    increment:state => state.count ++,
    decrement:state => state.count --,
    increment2 (state, n) {
      state.count += n;
    },
    increment3 (state, payload) {
      state.count += payload.price + payload.count;
    }
  }
})


//然後再在main.js中引入檔案與store
import store from './store/store'

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

//然後就可以使用啦
template>
  <div class="hello">
    <div>
      {{ count }}
      <p>
        <button @click="increment">直接改變值</button>
        <button @click="decrement">觸發vuex事件</button>
        <button @click="decrement2">觸發vuex傳值事件</button>
        <button @click="decrement3">觸發vuex傳入物件事件</button>
        <input v-model="message" placeholder="edit me">
      </p>

    </div>
  </div>
</template>

<script>
  export default{
    name:'sildebar',
    data(){
      return{
        message:10,
      }
    },
    methods:{
      increment(){    //直接改變值
        this.$store.state.count = 111
      },
      decrement(){      //觸發vuex事件
        this.$store.commit('decrement')
      },
      decrement2(){      //出發傳值事件
        console.log(typeof this.message)
        this.$store.commit('increment2', this.message);
      },
      decrement3(){     //觸發傳入物件事件
        this.$store.commit({
          type: 'increment3',
          price: 10,
          count: 8
        })
      }

    },
    computed:{
      count(){
        return this.$store.state.count
      },
    }


  }

</script> 
 

vuex 使用連結  https://www.cnblogs.com/songrimin/p/7815850.html    vuex 詳解

less全域性變數  http://www.cnblogs.com/lcosima/p/9556372.html

 window.AccessToken = JSON.parse(sessionStorage.getItem("AccessToken")); //獲取請求頭
sessionStorage.setItem('AccessToken',JSON.stringify(response.data.Data.AccessToken));   //使用set方法放入請求頭 不然會消失的  鍵值對格式
 

 window.AccessToken = JSON.parse(localStorage.getItem("AccessToken")); //獲取請求頭
 localStorage.setItem('AccessToken',JSON.stringify(response.data.Data.AccessToken));   
 //使用set方法放入請求頭 不然會消失的  鍵值對格式

    computed: {
    listenshowpage1() {
      //進行監測，因為他不會自動更新
      console.log("許可權id改變啦");
      console.log(this.$store.state.prowerId);
      return this.$store.state.prowerId; //檢測vuex屬性計算
    }
  },
  watch: {
    listenshowpage1: function(a, b) {  //進行檢測 如果從子選單變為新增頂級選單就賦值為空
        if(a==""){
            console.log("選單新增許可權");
        }else {
            console.log("許可權編輯")
        }
    }
  }