index.html 入口頁面html>

????????vue????????????????

• ????????????????
• `menu`.`name`????????????

????????????????

base.js requirejs 配置文件(function(){????requirejs.config({????????baseUrl:?"../js",????????paths:{????????????"promise":"../dist/js/q",????????????"vue":"../dist/js/vue",????????????"vue.router":"../dist/js/vue-router.min",????????????"text":"../dist/js/text",????????????"css":"../dist/js/css.min"????????},????????waitSeconds:?15,????????map:{????????},????????urlArgs:?"version="?+?Date.now(),????????shim:?{????????????promise:{????????????????exports:"Q"????????????},????????????"vue":?{????????????????exports:?"Vue"????????????},????????????"vue.router":?{????????????????exports:?"VueRouter"????????????}????????},????????callback:function(){????????},????????deps:["vue","vue.router","promise","index"]?//?默認要加載的js????});})();

index.js vue 入口define(["vue","vue.router","common/routes"],?function(Vue,VueRouter,routes)?{????Vue.use(VueRouter);????var?data?=?{????????menus:?[????????????{path:?"/account",?name:?"賬戶管理"},????????????{path:?"/authorization",?name:?"權限管理"},????????????{path:?"/member",?name:?"會員管理"}????????]????};????var?router?=?new?VueRouter({????????routes:routes????});????var?methods?=?{????????switchPage:function(menu){????????????console.log(menu);????????????this.$router.push(menu.path);????????}????};????var?app?=?new?Vue({????????router:router,????????el:"#app",????????data:data,????????methods:methods????});});

routes.js 路由配置define(["common/ResolveComponent"],?function(ResolveComponent)?{????var?routes?=?[];????routes.push({????????path:?'/account',????????component:?ResolveComponent("account/account_index")????});????routes.push({????????path:?'/authorization',????????component:?ResolveComponent("authorization/authorization_index")????});????routes.push({????????path:?'/member',????????component:?ResolveComponent("member/member_index")????});????return?routes;});

ResolveComponent.js ?component懶加載工具define(["require","promise"],?function(require,Q)?{????var?resolve?=?function(dependency){????????return?function(){????????????if(!(dependency?instanceof?Array)){????????????????dependency?=?[dependency];????????????}????????????var?deferred?=?Q.defer();????????????require(dependency,function(res){????????????????deferred.resolve(res);????????????});????????????return?deferred.promise;????????}????};????return?resolve;});

account_index.jsdefine(["text!../../pages/account/account_index.html","css!../../css/account/account_index.css"],?function(template)?{????var?data?=?{????????list:[????????????{id:"001",name:"小王"},????????????{id:"002",name:"大王"},????????????{id:"003",name:"老王"}????????]????};????var?methods?=?{????????say:function(item){????????????alert("我居然是"+item.name);????????}????};????return?{????????methods:methods,????????template:template,????????data:function(){????????????return?data????????}????}});

總結

以上是生活随笔為你收集整理的vue require css html,requirejs vue vue.router简单框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。