//在此之前先安装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("权限编辑")
}
}
}