无需npm安装，能否引入vue2-daterange-picker组件？

步骤1：引入CDN资源 #

因为无法安装npm包，直接通过CDN引入组件的CSS和JS文件，确保在Vue加载之后引入组件JS。

• 在@section('css')中添加组件样式：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue2-daterange-picker@0.6.7/dist/vue2-daterange-picker.min.css">

• 在页面Vue实例的<script>标签之前，添加组件JS引入：

<script src="https://cdn.jsdelivr.net/npm/vue2-daterange-picker@0.6.7/dist/vue2-daterange-picker.min.js"></script>

步骤2：完善Vue实例配置 #

补充组件所需的data属性，并注册组件（CDN引入后组件为全局注册，也可显式注册确保兼容性）：

修改后的完整代码如下：

@extends('layout')
@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue2-daterange-picker@0.6.7/dist/vue2-daterange-picker.min.css">
<style>
/* 自定义样式可写在这里 */
</style>
@endsection
@section('content')
<date-range-picker
       v-model="dateRange"
       :date-format="dateFormat"
></date-range-picker>

<script src="https://cdn.jsdelivr.net/npm/vue2-daterange-picker@0.6.7/dist/vue2-daterange-picker.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                api: api_url,
                dateRange: null, // 绑定日期范围的变量
                dateFormat: 'YYYY-MM-DD' // 自定义日期格式
            }
        },
        components: { 
            // CDN引入后组件已全局注册，可省略此部分；若需显式注册，添加如下代码：
            // DateRangePicker: window.Vue2DaterangePicker
        },
        computed: {
            
        },
        mounted: function () {

        },
        created: function () {

        },
        methods: {

        },
        watch: {

        },
    });
</script>
@endsection

说明 #

• 若组件版本有更新，可替换CDN链接中的版本号0.6.7为最新稳定版；
• dateFormat支持moment.js的日期格式语法，可根据需求调整；
• dateRange会以数组形式返回选中的起始和结束日期，例如['2024-01-01', '2024-01-10']。

内容的提问来源于stack exchange，提问作者aziz chachi