yarn add vuex --save
npm install vuex --save

import Vue from 'vue'//var Vue = require('vue')
import Vuex from 'vuex'//var Vuex = require('vuex')
Vue.use(Vuex)

// 实例化Vuex，创建一个仓库
const store = new Vuex.Store({
    // 状态
    // 该库存数据的地方
    state: {
        // 状态值
        count: 0,
        author: 'lemon'
    },
    // 修改数据的方法
    mutations: {
        // 修改数据的第一个方法
        increment(state) {
            state.count++
        }
    }
})
// 暴露store仓库到`main.js`的根容器里面
export default store

// 引入仓库
import store from './configs/store.js'
// Root容器
let vm = new Vue({
  el: "#lemon",
  // 挂载路由
  router,
  // 挂载仓库
  store,
  // 把App组件挂载到#app的这个节点上
  render: h => h('router-view'),
})

beforeCreate() {
    // 来自于vuex仓库
    console.log(this.$store.state.author)
    // 来自于组件自定义
    console.log(this.title)
}

getters: {
    // 获取author的方法
    getAuthor(state) {
        return state.author + ' Yeah'
    },
    getCount(state) {
        return state.count
    }
}

computed: {
    // 从仓库里面去取值
    title(){
      return this.$store.getters.getAuthor
    }
}

// 修改数据的方法
mutations: {
    // 修改数据的第一个方法
    editCount(state) {
        state.count++
    },
    // 修改仓库中state中的author
    editAuthor(state, data) {
        state.author = data
    }
}

methods: {
    editAuthor() {
      console.log(this.$store);
      // 触发store里面的mutations，把store里面的author改为laotian
      this.$store.commit('editAuthor','laotian')
    }
}

const store = new Vuex.Store({
	state: {
		getSearchName: 'hello vuex, I am wscats',
	},
	//接受组件commit传过来的数据并保存到state中,this.$store.commit('changeSearchName', this.searchName);
	mutations: {
		changeSearchName: function(state, a) {
			state.searchName = a;
		},
	},
	//可以从组件调用此方法获取值，一般配合计算属性动态获取值
	//(1)return this.$store.state.searchName
	//(2)return this.$store.getters.getSearchName
	getters: {
		getSearchName: function(state) {
			return state.searchName;
		}
	}
})

const app = new Vue({
	store
}).$mount('#app')

this.$store.state.title = “wscats”

methods: {
	search() {
		this.$store.commit('changeSearchName', this.getSearchName);
	}
},

actions: {
	setChange(context, data) {
		context.commit('setCount', data)
		context.commit('settitle', data)
	},
	setNews(context, data) {
		context.commit('setNews')
	}
}

methods: {
	loadMore() {
		this.$store.dispatch("setNews")
	}
}

computed: {
	searchName() {
		return this.$store.state.searchName;
                //或者return this.$store.state.searchName
	}
},

getters: {
	getTitle(state) {
		//处理数据
		return state.title + "ed"
	}
}

computed: {
	title() {
		//直接获取状态
		//this.$store.state.title
                //通过getters获取状态
		return this.$store.getters.getTitle
	}
}

import { mapActions, mapState } from "vuex";
computed: {
    // 从仓库里面去取值
    title() {
      return this.$store.getters.getAuthor;
    },
    ...mapState({
      author: state => state.author,
    })
}

import 'swiper';//注意这里只是引入swiper.js
import '../node_modules/swiper/dist/css/swiper.css'//还要单独引入样式，找到node_modules单独把样式引进来

Vue.directive('cclick', {
	//bind就是先帮我们绑定，但不去执行这个test()函数，而updata则是绑定完后执行一次，后面每次更新都去执行一次
	bind: function(value) {
		var self = this;
		//指令的名字，不包含前缀 v-cclick:click="test()"中的cclick
		console.log(this.name)
		//指令的表达式，不包括参数和过滤器 v-cclick:click="test()"中的test()
		console.log(this.expression)
		//指令的参数 v-cclick:click="test()"中的click
		console.log(this.arg)
		this.el.addEventListener(this.arg, function(e) {
			self.expression.substring(0, self.expression.length - 2);
			//把test()转化为test，方便我们后面调用
			//console.log(self.expression.substring(0, self.expression.length - 2));
			//如果v-cclick:click="test"，注意test没有加括号的时候我们就可以这样写
			//self.vm[self.expression]()
			self.vm[self.expression.substring(0, self.expression.length - 2)]()
		});
	},
})
var demo = new Vue({
	el: '#demo',
	data: {
		name: 'wsscat'
	},
	methods: {
		test: function() {
			console.log("test test")
		}
	},
})

