静态文件
HDCMS / 更新于7个月前

静态文件

[TOC]

开发环境

模块的前台文件使用NPM过行管理,首先要配置模块的开发环境

  1. 进入模块目录安装node_modules
    npm i

    如果安装出现提示 runnpm audit fixto fix them, ornpm auditfor details 不用修复

  2. 运行开发监控
    npm run watch

目录说明

目录 说明
Resources/assets/js Vue组件目录:系统会编译成 public/modules/js/app.js
Resources/assets/sass scss样式目录:系统会编译成 public/modules/css/app.css
Resources/assets/images 图片目录:系统会复制到 public/modules/模块标识/images 目录

运行 npm run watch 命令后系统才会编译或复制目录。

模板使用

使用以下代码引入public/modules/模块标识 目录下的文件。

<link rel="stylesheet" href="{{ Module::asset('edu:css/app.css') }}">
//也可以使用laravel函数 asset
<link rel="stylesheet" href="{{ asset('modules/edu/css/app.css') }}">

复制文件

可以通过修改模块的webpack.mix.js 文件,实现文件或目录的复制。

复制文件
对于CSS栏式还是建议使用修改 Resources/assets/sass/app.scss 文件开发。

mix.copy(__dirname +'/Resources/assets/sass/bar.css', '../../public/modules/edu/css/bar.css');

复制目录
下面是把edu 模块中的 Resources/assets/images 目录复制到 public/modules/edu/images

mix.copyDirectory(__dirname + '/Resources/assets/images', '../../public/modules/edu/images');

脚本编译

可以将多个JS文件合并打包

mix.scripts([
    __dirname+'/Resources/util/user.js',
    __dirname+'/Resources/util/util.js',
], '../../public/modules/a/js/util.js');
我们的使命:传播互联网前沿技术,帮助更多的人实现梦想
Copyright © 2010-2018 houdunren.com All Rights Reserved 京ICP备12048441号-3
: 010-86467608 : 2300071698@qq.com
编码: 海豚日记