使用httpVueLoader加载vue单页面---不用脚手架的方法

"en">

    "UTF-8">
    
    "stylesheet" href="{$__TMPL__}/home/index/static/css/element_ui_index.css">
    "stylesheet" href="{$__TMPL__}/home/index/static/css/iconfont.css">
    "stylesheet" href="{$__TMPL__}/home/index/static/css/common.css">

    
    

    
     // 封装session存储和获取
     // 封装axios


"app" v-cloak>
    if="isLogin">
        
            
class="left">
                "{$__TMPL__}/home/index/static/images/logo.png" class="logo">
            
            
class="right">
                "handleCommand">
                    
class="el-dropdown-link">
                        "{$__TMPL__}/home/index/static/images/header.png" class="head_img">
                        你好，{{userInfo.username}}
                        class="iconfont icon-xiala">
                    
                    "dropdown">
                        "login">退出登录
                    
                
            
        
        
            "240px">
　　　　　　　　　　　　// 侧边栏
                class="el-menu-vertical-demo" :unique-opened="uniqueOpened">
                    for="(item ,index) in menuList"  :key="index" :index="''+item.id">
                        
                        "changeMain(item1.tag,item1.name,item)" :class="{'is-active':currentComponent == item1.tag}"
                                      v-for="(item1 ,index1) in item.groupList" :key="index1" :index="''+item.id +'-' + ''+item1.id">
                            class="iconfont" :class="item1.icon">
                            "title">{{item1.name}}
                        
                    
                
            
            
                
　　　　　　　　　　　　// 面包屑导航
                    
class="breadcrumb">
                        class="el-icon-arrow-right">
                            "{ path: '/' }">首页
                            "currentComponent">{{currentComponentName.parent}}
                            "currentComponent">
                                {{currentComponentName.child}}
                            
                        
                    
                    is="currentComponent"> // 根据条件切换组件
                    
class="shop_car">
                        "warning" icon="el-icon-shopping-cart-2" circle @click="shopCar">
                        drawer
                                :append-to-body="true"
                                :modal-append-to-body="false"
                                direction="ltr"
                                size="50%"
                                title="购物车"
                                :visible.sync="drawer"
                                >
                            
                        
                    
                
            
        

    
    else>
        is="currentComponent"> // 未登录显示登陆页面
    

index.js

/*
import Plugin from 'v-fit-columns'; // 表格宽度自适应
Vue.use(Plugin);
*/
// 使用bus实现组件之间的通信————————封装的多条件日期时间选择器需要通过这个把选择的最新时间日期传递给需要的组件
var bus = new Vue();

