初始化

cnpm i vue-cli -gvue init webpack htmlcd htmlcnpm i node-sass sass-loader less less-loader -Dcnpm i element-ui -Scnpm i axios qs js-cookie -Snpm 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 = httpVue.prototype.$cache = cacheVue.config.productionTip = falsenew Vue({    el: '#app',    router,    render: h => h(main),})

src/app.vue

src/components/test.vue

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}