Poppy Framework

Appearance

[WIP] Laravel-Mix ​

系统后台集成 layui 作为后台 UI 界面, 元素的使用详见 www.layui.com

前台页面开发 ​

前台页面依赖于 laravel-mix 来进行页面的开发. 下面会对以下的几个部分进行深入解析, 首先,我们先看下如何进行页面的布局和显示 常用文档 : 资源任务编译器 Laravel Mix

文件的位置 ​

# sass 源文件的位置, 使用的样式文件是 web.scss
~/resources/assets/scss/

# 页面资源放置位置
~/module/resources/images

# 监听文件位置, 这里使用的组件是 laravel-mix , 详细文档查看 : https://github.com/JeffreyWay/laravel-mix
~/webpack.mix.js

# 生成 css 的位置
~/public/assets/css/

# 图片的位置
~/public/modules/{user|system|web}/images/

# 访问地址, 这里 {page} 代表需要布局的页面的名称
# 例如 : http://dev.play.com/develop/l/layout.m.homepage
http://{domain}/develop/l/{page}

# 页面命名, 页面命名为 `{page}.blade.php`, 这里支持多层文件夹
~/resources/views

如何运行 ​

# 安装
$ npm install

# 开始监听 scss, 写的 css
$ npm run watch

webpack.mix.js 的配置 ​


mix
   .browserSync({
       // 这里替换地址
       proxy : 'http://dev.{domain}.com/',
       files : [
           "public/resources/js/**/*.js",
           "public/resources/css/*.css",
           "modules/**/resources/views/**/*.blade.php",
           "modules/**/resources/mixes/**/*.js",
           "modules/**/resources/js/**/*.js"
       ]
   })
   .disableNotifications()
   .version()
   /*
   |--------------------------------------------------------------------------
   | develop & backend
   |--------------------------------------------------------------------------
   */
   /* system js
    * ---------------------------------------- */
   .combine([
           'modules/system/resources/libs/jquery/2.2.4/jquery.min.js',
           'modules/system/resources/libs/jquery/form/jquery.form.js',
           'modules/system/resources/libs/jquery/toastr/jquery.toastr.js',
           'modules/system/resources/libs/jquery/pjax/jquery.pjax.js',
           'modules/system/resources/libs/jquery/poshytip/jquery.poshytip.js',
           'modules/system/resources/libs/jquery/validation/jquery.validation.js',
           'modules/system/resources/libs/jquery/data-tables/jquery.data-tables.js',
           'modules/system/resources/libs/jquery/tokenize2/jquery.tokenize2.js',
           'modules/system/resources/libs/jquery/spinner/jquery.spinner.js',
           'modules/system/resources/libs/waves/waves.min.js',
           'modules/system/resources/libs/vue/vue.min.js',
           'modules/system/resources/libs/underscore/underscore.js',
           // hash, 加密使用 @ develop
           'modules/system/resources/libs/jshash/md5.min.js',
           'modules/system/resources/libs/jshash/sha1.min.js',
           // 粘贴板
           'modules/system/resources/libs/clipboard/clipboard.min.js',
           // 编辑器
           'modules/system/resources/libs/simditor/module.js',
           'modules/system/resources/libs/simditor/hotkeys.js',
           'modules/system/resources/libs/simditor/uploader.js',
           'modules/system/resources/libs/simditor/simditor.js',
           // 鼠标滑过提示
         'modules/system/resources/libs/popper.js/popper.min.js',
         'modules/system/resources/libs/bootstrap/js/util.js',
         'modules/system/resources/libs/bootstrap/js/tooltip.js',
           // 图片轮询显示
           'modules/system/resources/libs/jquery/fancybox/jquery.fancybox.min.js',
     ],
     'public/assets/js/system_vendor.js'
   )
   .combine([
           // editor
           'modules/system/resources/libs/ace/ace.js',
           'modules/system/resources/libs/jquery/backstretch/jquery.backstretch.min.js',
           'modules/system/resources/libs/poppy/util.js',
           'modules/system/resources/libs/poppy/cp.js',
           'modules/system/resources/libs/poppy/system/cp.js'
     ],
     'public/assets/js/system_cp.js'
   )
   /* system css
    * ---------------------------------------- */
   .sass(
     'modules/system/resources/scss/system.scss',
     'public/assets/css/system.css'
   )
   .copyDirectory('modules/system/resources/libs/layui', 'public/assets/layui')
   .copyDirectory('modules/system/resources/libs/easy-web', 'public/assets/easy-web')
   .copyDirectory('modules/system/resources/images/libs', 'public/assets/images/libs')
   .copyDirectory('modules/system/resources/images/system', 'public/assets/images/default')
   .copyDirectory('modules/system/resources/fonts/fontawesome', 'public/assets/font/fontawesome')