程序那些事

逆水行舟,不进则退。

vue+require.js不使用webpack进行模块化开发

2019.05.27 | 299阅读 | 0条评论 | 前端

对于刚接触vue不久的人,学习的时候都是按照官网上的示例来学习的。不过网上关于vue的使用都是结合webpack的,比较新颖。但是对于习惯传统js开发的来说不是特别友好。以前开发spa都是requireJS+artTemplate+director进行模块化开发。本文将vue+require进行整合开发。
一、目录结构
目录结构.jpg
assets
静态资源目录,存放css,图片,字体文件等。
components
存放组件。这里组件就是html。
view
存放页面。
config.js
require配置文件。
main.js
程序入口文件。
require.js
require本体。
二、配置require
在项目根目录新建一个config.js
console.log("开始配置require");
require.config({
    baseUrl : "./",
    paths :{
        jquery:"assets/js/lib/jquery/jquery-3.3.1.min",
        vue:"assets/js/lib/vue/vue.min",
        vueResource:"assets/js/lib/vue/vue-resource.min",
        vueRouter:"assets/js/lib/vue/vue-router",
        vueX:"assets/js/lib/vue/vuex",
        ELEMENT : "assets/js/lib/element-ui/index",
        componentTool:"assets/js/componentTool",
        touch:"assets/js/touch",
    },
    shim : {
        bootstrap : ['jquery'],

    },
    waitSeconds: 15//加载时间为15秒。。。。15秒还加载不到。。可以放弃了
});
console.log("require配置完成");
require(["./main"]);
注意:element-ui加载的别名一定要是ELEMENT,否则无法加载。
三、入口程序main.js
define(["jquery", "vue", "vueResource", "vueRouter", "vueX", "ELEMENT","componentTool"], function ($, Vue, vueResource, vueRouter, vueX, ELEMENT,componentTool) {
    console.log("初始化...");
    Vue.use(vueResource);
    Vue.use(vueRouter);
    Vue.use(vueX);
    Vue.use(ELEMENT);
    Vue.config.debug = true;
    Vue.config.devtools = true;

    const state = {
        isLogin: false,
        user: null
    };
    const getters = {
        getUser: function (state) {
            if (!state.user) {
                state.user = JSON.parse(sessionStorage.getItem("user"))
                state.isLogin = sessionStorage.getItem("isLogin")
            }
            return state.user
        }
    }
    const mutations = {
        $_setLogin(state, value) {
            state.isLogin = value
            sessionStorage.setItem("isLogin", value)
        },
        $_setUser(state, value) {
            state.user = value
            sessionStorage.setItem("user", JSON.stringify(value))
        },
        $_removeUser(state) {
            state.user = null
            sessionStorage.removeItem("user")
        }
    };
    const store = new vueX.Store({
        state, getters, mutations
    });

    const routes = [
        {
            path: '/',
            name: 'Home',
            component: componentTool.componentOption('components/home', {}),
            meta: {
                title: '主页',
                type: 'auth'
            }
        },
        {
            path: '/login',
            name: 'Login',
            component: componentTool.componentOption('components/login', {}),
            meta: {
                title: '登录',
                type: 'login'
            }
        },
        {
            path: '/404',
            name: '404',
            component: componentTool.componentOption('components/404', {}),
            meta: {
                title: '404 Not Found',
            }
        }

    ]
    const router = new vueRouter({
        routes: routes,
        crollBehavior(to, from, savedPosition) {
            return {
                x: 0,
                y: 0
            }
        },
        history: true
    })

    router.beforeEach((to, from, next) => {
        if (to.meta.title) {
            document.title = to.meta.title;
        }
        const type = to.meta.type;

        if (to.matched.length === 0) {//匹配前往的路由不存在
            from.name ? next({
                name: from.name
            }) : next('/404'); //判断此跳转路由的来源路由是否存在,存在的情况跳转到来源路由,否则跳转到404页面
        } else if (type == 'auth') {
            if (sessionStorage.getItem("isLogin")) {
                next();
            } else {
                next('/login')
            }
        } else {
            next(); //如果匹配到正确跳转
        }
    });
    new Vue({
        el: "#app",
        store: store,
        router: router,
        data: {}
    });

    console.log("初始化完成");
});
main.js里用了一个componentTool模块,这是一个自定义的模块,用来加载vue的组件。
代码如下:
define(['jquery'], function ($) {
    return {
        componentOption: function (url, vuecom) {
            if (!vuecom) vuecom = {};
            return function (resolve) {
                $.get(url + "/index.html").done(function (r) {
                    require([url + "/index"], function (option) {
                        if (option) {
                            for (let a in option) {
                                vuecom[a] = option[a];
                            }
                        }
                        let rl = r.toLowerCase();
                        let style = '';
                        let styleIndexEnd = rl.lastIndexOf('</style>');
                        let styleIndex = rl.lastIndexOf('<style', styleIndexEnd);
                        if (styleIndexEnd !== -1 && styleIndex !== -1) {
                            style = r.substring(styleIndex, styleIndexEnd);
                            style = style.substr(style.indexOf('>') + 1);
                            style = '<component scoped :is="\'style\'">' + style + '</component>';
                        }

                        let template = '';
                        let templateIndexEnd = rl.lastIndexOf('</template>');
                        let templateIndex = rl.lastIndexOf('<template', templateIndexEnd);
                        if (templateIndexEnd !== -1 && templateIndex !== -1) {
                            template = r.substring(templateIndex, templateIndexEnd);
                            template = template.substr(template.indexOf('>') + 1);
                        }
                        if (style) {
                            let index = template.lastIndexOf('</');
                            if (index !== -1) template = template.substr(0, index) + style + template.substr(index);
                        }
                        vuecom.template = template;
                        resolve(vuecom);
                    });
                });
            };
        }
    }
});
在view文件夹新建一个index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title></title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../assets/js/lib/element-ui/index.css">

    <script src="../require.js"></script>
    <script src="../config.js"></script>
</head>
<body>
<style>
    html,body{
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
</style>
<div id="app" style="height: 100%;width: 100%">
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
</body>
</html>
入口程序到这里就完成了
四、编写组件
在components文件夹下新建一个home文件夹,作为跳转的主页。
再在home文件夹新建index.html和index.js,必须命名是index,这是个固定写法。否则找不到。
QQ截图20190527103546.jpg
index.html
<template>
   <el-container class="home-box">
      <transition name="bounce">
         <el-aside class="aside-box">
         </el-aside>
      </transition>
      <el-container class="main-box">
         <el-header class="head">
         </el-header>
         <el-main>
            
         </el-main>
      </el-container>

   </el-container>
</template>

<style>
   .home-box {
      height: 100%;
      overflow: hidden;
   }

   .main-box {
      height: 100%;
   }

   .aside-box {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9999;
      height: 100% !important;
      width: 80% !important;
   }

   .bounce-enter-active {
      animation: bounce-in .5s;
   }

   .bounce-leave-active {
      animation: bounce-in .5s reverse;
   }
   .el-header {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
   }

   .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
   }

   .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
      padding: 0;
   }
</style>
index.js
define(['jquery','componentTool'],function($,componentTool){

    return{
        data:function(){
            return {
                
            }
        },
        methods: {
            
        },
        created:function(){

        },
        mounted:function(){
        },
        computed: {

        },
        watch: {

        },
        components:{
        }
    }
});
index.js里结构就类似原生vue里componet的写法了。


打赏

赞 (

发表评论

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

召唤伊斯特瓦尔