文档章节

vue-cli-element-ui-scss-axios

李琼涛
 李琼涛
发布于 2018/07/09 00:50
字数 435
阅读 197
收藏 1

初始化

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
}

© 著作权归作者所有

上一篇: android
下一篇: maven配置文件
李琼涛
粉丝 13
博文 150
码字总数 44110
作品 0
海淀
架构师
私信 提问
加载中

评论(1)

月亮光光
月亮光光
不要用cnpm,会出现各种奇葩的bug
基于Element-UI的Vue管理后台搭建

最近需要新搭建一个前端项目,因此就参考@PanJiaChen的Github项目模板vue-admin-template做部分改动,搭建一套前端框架 推荐读一下 手摸手,带你用vue撸后台 系列 1. 使用vue-cli3快速创建模...

whuer凌晨
2018/09/19
0
0
vue实践之采用vue-cli3.x创建项目

采用vue创建项目的时候控制台提示需要升级,于是就笨头笨脑的升级了,结果采用vue-cli3创建项目的时候出了一堆错误,顿时懵了。于是开始了解vue-cli3.x的相关知识,刚开始还是好不习惯,不过...

陨石坠灭
2019/07/29
0
0
Vue + TypeScript 踩坑总结

Vue+TS 踩坑记录与方案总结 点击跳转-原文地址 前言 整个 vue 项目的目录结构 全局组件注册 SFC 单 vue 文件组件的基本写法和结构 computed 计算属性的写法 watch 监听器的使用 Watch 监听 ...

xing.org1^
2019/12/09
0
0
vue-cli-element-starter(vue-cli 和 element 结合的项目开发模板)

新项目每次都需要去配置一个新的开发环境,索性直接搭一个模板,为以后快速开发使用。 项目地址:vue-cli-element-starter vue-cli 和 element 结合的项目开发模板,主要内容如下(后续新增的...

樊小书生
04/01
0
0
vue项目中api接口管理总结

默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关。 1. 在axiosconfig目录下的axiosConfig.js 前端全栈学习交流圈:...

peakedness丶
2018/12/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大刘海终于收窄?iPhone 12系列设计细节曝光:三摄+雷达更占空间

苹果第一次给屏幕加上刘海,是在2017年的iPhone X。此后,尽管安卓阵营已经先后发展出了水滴屏、升降屏、打孔屏等形态各异的更高屏占比的设计方案,苹果一直将宽大的刘海保留在其后iPhone XS...

osc_p0v6j6lt
15分钟前
24
0
爆单也没能救它 瑞幸咖啡股价一度下跌20%再创新低

瑞幸咖啡(NASDAQ:LK)股价周一继续下挫,跌破上周四曝光营收造假的低点4.90美元,一度报4.27美元,下跌超20%,市值不足11亿美元。这一价格也创造了瑞幸上市后的历史最低。 据报道,高盛称,瑞...

osc_6kj0kt57
16分钟前
16
0
疫情蔓延放缓 早盘美股道指大涨逾千点

北京时间6日晚,美股周一早盘继续上扬,道指大涨逾千点。投资者对全球疫情蔓延局势的判断有所改善,风险情绪随之受到提振。美国总统特朗普称迹象显示美国疫情已开始趋于稳定,并表示他仍在考...

osc_jo2m8l1r
18分钟前
24
0
4.3万元!赛博朋克2077定制版NIVIDIA显卡成功卖出

虽然《赛博朋克2077》游戏跳票了,但是2月份NVIDIA依然推出了一款赛博朋克限量版显卡——GeForce RTX 2080 Ti“ Cyberpunk 2077 Edition”,全球限量200块,官方售价1100美元。 访问购买页面...

osc_9mctux05
19分钟前
26
0
高盛:瑞幸咖啡股东发生违约 7635万股ADS强制出售

据国外媒体报道,高盛今日发布报告称,在瑞幸咖啡股东Haode Investment公司(借款人)发生违约之后,根据一项5.18亿美元的保证金贷款安排,贷款人组成的银团已指示作为担保受托人的瑞士信贷新...

osc_t6qz550e
20分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部