摘要:官方推薦使用開發(fā)項(xiàng)目但是在我在打包后沒有解決好如何打包成的問題。在頁尾,通過引入后,有一段配置代碼的簡單配置加載入口模塊在下載完成后,會(huì)自動(dòng)加載入口模塊。即入口文件語法規(guī)范遵循規(guī)范,可以像一般書寫模塊代碼。
vue官方推薦使用webpack+vue-cli開發(fā)Vue項(xiàng)目 但是在我在webpack npm run dev 打包后沒有解決好如何打包成apk的問題。所以就無奈的使用的seajs了。點(diǎn)擊進(jìn)入seajs官網(wǎng)
文章垃圾勿噴!??!
一、seajs簡單介紹 seajs使用方法1、下載"seajs-text.js"和"seajs-css.js"并在頁面引用,因?yàn)閟eajs不支持引用html和css。
2、在 hello.html 頁尾,通過 script 引入 sea.js 后,有一段配置代碼:
// seajs 的簡單配置 seajs.config({ base: "../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }) // 加載入口模塊 seajs.use("../static/hello/src/main")
sea.js 在下載完成后,會(huì)自動(dòng)加載入口模塊。頁面中的代碼就這么簡單。(main.js即入口文件)
2、seajs語法規(guī)范Sea.js 遵循 CMD 規(guī)范,可以像 Node.js 一般書寫模塊代碼。使用require進(jìn)行模塊間的引用
// 所有模塊都通過 define 來定義 define(function(require, exports, module) { // 通過 require 引入依賴 var $ = require("jquery"); var A = require("./a"); // 通過 exports 對(duì)外提供接口 exports.doSomething = ... // 或者通過 module.exports 提供整個(gè)接口 module.exports = ... });
上面就是 Sea.js 推薦的 CMD 模塊書寫格式。如果你有使用過 Node.js,一切都很自然。
二、項(xiàng)目開始 目錄結(jié)構(gòu)css
images
jsabout
user
...
main.js
seajslib
router
view
index.html
其實(shí)目錄還是很亂的
main.js入口文件define(require,exports,moudle){ //通過require引用路由文件 var Router = require("../router/router"); //定義路由對(duì)象 var router = new VueRouter({ history: true, routes:Router.router }); //創(chuàng)建Vue實(shí)例 var app = new Vue({ el:"#app", router:router, store:store }); }router.js文件
define(require,exports,moudle){ //引用home組件 var app=require("home"); var router = [ { path: "/", name: "index", component: app.app } ] //向外暴露Router接口 exports.router = Router; }home.js
define(function(require,exports,moudle){ //引用html文件 var temp=require("../views/home.tpl"); //引用首頁組件 var index=require("index"); //引用底部組件 var footerCom=require("components/footerCom"); var app={ data:function(){ return{ } }, template:temp, components:{ "index":index.index, "footercom":footerCom.footerCom } } exports.app=app })home.tpl模板
index.tpl模板
***
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/81518.html
相關(guān)文章
seajs和requirejs的那些事兒
摘要:遵循的是異步模塊定義規(guī)范,遵循的是通用模塊定義規(guī)范。規(guī)范的不同,導(dǎo)致了兩者的不同。在嘗試讓第三方類庫修改自身來支持,目前只有少數(shù)社區(qū)采納。是沒有明顯的,是明顯沒有。無這方面的支持。 發(fā)布之后發(fā)現(xiàn)存在一個(gè)顯示的問題,大家可以移步到我的簡書參考,謝謝大家?。。∥业暮啎秙eajs和requirejs技術(shù)指導(dǎo)文檔》 昨天到今天,老衲翻閱數(shù)十篇技術(shù)文檔,為了搞明白seajs(CMD)和 req...
seajs 源碼解讀
摘要:本文主要簡單地解讀一下的源碼和模塊化原理。其中,是這次源碼解讀的核心,但我也會(huì)順帶介紹一下其他文件的作用的。對(duì)代碼比較簡單,其實(shí)就是聲明一下全局的命名空間。然而,真正的核心在于處理模塊依賴的問題。 seajs 簡單介紹 seajs是前端應(yīng)用模塊化開發(fā)的一種很好的解決方案。對(duì)于多人協(xié)作開發(fā)的、復(fù)雜龐大的前端項(xiàng)目尤其有用。簡單的介紹不多說,大家可以到seajs的官網(wǎng)seajs.org參看...
使用seajs進(jìn)行模塊管理
摘要:一類是以國內(nèi)的等類庫為代表的大教堂模式。在大教堂模式下,所有組件都是顆粒化模塊化的,各組件之間層層分級(jí)環(huán)環(huán)相扣。在集市模式下,所有組件彼此獨(dú)立職責(zé)單一,各組件通過組合松耦合在一起,協(xié)同完成開發(fā)兼容性持續(xù)更新中。。。 前端模塊化開發(fā)的價(jià)值 解決命名沖突 我們做項(xiàng)目是常常會(huì)做一些通用功能的封裝,封裝成一個(gè)個(gè)的函數(shù),然后保存在一個(gè)名叫util.js的文件中.這種情況就很有可能在另一個(gè)開發(fā)人員...
JavaScript_模塊化
摘要:默認(rèn)會(huì)有三個(gè)參數(shù),,也可以接受兩個(gè)以上的參數(shù),字符串表示模塊標(biāo)識(shí)。獲取模塊的接口調(diào)用模塊中的定義方法模塊內(nèi)部異步加載模塊,并在加載完成后執(zhí)行指定的回調(diào)函數(shù)。對(duì)象,這種方式可以將模塊內(nèi)部多個(gè)屬性多個(gè)方法暴露出來。是在自己模塊的作用域中。 JS開發(fā)的問題 沖突 依賴 JS引入的文件,產(chǎn)生依賴. 使用命名空間解決: 命名空間的弊端 調(diào)用的時(shí)候 名字比較長. 只能減低沖突,不能完全避免 ...
發(fā)表評(píng)論
0條評(píng)論
閱讀 2166·2021-10-11 10:59
閱讀 995·2021-09-23 11:21
閱讀 3738·2021-09-06 15:02
閱讀 1689·2021-08-19 10:25
閱讀 3513·2021-07-30 11:59
閱讀 2459·2019-08-30 11:27
閱讀 2651·2019-08-30 11:20
閱讀 3043·2019-08-29 13:15