???? 在五一節(jié)之前和一網(wǎng)友討論前端技術(shù)時(shí)，對(duì)方提到vue、vue-route如果配合requirejs應(yīng)用。當(dāng)時(shí)的我沒有想得很明白，也沒能這位網(wǎng)友一個(gè)準(zhǔn)確的回復(fù)，但我許諾于他五一研究后給他一個(gè)回復(fù)。本是一天的研究卻被我搞成了研究了一周，這拖延癥。。。

閑話少數(shù)，進(jìn)入正題

一、示例代碼說明

代碼結(jié)構(gòu)說明：

modules（存放的為組件，主要是模板與Js對(duì)象分成兩個(gè)文件來寫）

route：測(cè)試子路由的組件

title：就是一個(gè)簡(jiǎn)單的顯示文字的組件

app.js：核心類，提供vue的創(chuàng)建、以前modules組件加載的方法等

chart.js：模擬的一個(gè)業(yè)務(wù)模塊

index.html：頁(yè)面文件

layout.css：整體樣式文件（測(cè)試require加入樣式文件）

main.js：requirejs的配置文件（也是入口文件）
丑陋的效果圖：

此示例沒有樣式，只是為了驗(yàn)證require如何加載一個(gè)vue組件，以子路由的動(dòng)態(tài)注入的能力,示例代碼下載。

二、從.vue文件入手

????? 一個(gè).vue文件可以包含模板、Js類、樣式（可以不要）等三塊。但我們通過vue的官網(wǎng)可以知道，vue提供了compile對(duì)象方法，可以把模板編譯成VNode。并且我們通過webpack打包后生成的文件可以看出模板與Js類是混淆在一起了。這也就說明vue的組件就是一個(gè)Js對(duì)象。如下圖所示：

三、requirejs對(duì)vue、vuex和vue-route的引入

???? 引入這三個(gè)都很容易，并將這三個(gè)注入到Vue對(duì)象也是相對(duì)簡(jiǎn)單的，難道的是需要解決動(dòng)態(tài)注入向vue-route實(shí)例注入路由，以及vuex的動(dòng)態(tài)加入一個(gè)數(shù)據(jù)模塊的能力。好在這兩點(diǎn)官網(wǎng)都給出了解決方案：

• vue-route如何動(dòng)態(tài)注入路由
  根據(jù)官網(wǎng)幫助文檔說明，存在addRoutes方法，向路由實(shí)體動(dòng)態(tài)注入路由
• vuex模塊動(dòng)態(tài)注入
  也是根據(jù)官網(wǎng)幫助文檔提示有registerModule方法實(shí)現(xiàn)。
• 實(shí)現(xiàn)的部分代碼：
  初始化Vue對(duì)象

apt.init = function(){this.store = Object.create({modules:{}}); this.Vue.use(VueRouter);this.Vue.use(Vuex);this.router = new VueRouter(); this.store = new this.Vuex.Store(this.store); }

首先提供一個(gè)init方法，對(duì)Vue對(duì)象進(jìn)行一些初始化，也就是把Vuex、vue-route都注入到Vue對(duì)象中。在這里我把創(chuàng)建的vuex和vue-route的實(shí)例都放到this對(duì)象，方便后面提供給組件注冊(cè)實(shí)使用。
創(chuàng)建Vue實(shí)例：

apt.createVue = function(){this.vue = new this.Vue({store: this.store,router: this.router,computed: {childs: function(){if(!this.$store.state.router) return null;return this.$store.state.router.childs;}}});return this.vue; }

只創(chuàng)建vue對(duì)象，沒有進(jìn)行mount。
為其他模塊提供的上下文：

apt.createContext = function(){return {Vue: this.Vue,router: this.router,$vue: this.vue}; }

四、如何通過require加載html和js方式的組件

從項(xiàng)目結(jié)構(gòu)圖中可以看出在modules文件夾中定義了兩個(gè)組件，分別是：routet和title，而他們的模板則是一個(gè)html文件。以下是這類組件如何加載的代碼：

apt.acquire = function(path){var arrayPath;if(!this.isArray(path)){arrayPath = [path];}else{arrayPath = path;}var promise = this.dfd(function(dfd){require(arrayPath,function(){dfd.resolve(Array.prototype.slice.call(arguments));},function(error){dfd.reject(error);});}).promise();return promise; }apt.createComponent = function(componentName){//可以重載，讀取.vue的文件var path = this.$modulePrefix + componentName,html = 'text!' + path + '/index.html',js = path + '/index.js',self = this;var promise = this.acquire([html,js]);promise.done(function(result){var obj = result[1], content = result[0];obj.template = content;obj.__path__ = path;self.$components.push(obj);});return promise; }

說明： acquire：提供通過require加載JS或者是html等文件的方法，并返回一個(gè)promise，這樣就方便調(diào)用者使用。 createComponet：會(huì)根據(jù)調(diào)用傳入的名稱在modules文件夾中找出對(duì)應(yīng)的js和html文件，然后調(diào)用acquire加載組件。

五、main.js是這樣引用的

提供注冊(cè)全局組件方法

apt.registerGlobalComponents = function(componentNames){var gloadComponet = componentNames, self = this;var promises = gloadComponet.map(function(data,index){return self.createComponent(data);});var dfd = this.dfd();$.when.apply(null, promises).done(function(){var _router = [];self.$components.forEach(function(data,index){self.Vue.component(data.name, data);_router.push({path: '/' + data.name,component: data});});self.router.addRoutes(_router); //全局注冊(cè)都注冊(cè)為路由 dfd.resolve(_router);});return dfd.promise(); }

main.js中的引用

var _app = app.createApp(); _app.registerGlobalComponents(['title', 'route']).done(function(){var vue = _app.createVue();var cxt = app.getVue().createContext();var r = {state: {childs: []},mutations: {childs: function(state, data){state.childs = data;}},actions: {childs: function(state, data){state.commit('childs', data);}}}vue.$store.registerModule('router', r);vue.$mount('#app'); });

說明：

創(chuàng)建App的一個(gè)實(shí)例；

注冊(cè)全局的組件：title、route；

注冊(cè)完成后創(chuàng)建vue實(shí)例，并且向?qū)嵗膙uex注入二級(jí)路由展示的模塊

轉(zhuǎn)載于:https://www.cnblogs.com/cqhaibin/p/6823286.html

總結(jié)

以上是生活随笔為你收集整理的requirejs、vue、vuex、vue-route的结合使用，您认为可行吗？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。