vue假全家桶升級方式，形成類似於小程式的路徑管理（新增require-css與require-text）

kimingw發表於2017-05-27
VueUICSS

1、路徑佈局大致就是這樣，完全模擬小程式，主要是靠require來做到的

2、首先index.html是這樣的（配置js和css沒有用requireJs主要是方便而且載入什麼元件比較清晰）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="common/css/cssreset.css"/>
    <link rel="stylesheet" href="common/css/swiper-3.4.2.min.css"/>
    <script src="common/js/vue.min.js"></script>
    <script src="common/js/vueRouter.js"></script>
    <script src="common/js/iscroll.js"></script>
    <script src="common/js/swiper-3.4.2.min.js"></script>
    <script src="common/js/require.js" defer async="true" data-main="common/js/main"></script>
    <style></style>
</head>
<body>
<div id="app">
    <router-view name="body"></router-view>
    <router-view name="foot"></router-view>
</div>
</body>
</html>

2、主要的配置main.js

/**
 * Created by zcwl123 on 2017/5/23.
 */
//require配置
require.config({
    baseUrl: "page",
    paths: {
        "foot":"foot/foot",    //載入模組
        "index":"index/index",
        "order":"order/order"
    },
    map: {
        '*': {
            'text':'../common/js/text',//載入require-text
            'css': '../common/js/css'  //載入require-css
        }
    }
});

//匯入依賴
var arr=['foot','index','order'];

define(arr, function(){

    //路由主鍵
    const routes = [
        { path: '/index', components: {
                body:index,foot:foot
            }
        },
        { path: '/order', components: {
                body:order,foot:foot
            }
        }
    ];
    //建立導航
    const router = new VueRouter({
        routes: routes
    });
    //導航依賴
    const app = new Vue({
        router:router
    }).$mount('#app');
});

3、模組當中index.js檔案這樣佈局

var index;
var arr=['text!index.html'];//載入html檔案
define(arr, function(html){
    index = {
        //html
        template:html,
        //資料
        data:function(){
            return {
                test:3
            }
        },
        //方法
        methods:{

        },
        //vue鉤子
        mounted: function () {
            //切換到每一個頁面，切換不同的css
            require(['text!index.css'], function (css) {
                document.getElementsByTagName("style")[0].innerHTML=css;
            });
        }
    };
});

4、因為是使用最初級的vue元件的方法，所以元件一定要有一個大標籤包圍。模組index.html檔案

<div id="index">
    空白
</div>

5、css檔案正常即可，然後就可以像小程式一樣了，也是像小程式一樣每次新建頁面都要先匯入依賴

相關文章