var demo = new Vue({
	el: '#demo',
	data: {
		msg: 'hello!',
		name: 'wsscat'
	},
	directives: {
		wsscat: {
			bind: function() {
				console.log("wsscat")
			},
			update: function(newValue, oldValue) {
				console.log('new:' + newValue);
				console.log('old:' + oldValue);
				this.el.style.color = 'blue';
				if(newValue == 'red') {
					this.el.style.color = 'red';
				} else if(newValue == 'yellow') {
					this.el.style.color = 'yellow';
				} else {
					this.el.style.color = 'green';
				}
			}
		}
	}
})

// ES6
import Aplayer from 'vue-aplayer'

new Vue({
    components: {
        Aplayer
    }
})

import Vue from 'vue'
import Aplayer from 'vue-aplayer'
let Player = Vue.component("Player",{
    template:`
        <aplayer autoplay
            :music="{
            title: '海阔天空',
            artist: 'Beyond',
            src: 'http://zhangmenshiting.qianqian.com/data2/music/3519cdb70c14a95076e8c006c7226963/599516462/599516462.mp3?xcode=6e6d59d18d378711cc3224dc97e4d7a9',
            pic: 'http://qukufile2.qianqian.com/data2/pic/88582702/88582702.jpg@s_1,w_150,h_150'
            }"
        />
    `,
    components:{
        Aplayer
    }
})
export default Player

import VueAPlayer from 'vue-aplayer'
VueAPlayer.disableVersionBadge = true

//定义组件
var wsscat = Vue.extend({
	template: "<div>I am wsscat</div>"
})
//注册组件
Vue.component('wsscat', wsscat)
var demo = new Vue({
	el: '#demo',
	data: {
		name: 'wsscat',
	}
})

components: {
	wsscatChild: 'wsscatChild'
}

components: {
	wsscatChild
}

var wsscatChild = Vue.extend({
	template: "<p>I'm child</p>"
})
var wsscatChildSecond = Vue.extend({
	template: "<p>I'm child2</p>"
})
//定义组件
var wsscat = Vue.extend({
	template: "<div>I'm wsscat<wsscat-child></wsscat-child><wsscat-Child-Second></wsscat-Child-Second><wsscat-child-third></wsscat-child-third></div>",
	replace: true,
	components: {
		//也可以这样写wsscatChild
		'wsscatChild': wsscatChild,
		'wsscatChildSecond': wsscatChildSecond,
		'wsscatChildThird': {
			template: "<p>I'm child3</p>"
		}
	}
})

var wsscat = Vue.extend({
        template: '#tpl',
        data: function() {
            return {
                name: 'Wsscat'
            }
        }
})

var wsscatChildSecond = Vue.extend({
	template: "<p>I'm child2, I like {{skill}}</p>",
	data: function() {
		return {
			skill: "javascript"
		}
	}
})

var wsscat = Vue.extend({
            template: '#tpl',
            props:['msg'],
            data: function() {
                return {
                    name: 'Wsscat'
                }
            }
})
// 注册
Vue.component('wsscat', wsscat)
        new Vue({
            el: '#demo',
            data: {
                name: 'wsscats'
            }
})

var wsscat = Vue.extend({
    template: "<input v-model='sweet' /><div>I'm wsscat<wsscat-child :test='sweet'></wsscat-child><wsscat-Child-Second></wsscat-Child-Second><wsscat-child-third></wsscat-child-third></div>",
    data:function(){
        return {
            sweet:"你好",
        }
    },
    replace:true,
    components: {
        //也可以这样写wsscatChild
        'wsscatChild': wsscatChild,
        'wsscatChildSecond': wsscatChildSecond,
        'wsscatChildThird': {
        	template:"<p>I'm child3</p>"
        }
    }
})

