项目目录
●/
●index.html
●js/
●main.js
●myComponent.js
●routes.js
●textComponent.js
●lib/
●vue.js
●vue-router.js
●require.min.js
一、构建require.js环境
（1）index.html网页设置require.min.js
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div id="app"><transition name="tsfade" mode="out-in"><router-view ></router-view></transition>
</div>
</body>
<script src="js/lib/require.min.js" data-main="js/main"></script>
</html>（2）js/main.js
require.config({nodeIdCompat: true,baseUrl:'./',paths: {vue : 'js/lib/vue','vue-router': 'js/lib/vue-router',axios : 'js/lib/axios.min',routes : 'js/routes',myComponent : 'js/myComponent',textComponent : 'js/textComponent',}});
require(['vue', 'vue-router','routes','myComponent'],function (Vue, VueRouter,routes, myComponent) {Vue.use(VueRouter);var router = new VueRouter({routes:routes});let vue = new Vue({router: router,components: { myComponent: myComponent},}).$mount('#app');
});
二、vue模块写法
（1）js/routes.js
define(['myComponent'],function (myComponent) {const basePath = "";var routes = [{path: '/',name: 'default',redirect: basePath + "/myComponent",},{name: "myComponent",path: basePath + "/myComponent",component: myComponent, }];return routes;})
（2）js/myComponent.js
define(['textComponent'],function (textComponent) {var template =`<div><text-component></text-component><p>{{info}}</p></div>`;let component = {template: template,data() {return {info: '芙蓉区',};},components:{textComponent:textComponent}};return component;
});
（3）js/textComponent.js
define(function () {var template =`<div><p>{{text}}</p></div>`;let component = {template: template,data() {return {text: '信息',};}};return component;
})项目地址：https://github.com/90duc/RequireJSVue
