tp5+swoole+vue实现im聊天app之安装sass,js-cookie,axios,vuex,mit-ui

1,安装sass:
安装很简单

npm install node-sass 
npm install sass-loader

或者使用yarn

yarn add node-sass
yarn add sass-loader

修改webpack配置
在webpack.base.conf.js文件中加入下面代码:

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
},

2,安装js-cookie:

yarn add js-cookie
或者
npm install js-cookie --save

配置js-cookie
在 src/utils目录下创建一个token.js

import Cookies from 'js-cookie'
import config from '@/config'

/**
 * 创建 token
 * @param token
 */
export const setToken = (token) => {
    Cookies.set(config.tokenKey, token, {expires: config.cookieExpires || 1})
};

/**
 * 获取token
 * @returns {*}
 */
export const getToken = () => {
    const token = Cookies.get(config.tokenKey);
    if (token) return token; else return false
};


/**
 * 移除token
 * @returns {*}
 */
export function removeToken() {
    return Cookies.remove(config.tokenKey)
}

3,安装配置axios:

yarn add axios 
或者
npm install axios --save
或者
cnpm install axios --save

在src/utils下创建一个http.js

import axios from 'axios';
import config from '@/config'
import {getToken} from '@/utils/token'
import {Toast} from 'mint-ui';
import router from '@/router/index';

axios.defaults.timeout = config.httpTimeOut;    //超时时间

const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro;
axios.defaults.baseURL = baseUrl;
axios.defaults.withCredentials = true;  //为了验证码添加的

axios.interceptors.request.use(
    config => {
        const token = getToken();
        if (token) {
            config.headers.token = token;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: params})
            .then(response => {
                resolve(response.data);
            })
            .catch((e) => {
                reject(e)
            })
    })
}

export function del(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.delete(url, params)
            .then(response => {
                resolve(response.data);
            })
            .catch((e) => {
                reject(e)
            })
    })
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data)
            .then(response => {
                resolve(response.data);
            })
            .catch((e) => {
                reject(e)
            })
    })
}

/**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.patch(url, data)
            .then(response => {
                resolve(response.data);
            })
            .catch((e) => {
                reject(e);
            })
    })
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data)
            .then(response => {
                resolve(response.data);
            })
            .catch((e) => {
                reject(e)
            })
    })
}


// 拦截响应response，并做一些错误处理
axios.interceptors.response.use((response) => {
    return response;
}, (err) => {
    if (err && err.response) {
        if (err.response.status === 401) {
            router.push({name: 'login'});
        }
        Toast({
            message: err.response.data.msg ? err.response.data.msg : err.response.statusText,
            position: 'bottom',
            duration: 5000
        });
    } else {
        Toast({
            message: '服务器繁忙,请重试',
            position: 'bottom',
            duration: 5000
        });
    }

    return Promise.reject(err)
});

之后再main.js中加入

import {post, get, del, put, patch} from '@/utils/http';

Vue.prototype.$post = post;
Vue.prototype.$get = get;
Vue.prototype.$delete = del;
Vue.prototype.$patch = patch;
Vue.prototype.$put = put;

4,安装vuex:
安装

npm install vuex --save
或者
yarn add vuex

配置
在src/store下创建index.js

import vue from 'vue';
import vuex from 'vuex';

import app from './modules/app';

vue.use(vuex);

export default new vuex.Store({
    modules: {
        app
    }
});

在src/store下创建 modules 再在里面创建一个app.js

const state = {};

const actions = {};

const mutations = {};

export default ({
    state,
    mutations,
    actions,
});

之后再main.js中加入

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

5,安装mint-ui

npm install mint-ui --save

这个没什么可配置的 直接用就行了