var wsscatChild = Vue.extend({
	props: ['test'],
	ready: function() {
		console.log(this.$parent);
	},
	template: "<p>I'm child, {{test}}</p><input v-model='test' />"
})

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签，组件选项，或一个函数
  // 必须 Return 上述其中一个
  'div',
  // {Object}
  // 一个对应属性的数据对象
  // 您可以在 template 中使用.可选项.
  {
    // (该节点的属性值)
  },
  // {String | Array}
  // 子节点(VNodes). 可选项.
  [
    createElement('h1', 'hello world'),
    createElement(MyComponent, {
      props: {
        someProp: 'foo'
      }
    }),
    'bar'
  ]
)

<div id="app">
</div>

new Vue({
	el: '#app',
	render: function(createElement) {
		let a = 1;
		return createElement('div', {
			style: {
				color: 'red',
				fontSize: '14px'
			}，
                        //注意class是關鍵詞
			'class': {
				foo: true,
				bar: false
			}
		}, [
			createElement('h' + a, 'render函數'),
			createElement('p', {
				style: {
					color: 'blue',
					fontSize: '12px'
				}
			}, [
				createElement('span', 'Hello Wscats'), '!'
			]),
		])
	}
})

new Vue({
	el: '#app',
	render: function(createElement) {
		return createElement('div',
			Array.apply(null, {
				length: 20
			}).map(function() {
				return createElement('p', 'hi')
			})
		)
	}
})

let abc = Vue.extend({
	template:"<p>wscats</p>"
})
//or// let cba = require('./app/cba.vue')
new Vue({
	el: '#app',
	render: function(createElement) {
		return createElement(abc)
	}
})

new Vue({
	el: '#app',
	render: function(createElement) {
		return createElement('h1', 'hello world')
	},
})

new Vue({
	el: '#app',
	data: {
		items:[{
			name:'wscat'
		},{
			name:'autumn'
		},{
			name:'eno'
		}]
	},
	render: function(createElement) {
		if(this.items.length) {
			return createElement('ul', this.items.map(function(item) {
				return createElement('li', item.name)
			}))
		} else {
			return createElement('p', 'No items found.')
		}
	}
})