new Vue({
    el: '#app',
    data() {
        return {
            visible: false,
            hideSider: false,
            currentComponent: "Login",
            currentComponentName: {
                child:"资源上传",
                parent:"资源管理"
            },
            menuList: [
                {
                    title:"资源管理",
                    icon:"icon-upload_file",
                    id:1,
                    groupList:[
                        {
                            name: "资源上传",
                            id:1,
                            tag: "FileUpload",
                            icon: "icon-upload_file"
                        },
                        {
                            name: "3D模型",
                            id:2,
                            tag: "DocumentClassification",
                            icon: "icon-files"
                        },
                        {
                            name: "资源列表",
                            id:3,
                            tag: "ResourceManager",
                            icon: "icon-resource"
                        },
                    ]
                },
                {
                    icon:"icon-upload_file",
                    title:"3D模型管理",
                    id:2,
                    groupList: [
                        {
                            name: "3D模型列表",
                            id:1,
                            tag: "ThreeDimensional",
                            icon: "icon-regist"
                        }
                    ]
                },
                {
                    icon:"icon-upload_file",
                    title:"用户管理",
                    id:3,
                    groupList: [
                        {
                            name: "注册审核",
                            id:1,
                            tag: "RegisterReview",
                            icon: "icon-regist"
                        }
                    ]
                },
                {
                    icon:"icon-upload_file",
                    title:"游戏管理",
                    id:4,
                    groupList: [
                        {
                            name: "游戏列表",
                            id:1,
                            tag: "GameManager",
                            icon: "icon-regist"
                        }
                    ]
                }


            ],
            userInfo: {
                username: "张三"
            },
            isLogin: false,
            uniqueOpened:true,
            drawer:false
        }
    },
    components: {
        'FileUpload': httpVueLoader('/template/default/pc/home/index/views/fileUpload.vue'),
        'DocumentClassification': httpVueLoader('/template/default/pc/home/index/views/documentClassification.vue'),
        'Login': httpVueLoader('/template/default/pc/home/index/views/login.vue'),
        'RegisterReview': httpVueLoader('/template/default/pc/home/index/views/registerReview.vue'),
        'ResourceManager': httpVueLoader('/template/default/pc/home/index/views/resourceManager.vue'),
        'GameManager': httpVueLoader('/template/default/pc/home/index/views/gameManager.vue'),
        'ThreeDimensional':httpVueLoader('/template/default/pc/home/index/views/threeDimensional.vue'),
        'shopCar':httpVueLoader('/template/default/pc/home/index/views/shopCar.vue'),
    },
    created() {
        let _this = this;
        _this.userInfo = getSessionStorage('userInfo');
        console.log('userInfo', _this.userInfo);
        if (!_this.userInfo) {
            _this.isLogin = false;
            _this.currentComponent = "Login";
        } else {
            console.log("已登录");
            _this.isLogin = true;
            _this.currentComponent = "FileUpload";
        }
    },
    mounted() {
        console.log("登录状态", this.isLogin);

    },
    watch: {
        isLogin: function (val) {
            let _this = this;
            _this.isLogin = val;
        }
    },
    methods: {
        changeMain(obj,name,item) {
            let _this = this;
            _this.currentComponent = obj;
            _this.currentComponentName.child = name;
            _this.currentComponentName.parent = item.title;
        },
        handleCommand(command) {
            let _this = this;
            this.$confirm('退出登录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                setSessionStorage('userInfo', '');
                _this.isLogin = false;
                _this.currentComponent = "Login";
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                });
            });

        },
        shopCar(){
            this.drawer = !this.drawer;
        }
    }
})

axios.js

function axiosPostRequst(url,data) {
    return axios({
        method: 'post',
        url: url,
        data: data,
        transformRequest: [function (data) {
            let ret = '';
            for (let i in data) {
                ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + "&";
            }
            return ret;
        }],
    }).then(resp => {
        return resp.data;
    }).catch(error => {
        return "exception=" + error;
    });
}

util.js

function logOut() {

}
function setSessionStorage(key, value) {
    let curtime = (new Date()).getTime(); // 获取当前时间 ，转换成JSON字符串序列
    let valueDate = JSON.stringify({
        val: value,
        timer: curtime
    });
    try {
        sessionStorage.setItem(key, valueDate);
    } catch (e) {
        // 兼容性写法
        if (isQuotaExceeded(e)) {
            console.log("Error: 本地存储超过限制");
            sessionStorage.clear();
        } else {
            console.log("Error: 保存到本地存储失败");
        }
    }
}

function getSessionStorage(key) {
    let exp = 60 * 60 * 24 * 1000; // 一天的毫秒数
    let _key = sessionStorage.getItem(key);
    // console.log('取token', _key);
    if (_key) {
        let vals = sessionStorage.getItem(key); // 获取本地存储的值
        let dataObj = JSON.parse(vals); // 将字符串转换成JSON对象
        let newValue = "";
        // 如果(当前时间 - 存储的元素在创建时候设置的时间) > 过期时间
        let isTimed = ((new Date()).getTime() - dataObj.timer) > exp;
        if (isTimed) {
            console.log("存储已过期");
            sessionStorage.removeItem(key);
            return null;
        } else {
            newValue = dataObj.val;
        }
        return newValue;
    } else {
        return null;
    }
}
function validPassword(rule,value,callback) {
    let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,8}$/;
    if(!reg.test(value)){callback(new Error('密码必须是由6-8位字母+数字组合'))
    }else{
        callback()
    }
}

以上是页面搭建的基础