一個簡單的假vue全家桶(vue+vue-router+require)

kimingw發表於2017-05-24
VueUI

首先說明我覺得這是一個比較好理解的vue全家桶（雖然是假的），模組化也是用require來做的，而且如果後期有必要壓縮我也會用gulp來做

1、依賴個個本地模組，require只是用來載入page，這樣比較清晰

<script src="common/vue.js"></script>　　//載入vue.js
<script src="common/vueRouter.js"></script>　　//載入vueRouter
<script src="common/iscroll.js"></script>　　//載入iscorll5(一個滑動外掛)
<script src="common/require.js" defer async="true" data-main="common/main"></script>　　//require載入模板

2、html主要關注就是router方面

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!-- 使用 router-link 元件來導航. -->
            <!-- 通過傳入 `to` 屬性指定連結. -->
            <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的元件將渲染在這裡 -->
        <router-view></router-view>
    </div>

3、再看main.js也就是配置檔案，主要結合有router和require在同一個js進行配置

//require配置
require.config({
    baseUrl: "page",
    paths: {
        "foo": "foo",
        "index":"index"
    }
});
//匯入依賴
var arr=['foo','index'];

define(arr, function(){
    // 0. 如果使用模組化機制程式設計，匯入Vue和VueRouter，要呼叫 Vue.use(VueRouter)

    // 1. 定義（路由）元件。
    // 可以從其他檔案 import 進來

    const Bar = { template: '<div>bar</div>' };
    // 2. 定義路由
    // 每個路由應該對映一個元件。 其中"component" 可以是
    // 通過 Vue.extend() 建立的元件構造器，
    // 或者，只是一個元件配置物件。
    // 我們晚點再討論巢狀路由。
    const routes = [
        { path: '/',    component:index},
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ];

    // 3. 建立 router 例項，然後傳 `routes` 配置
    // 你還可以傳別的配置引數, 不過先這麼簡單著吧。
    const router = new VueRouter({
        routes: routes // （縮寫）相當於 routes: routes
    });

    // 4. 建立和掛載根例項。
    // 記得要通過 router 配置引數注入路由，
    // 從而讓整個應用都有路由功能
    const app = new Vue({
        router:router
    }).$mount('#app');

    // 現在，應用已經啟動了！
});

4、剩下的就是page模組問題

const index = {
    //html
    template: `
    <div>
        {{test}}
    </div>
    `,
    //資料
    data:function(){
        return {
            test:3
        }
    },
    //方法
    methods:{

    },
    //vue鉤子
    mounted: function () {

    }
};

後話：因為不想vue的單頁面元件那樣能在單頁寫css樣式，其他都還好說，目前的話單頁應用我也只是在index.html寫下全部的css

相關文章