export default {
  data() {
//...
watch: {
    $route: function(to, from) {
      this.$route.params;
      console.log("路由变化了");
    }
  }
};

Vue.component("xheader", {
    template: `
        <header :style="{border:'1px solid red'}">头部组件</header>
    `
})

// 实现异步加载js文件
function load(componentName, path) {
    return new Promise(function (resolve, reject) {
        var script = document.createElement('script');
        script.src = path;
        script.async = true;
        script.onload = function () {
            var component = Vue.component(componentName);
            if (component) {
                resolve(component);
            } else {
                reject();
            }
        };
        script.onerror = reject;
        document.body.appendChild(script);
    });
}

new Vue({
    el: "#demo",
    template: `
        <div>
            <p>{{name}}</p>
            <xheader></xheader>
        </div>
    `,
    data: {
        name: "组件"
    },
    components: {
        xheader: function (resolve, reject) {
            // 这里可以用异步方法实现异步加载组件
            setTimeout(function () {
                load('xheader', 'xheader.js').then(resolve, reject);
            }, 3000)
        }
    }
})

npm install better-scroll --save
//接下来就可以在代码中引入了，webpack等构建工具都支持从node_modules里引入代码：
import BScroll from 'better-scroll'

import BScroll from "better-scroll";
export default {
    methods: {
        // 加载数据
        loadMore() {
            this.$axios
                .get("/api/container/getIndex", {
                    params: {}
                })
                .then(response => {
                    this.$nextTick(() => {
                        if (!this.scroll) {
                            this.scroll = new BScroll(this.$refs.list, {
                                click: true,
                                scrollY: true,
                                pullUpLoad: {
                                    threshold: -30 // 当上拉距离超过30px时触发 pullingUp 事件
                                }
                            });
                            this.scroll.on("pullingUp", () => {
                                // 上拉刷新
                                // 做些事情
                                this.scroll.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
                            });
                            this.scroll.on("scrollEnd", () => {
                                // 滚动到底部
                                if (this.scroll.y <= this.scroll.maxScrollY) {
                                    this.loadMore();
                                }
                            });
                        } else {
                            // 这里触发this.scroll刷新，不然如果异步数据更新的话，this.scroll不刷新会置顶回去
                            this.scroll.refresh();
                        }
                    });
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }
}

this.scroll.on("scrollEnd", () => {
    // 滚动到底部
    if (this.scroll.y <= this.scroll.maxScrollY + 50) {}
});

this.scroll.on("scrollEnd", () => {
    // 滚动到底部
    if (this.scroll.y <= this.scroll.maxScrollY) {
        this.loadMore();
    }
})

this.scroll.on("pullingUp", () => {
    console.log("上拉刷新");
    // 做些事情
    this.scroll.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
});

this.$nextTick(() => {
    if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.list, {})
    }else{
        this.scroll.refresh();
    }
})

destoryed() {
    this.scroll.refresh();
    this.scroll = null;
}

this.scroll.on("touchEnd", pos => {
    // 下拉动作
    if (pos.y > 32) {
        this.loadMore("down");
    }
});

var Vue = require("vue");
var _ = require("lodash");

new Vue({
    el: "#demo",
    template: `
		<div>
			<input v-model="search" />
			<select v-model="key">
				<option value="user">user</option>
				<option value="age">age</option>
			</select>
			<ul>
				<li v-for="arr in arrss">name:{{arr.user}}  age:{{arr.age}}</li>
			</ul>
		</div>
	`,
    data: {
        search: "",
        //默认进行名字筛选
        key: "user",
        arrs: [{
            'user': 'wscats',
            'age': 18,
        }, {
            'user': 'oaoafly',
            'age': 16,
        }, {
            'user': 'yao',
            'age': 14,
        }, {
            'user': 'eno',
            'age': 99,
        }]
    }
})

computed: {
    arrss() {
        var output;
        if (this.search) {
            //可以传对象或者根据匿名函数的条件进行筛选结果
            output = _.filter(this.arrs, (item) => {
                //遍历每项字符串
                if (_.isString(item[this.key])) {
                    return item[this.key].indexOf(this.search) != -1;
                } else {
                    //数字强制转换为字符串
                    return (item[this.key] + "").indexOf(this.search) != -1;
                }
            })
        } else {
            output = this.arrs
        }
        return output;
    }
}

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(an_obj)); // console: ['2', '7', '100']

// getFoo is property which isn't enumerable
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 1;

console.log(Object.keys(my_obj)); // console: ['foo']

var obj= {}
    Object.defineProperty(obj,"name",{
      value:'wsscat'
})
console.log(obj.name);//wsscat

var obj = {}
Object.defineProperty(obj, "name", {
    set: function (newValue) {
        console.log('newValue:' + newValue)
    },
    get: function () {
        console.log("getValue:")
        return '你已经成功取值'
    }
})
obj.name = 'wsscat' //log: newValue:wsscat
console.log(obj.name) //log: getValue:你已经成功取值

var obj = {
    age: 1,
    skill: 'js',
    name: 'autumns',
    obj: {
        num: 1
    }
}

function observe(obj) {
    //判断对象的自属性是否对象，如果时对象继续执行监听
    if (!obj || typeof obj !== 'object') {
        return;
    }
    Object.keys(obj).forEach(function (key) {
        //console.log(key + '=>' + obj[key]);
        //遍历监听
        defineProperty(obj, key, obj[key]);
    })
}

function defineProperty(obj, key, val) {
    observe(val); //监听子属性，如果子属性也是对象，继续监听
    Object.defineProperty(obj, key, {
        set: function (newValue) {
            console.log('newValue:' + newValue);
            //设置新值
            val = newValue;
        },
        get: function () {
            console.log("getValue:" + val);
            //返回val设置对应属性值
            return val;
        }
    })
}
observe(obj); //对对象遍历并监听每个属性值的变化
obj.obj.num = 2; //log: newValue:2 监听子属性
obj.name = 'wsscat' //log: newValue:wsscat
console.log(obj.name) //log: getValue:你已经成功取值

function node2Fragment(el) {
    var fragment = document.createDocumentFragment(),
        child;
    // 将原生节点拷贝到fragment
    while (child = el.firstChild) {
        //console.log(el.firstChild)
        //console.log(child)
        fragment.appendChild(child);
    }
    return fragment;
}

compileElement: function (el) {
    var childNodes = el.childNodes,
        me = this;
    [].slice.call(childNodes).forEach(function (node) {
        var text = node.textContent;
        var reg = /\{\{(.*)\}\}/;
        //<p>{name}<p>
        if (me.isElementNode(node)) {
            me.compile(node);
        }
        //{name}
        else if (me.isTextNode(node) && reg.test(text)) {
            me.compileText(node, RegExp.$1);
        }
        //<p><span>{{name}}</span></p>
        if (node.childNodes && node.childNodes.length) {
            me.compileElement(node);
        }
    });
}

module.exports = {
    // 基本路径
    baseUrl: '/',
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // use the full build with in-browser compiler?
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    compiler: false,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {},
    // vue-loader 配置项
    // https://vue-loader.vuejs.org/en/options.html
    vueLoader: {},
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // 是否启用dll
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
    dll: false,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        // proxy: null, // 设置代理
        // 配置多个代理
        proxy: {
            "/api": {
                target: "<url>",
                ws: true,
                changeOrigin: true
            },
            "/foo": {
                target: "<other_url>"
            },
            before: app => {}
        },
        // 第三方插件配置
        pluginOptions: {
            // ...
        }
    }
}

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
    data: {
        title: 'Hello World'
    },
    template: `<div @click='testClick'>{{title}}</div>`,
    methods: {
        testClick() {
            console.log('Hello World')
        }
    }
})

// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
    if (err) throw err
    console.log(html)
    // => <div data-server-rendered="true">Hello World</div>
})

// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer.renderToString(app).then(html => {
    console.log(html)
    // => <div data-server-rendered="true">Hello World</div>
}).catch(err => {
    console.error(err)
})

// await和async
;(async (renderer) => {
    let html = await renderer.renderToString(app)
    console.log(html)
})(renderer)

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
    const app = new Vue({
        data: {
            url: req.url
        },
        template: `<div>访问的 URL 是： {{ url }}</div>`
    })

    renderer.renderToString(app, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error')
            return
        }
        res.end(`
            <!DOCTYPE html>
            <html lang="en">
                <head><title>Hello</title></head>
                <body>${html}</body>
            </html>
        `)
    })
})

server.listen(8080)

const Vue = require('vue')
const fs = require('fs')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync('./index.template.html', 'utf-8')
})
server.get('*', (req, res) => {
    const app = new Vue({
        data: {
            url: req.url
        },
        template: `<div>访问的 URL 是： {{ url }}</div>`
    })
    // 我们可以通过传入一个"渲染上下文对象"，作为 renderToString 函数的第二个参数，来提供插值数据：
    renderer.renderToString(app, {
        // 页面 title 将会是 "Hello"
        title: 'hello',
        // meta 标签也会注入
        meta: `
          <meta charset="utf-8" />
        `
    }, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error')
            return
        }
        res.end(html)
    })
})
server.listen(8080)

const Vue = require('vue')
module.exports = function createApp(context) {
    // 为每个请求创建一个新的根 Vue 实例
    return new Vue({
        data: {
            url: context.url
        },
        template: `<div>访问的 URL 是： {{ url }} </div>`
    })
}

const fs = require('fs')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync('./index.template.html', 'utf-8')
})
// 导入封装好server.js
const createApp = require('./app')
server.get('*', (req, res) => {
    const context = { url: req.url }
    // 为每个请求创建新的应用程序实例，避免导致交叉请求状态污染
    const app = createApp(context)
    // 我们可以通过传入一个"渲染上下文对象"，作为 renderToString 函数的第二个参数，来提供插值数据：
    renderer.renderToString(app, {
        // 页面 title 将会是 "Hello"
        title: 'hello',
        // meta 标签也会注入
        meta: `
          <meta charset="utf-8" />
        `
    }, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error')
            return
        }
        res.end(html)
    })
})
server.listen(8080)

