vue之requireJs中引入vue-router的方法

時間 2019-11-16

標籤 vue requirejs 引入 router 方法欄目 JavaScript 简体版

原文原文鏈接

requireJs簡介 參數配置 requireJS 經常使用的方法與命令也就兩個，所以requireJS使用起來很是簡單。 javascript

require define 其中define是用於定義模塊，而require是用於載入模塊以及載入配置文件。css

define([id,deps,] callback);
require(deps[,callback]);
複製代碼

加載配置文件 獨立的引入配置文件也有兩種方式，一種是經過script標籤加載外部JS文件形式：html

<script src="js/require.js"></script>
<script src="js/app.js"></script>
複製代碼

另外一種方式則是使用 require 提供的 data-main 屬性，該屬性是直接寫在引入require.js的script標籤上，在require.js 加載完畢時，會自動去加載配置文件 app.js。前端

<script data-main="js/app" src="js/require.js"></script>
複製代碼

經過 data-main 去加載入口文件，便會使配置對象中的 baseUrl 屬性默認指向地址改成 app.js 所在的位置，相比之下我更加推薦這種方式，由於它更可能的方便快捷。vue

<script data-main="js/app.js" src="js/require.js"></script>
複製代碼

在main.js中所設置的腳本是異步加載的。因此若是你在頁面中配置了其它JS加載，則不能保證它們所依賴的JS已經加載成功。 經常使用參數配置 urlArgs RequireJS獲取資源時附加在URL後面的額外的query參數。做爲瀏覽器或服務器未正確配置時的「cache bust」手段頗有用。使用cache bust配置的一個示例：java

javascript:;urlArgs: "bust=" + (new Date()).getTime()
複製代碼

在開發中這頗有用，但請記得在部署到生成環境以前移除它。 deps 用於聲明require.js在加載完成時便會自動加載的模塊，值是一個數組，數組元素即是模塊名。 config config屬性能夠爲模塊配置額外的參數設定，其使用格式就是以模塊名或者模塊ID爲key，而後具體的參數爲value。 shim shim爲那些沒有使用define()來聲明依賴關係、設置模塊的"瀏覽器全局變量注入"型腳本作依賴和導出配置。node

require.config({
  baseUrl : "./src",
  paths :{
    jquery:"./lib/jquery.min",
    vue:"./lib/vue",
    vueResource:"./lib/vue-resource.min",
    vueX:"./lib/vuex",
    api :"./api/index",
    lodash : "./lib/lodash.min",
    bootstrap : "./assets/js/bootstrap/js/bootstrap.min",
    ripples : "./assets/js/bootstrap-material-design/js/ripples.min",
    material:"./assets/js/bootstrap-material-design/js/material.min"
  },
  shim : {
    bootstrap : ['jquery'],
    ripples:['jquery'],
    material:['jquery'],
  },
  packages: [
    {
      name: 'components',
      location: 'component',
      main: 'components'
    },
    {
      name : "vuex",
      location :"vuex",
      main : "vuex"
    }//歡迎加入全棧開發交流圈一塊兒學習交流：864305860
  ]//面向1-3年前端人員
});//幫助突破技術瓶頸，提高思惟能力
複製代碼

vue項目 requirejs配置jquery

require.config({
  baseUrl : "./src",
  paths :{
    vue:"./lib/vue",
    vueRouter: "./lib/vue-router",
    promise: "./lib/q",
    router: "./js/router",
    header: "./js/components/header"
  },
  shim : {
    vueRouter : ['vue']
  }
});//歡迎加入全棧開發交流圈一塊兒學習交流：864305860
複製代碼

router配置webpack

define(["resolve"], function(resolve){
  return [
    {
      path: "/home",
      name: "home",
      component: resolve("../js/xx.js")
    },
    {
      path: "/news",
      name: "news",
      component: resolve("../js/xx.js")
    }
  ];
});
複製代碼

resolve.jsweb

define(["require", "promise"], function(require, Q){
  var resolve = function(dep) {
    return function() {
      if (!(dep instanceof Array)) {
        dep = [dep];
      }
      var deferred = Q.defer();
      require(dep, function(res) {
        deferred.resolve(res);
      });//歡迎加入全棧開發交流圈一塊兒學習交流：864305860
      return deferred.promise;
    };
  };
  return resolve;
});
複製代碼

index

<body>
  <header></header>
  <router-view></router-view>
</body>
require(["vue", "vueRouter", "router", "header"], function(vue, vueRouter, router, header) {
  vue.use(vueRouter);
  var routes = new vueRouter({
    routes: router
  });//歡迎加入全棧開發交流圈一塊兒學習交流：864305860
  new Vue({
    router: routes,
    data: function(){
      return {
        aa: true
      };
    }
  }).$mount("body");
});//歡迎加入全棧開發交流圈一塊兒學習交流：864305860
複製代碼

結語

感謝您的觀看，若有不足之處，歡迎批評指正。

本次給你們推薦一個免費的學習羣，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。對web開發技術感興趣的同窗，歡迎加入Q羣：864305860，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。