vue-cli-element-ui-scss-axios

初始化

cnpm i vue-cli -g
vue init webpack html
cd html
cnpm i node-sass sass-loader less less-loader -D
cnpm i element-ui -S
cnpm i axios qs js-cookie -S
npm run dev

src/assets/scss/element-variables.scss

$--color-primary: #315ca1 !default;

$--font-path: '../../../node_modules/element-ui/lib/theme-chalk/fonts';
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index";

src/config.js

export default {
    title: '雲管理系統',
    baseUrl: 'http://localhost:13000/api/msweb',
}

src/http.js

import axios from 'axios'
import qs from 'qs'
import cache from './cache'
import Config from './config'

const Axios = axios.create({
    baseURL: Config.baseUrl,
    timeout: 8000,
    responseType: 'json',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})

Axios.interceptors.request.use(
    http => {
        http.data = qs.stringify(http.data);
        let token = cache.get('userToken') || '';
        if (token != '') {
            http.headers.Authorization = `token ${token}`;
            http.headers.Timestamp = cache.get('userTokenExpireOut') || 0;
        }
        return http;
    },
    error => {
        return Promise.reject(error);
    }
)

Axios.interceptors.response.use( // 響應攔截器
    response => {
        if (response.status == 401) {
            cache.remove('userToken')
            cache.remove('userRole')
        }
        return response;
    },
    error => {
        return Promise.reject(error);
    }
)

export default Axios;

src/cache.js

import cookies from 'js-cookie'

let cache = {
    prefix: window.location.host
}

cache.set = function (name, value) {
    cookies.set(this.prefix + '_' + name, value || null);
}

cache.get = function (name) {
    return cookies.get(this.prefix + '_' + name);
}

cache.remove = function (name) {
    cookies.remove(this.prefix + '_' + name);
}

export default cache

src/main.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import './assets/scss/element-variables.scss'
import './assets/iconfont/iconfont.css'
import main from './components/layout/main.vue'
import router from './router'
import http from './http'
import cache from './cache'

Vue.use(ElementUI)
Vue.prototype.$http = http
Vue.prototype.$cache = cache
Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    render: h => h(main),
})

src/app.vue

<template>
    <router-view/>
</template>

<script>
    export default {
    }
</script>

src/components/test.vue

<style lang="sass" scoped>
    @import './test.scss'
</style>

<template>
    <div>
        <h3>測試</h3>
        <el-button type="primary">保存</el-button>
    </div>
</template>

<script>
    export default {
        created() {
            this.$http.get('/settings', {}).then(function (res) {
                console.log(res)
            })
        }
    }
</script>

src/components/test.scss

$color: red;

h3 {
    color: $color;
}

多頁面 build/utils.js

const fs = require('fs')
const glob = require('glob')

var entryPath = path.resolve(__dirname, '../src/entry')
var htmlPath = path.resolve(__dirname, '../src/html')

exports.entries = function () {
    var entryFiles = glob.sync(entryPath + '/*.js')
    var map = {}
    entryFiles.forEach((filePath) => {
        var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        map[filename] = filePath
    })
    return map
}

exports.htmlPlugin = function () {
    let entryHtml = glob.sync(htmlPath + '/*.html')
    let arr = []
    entryHtml.forEach((filePath) => {
        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        let conf = {
            template: filePath,
            filename: filename + '.html',
            inject: false
        }
        if (fs.existsSync(entryPath + '/' + filename + '.js') == true) {
            conf.inject = true;
            conf.chunks = ['manifest', 'vendor', filename];
        }
        if (process.env.NODE_ENV === 'production') {
            conf = merge(conf, {
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                },
                chunksSortMode: 'dependency'
            })
        }
        arr.push(new HtmlWebpackPlugin(conf))
    })
    return arr
}