Oracle JET(二)Oracle JET使用


  Oracle JET 開發分為 Web 應用程序開發和移動應用程序開發(WebApp)。

  Oracle JET Web 應用程序開發入門:

  使用方法三種:

  • 使用 Oracle JET Yeoman 生成器(手腳架生成)
  • 使用 Oracle JET zip(包含 Oracle JET 和第三方庫,CSS 和 SCSS 文件以及 RequireJS 引導文件的壓縮包)
  • 將 Oracle JET 添加到現有的 JavaScript 應用程序

  這里介紹使用 Yeoman 使用 Oracle JET。(在命令提示符下)

  前期准備:

  1.安裝 Yeoman。 npm install -g yo

  2.安裝 Grunt(用於構建和運行)。 npm install -g grunt-cli

  3.安裝 Oracle JET Yeoman Generator。 npm install -g generator-oraclejet

  創建 Web 應用程序:

  Oracle JET 提供了三種 Web 模板。

  

  三種模板都提供了響應式布局。可以以模板為基礎修改你需要的內容。

  另外有三種像移動應用程序的模板。

  

  選擇一個模板創建 Web :

  1.創建模板。 yo oraclejet [directory] [--template={template-name:[web|hybrid]|template-url|template-file}] [--help]

    參數: directory 指定的目錄文件夾,若未指定,則在當前文件夾創建。若指定目錄不存在,則自動創建。

        template 用於應用程序的模板。可輸入提供的六個模板的其中一個名字。輸入 basic 、navbar 或 navbardrawer 默認為 web。需要使用混合型則需正確寫入如:basic:hybrid 。

        template-url 、template-file 當你需要引入其他鏈接上的模板或本地模板時使用。

        help 顯示 oraclejet Yeoman Generator 用法和選項等幫助。

    舉例使用:輸入命令 yo oraclejet app --template=navbar

  

  2.創建完成。

  

  創建完成后,將會在你的項目中有類似結構

  

  文件介紹:

  • node_modules 包含工具框架使用的 Node.js 模塊。
  • scripts 包含 Grunt 的 oraclejet-build.js 和 oraclejet-serve.js 文件。
  • src 包含網頁內容 CSS 和 JS
  • oraclejetconfig.json 文件默認鏈接。

  3.使用 Grunt 構建 Web 應用程序。(可跳過此步驟)

  使用 grunt build 可以在 Web 發布到瀏覽器之前構建 Web 開發版本。 (注意,命令符需要進入根目錄,如上例創建了 app 文件夾,則需要進入 app ,再執行 grunt 命令)

  grunt build [--theme=themename[:android|ios|web|windows] --themes=theme1,theme2,... --no-sass]

    參數:theme 用於應用程序的主題,默認alta:web,可以指定混合移動主題(alta:android,alta:ios,alta:windows)。另外可以使用自定義主題。

       themes 如果沒有 --theme 指定主題,則使用 --themes 第一個元素作為默認主題。

       no-sass 當使用自定義sass主題時,禁止構建時編譯sass。

  

  4.使用 Grunt 服務 Web。

  使用 Grunt serve 可以在本地 Web 服務器中運行 Web 應用程序進行測試和調試。默認情況下,啟用實時重新加載選項。更改代碼可以立即反應到瀏覽器中,方便調試。

  grunt serve [--server-port=server-port-number --livereload-port=live-reload-port-number --no-livereload --no-sass --no-build --theme=themename[:android|ios|web|windows] --themes=theme1,theme2,...]

    參數:server-port 服務器端口號。未指定為8000。

       livereload-port 實時重新加載端口號。未指定為35729。

       no-livereload 禁用實時重新加載。

       no-build 禁止構建。(已構建)

       其余同 grunt build

  

  5.執行服務后即可在瀏覽器中查看模板。

  

  6.在編寫網頁中使用sass的方法:

  1)在根目錄中,輸入命令添加sass

    yo oraclejet:add-sass

  2)添加主題文件

    yo oraclejet:add-theme themeName

  舉例:

  

  

  3)grunt build --theme=themeName

  4)grunt serve --theme=themeName

  注意:必須指定theme,否則以默認主題執行grunt。

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM