安装插件；

npm i bootstrap-datepicker
Bash

然后引入 css 文件；
resources/assets/sass/app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

@import "~bootstrap-datepicker/dist/css/bootstrap-datepicker";
JavaScript

引入 css 文件使用的是 import ；
路径可以点开 node_modules 目录查看；
除了引用 node_modules 目录下的文件还可以引用自己创建的文件；
比如说创建一个 resources/assets/js/bootstrap-datepicker.js 文件；

require('bootstrap-datepicker/dist/js/bootstrap-datepicker');
$('.datepicker').datepicker();
JavaScript

引入 js 文件使用的是 require ;
在 resources/assets/js/app.js 中引入 bootstrap-datepicker ；

require('./bootstrap');
require('./bootstrap-datepicker');
JavaScript

编译合并压缩：

npm run prod
Bash

创建示例路由 routes/web.php ;

Route::view('mix/view', 'mix.view');
PHP

创建视图文件 resources/views/mix/view.blade.php ；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>

<input class="datepicker" type="text">

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
HTML

这里使用 asset() 函数生成资源链接；

一个日期插件就这样完成了；
查看源代码可以发现所有的 css 和 js 内容都合并成了 app.css 和 app.js；

    内容分页 1 2 3 4
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。