import Vue from 'vue'
import App from './App.vue'

// 导出一个工厂函数，用于创建新的
// 应用程序、router 和 store 实例
export function createApp () {
  const app = new Vue({
    // 根实例简单的渲染应用程序组件。
    render: h => h(App)
  })
  return { app }
}

import { createApp } from './app'

// 客户端特定引导逻辑……

const { app } = createApp()

// 这里假定 App.vue 模板中根元素具有 `id="app"`
app.$mount('#app')

import { createApp } from './app'

export default context => {
  const { app } = createApp()
  return app
}

npm install axios

import axios from 'axios';
Vue.prototype.$http = axios;

this.$http.get("http://www.tuling123.com/openapi/api", {
    params: {
        key: "c75ba576f50ddaa5fd2a87615d144ecf",
        info: "先有鸡还是先有蛋"
    },
    header:{}
}).then((data) => {
    console.log(data);
    //success callback
}, (err) => {
    //error callback
})

import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//全局更改
import qs from "qs";//配合qs模块转化post请求的参数，记得先npm install qs
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

export default {
    this.$axios({
      method: "post",
      //headers: { "content-type": "application/x-www-form-urlencoded" },//局部更改
      url: "http://localhost:3000/users/test",
      data: this.$qs.stringify({
        name: ""
      })
    }).then(res => {
      console.log(res);
    });
  }
};

module.exports = {
    baseUrl: '/',
    devServer: {
        proxy: {
            '/api': {
                target: 'https://m.nubia.com',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
        }
    }
}

this.$axios({
    method: "get",
    url: "/api/show/page/phoneType",
    //    /api/show/page/phoneType代替https://m.nubia.com/show/page/phoneType
}).then(res => {
    console.log(res);
});

import axios from 'axios'
import qs from 'qs'

axios.interceptors.request.use(config => {
    // loading 做loading的加载动画
    return config
}, error => {
    return Promise.reject(error)
})

axios.interceptors.response.use(response => {
    return response
}, error => {
    return Promise.resolve(error.response)
})

function checkStatus(response) {
    // loading
    // 如果http状态码正常，则直接返回数据
    if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {

        return response
        // 如果不需要除了data之外的数据，可以直接 return response.data
    }
    // 异常状态下，把错误信息返回去
    return {
        status: -404,
        msg: '网络异常'
    }
}

function checkCode(res) {
    // 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户
    if (res.status === -404) {
        alert(res.msg)
    }
    if (res.data && (!res.data.success)) {
        alert(res.data.error_msg)
    }
    return res
}

export default {
    post(data, url) {
        return axios({
            method: 'post',
            url: url,
            data: qs.stringify(data),
            timeout: 10000,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
        }).then(
            (response) => {
                return checkStatus(response)
            }
        )
    },
    get(url, params) {
        return axios({
            method: 'get',
            baseURL: 'https://cnodejs.org/api/v1',
            url,
            params, // get 请求时带的参数
            timeout: 10000,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        }).then(
            (response) => {
                return checkStatus(response)
            }
        ).then(
            (res) => {
                return checkCode(res)
            }
        )
    }
}

{
    test: /\.js$/,
    // 除了node_modules|bower_components所有的js文件都用babel-loader处理
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        // options: {
        //     presets: ['@babel/preset-env']
        // }
    }
}

import http from "../libs/http.js";
export default {
  data() {
    return {
      topics: null,
      topic: null
    };
  },
  methods: {
    async getData() {
      // 两个异步请求变为同步执行，也不需要再
      // 执行顺序是 topics -> -----------(2秒后)  -> topic
      // topics异步
      const topics = await http.get("https://cnodejs.org/api/v1/topics", {
        page: 1,
        tab: "ask",
        limit: 10,
        mdrender: false
      });
      console.log("topics");
      this.topics = topics.data.data;
      // setTimeout异步
      const test = await (() => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("-----------");
          }, 2000);
        });
      })();
      console.log(test);
      // topic异步
      const topic = await http.get(
        "https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312"
      );
      console.log("topic");
      this.topic = topics.data.data;
    }
  },
  mounted() {
    this.getData();
  }
};