摘要:官方推薦使用開發(fā)項(xiàng)目但是在我在打包后沒(méi)有解決好如何打包成的問(wèn)題。在頁(yè)尾,通過(guò)引入后,有一段配置代碼的簡(jiǎn)單配置加載入口模塊在下載完成后,會(huì)自動(dòng)加載入口模塊。即入口文件語(yǔ)法規(guī)范遵循規(guī)范,可以像一般書寫模塊代碼。
vue官方推薦使用webpack+vue-cli開發(fā)Vue項(xiàng)目 但是在我在webpack npm run dev 打包后沒(méi)有解決好如何打包成apk的問(wèn)題。所以就無(wú)奈的使用的seajs了。點(diǎn)擊進(jìn)入seajs官網(wǎng)
文章垃圾勿噴?。。?/p> 一、seajs簡(jiǎn)單介紹 seajs使用方法
1、下載"seajs-text.js"和"seajs-css.js"并在頁(yè)面引用,因?yàn)閟eajs不支持引用html和css。
2、在 hello.html 頁(yè)尾,通過(guò) script 引入 sea.js 后,有一段配置代碼:
// seajs 的簡(jiǎn)單配置 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)加載入口模塊。頁(yè)面中的代碼就這么簡(jiǎn)單。(main.js即入口文件)
2、seajs語(yǔ)法規(guī)范Sea.js 遵循 CMD 規(guī)范,可以像 Node.js 一般書寫模塊代碼。使用require進(jìn)行模塊間的引用
// 所有模塊都通過(guò) define 來(lái)定義 define(function(require, exports, module) { // 通過(guò) require 引入依賴 var $ = require("jquery"); var A = require("./a"); // 通過(guò) exports 對(duì)外提供接口 exports.doSomething = ... // 或者通過(guò) module.exports 提供整個(gè)接口 module.exports = ... });
上面就是 Sea.js 推薦的 CMD 模塊書寫格式。如果你有使用過(guò) 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){ //通過(guò)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"); //引用首頁(yè)組件 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://systransis.cn/yun/81518.html
相關(guān)文章
seajs和requirejs的那些事兒
摘要:遵循的是異步模塊定義規(guī)范,遵循的是通用模塊定義規(guī)范。規(guī)范的不同,導(dǎo)致了兩者的不同。在嘗試讓第三方類庫(kù)修改自身來(lái)支持,目前只有少數(shù)社區(qū)采納。是沒(méi)有明顯的,是明顯沒(méi)有。無(wú)這方面的支持。 發(fā)布之后發(fā)現(xiàn)存在一個(gè)顯示的問(wèn)題,大家可以移步到我的簡(jiǎn)書參考,謝謝大家!??!我的簡(jiǎn)書《seajs和requirejs技術(shù)指導(dǎo)文檔》 昨天到今天,老衲翻閱數(shù)十篇技術(shù)文檔,為了搞明白seajs(CMD)和 req...
seajs 源碼解讀
摘要:本文主要簡(jiǎn)單地解讀一下的源碼和模塊化原理。其中,是這次源碼解讀的核心,但我也會(huì)順帶介紹一下其他文件的作用的。對(duì)代碼比較簡(jiǎn)單,其實(shí)就是聲明一下全局的命名空間。然而,真正的核心在于處理模塊依賴的問(wèn)題。 seajs 簡(jiǎn)單介紹 seajs是前端應(yīng)用模塊化開發(fā)的一種很好的解決方案。對(duì)于多人協(xié)作開發(fā)的、復(fù)雜龐大的前端項(xiàng)目尤其有用。簡(jiǎn)單的介紹不多說(shuō),大家可以到seajs的官網(wǎng)seajs.org參看...
使用seajs進(jìn)行模塊管理
摘要:一類是以國(guó)內(nèi)的等類庫(kù)為代表的大教堂模式。在大教堂模式下,所有組件都是顆?;K化的,各組件之間層層分級(jí)環(huán)環(huán)相扣。在集市模式下,所有組件彼此獨(dú)立職責(zé)單一,各組件通過(guò)組合松耦合在一起,協(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è)方法暴露出來(lái)。是在自己模塊的作用域中。 JS開發(fā)的問(wèn)題 沖突 依賴 JS引入的文件,產(chǎn)生依賴. 使用命名空間解決: 命名空間的弊端 調(diào)用的時(shí)候 名字比較長(zhǎng). 只能減低沖突,不能完全避免 ...
發(fā)表評(píng)論
0條評(píng)論
閱讀 2095·2021-10-11 10:59
閱讀 936·2021-09-23 11:21
閱讀 3572·2021-09-06 15:02
閱讀 1623·2021-08-19 10:25
閱讀 3380·2021-07-30 11:59
閱讀 2376·2019-08-30 11:27
閱讀 2589·2019-08-30 11:20
閱讀 2980·2019-08-29 13:15