js里面怎么引用别的js，我使用import为什么会报错？

Question

我想不使用webpack来写vue组件，将不同的vue实例写在不同的js文件中，就是不知道怎么引入。使用import不知道为什么会报错？？求救

这是一行日历的组件，想被引入

//一行日历vue组件
var calendarLine=Vue.extend({
    props:['items','cur','sel','month'],
    //避免所有组件实例使用一个data对象，所以需要写函数返回创建
    data(){
        return {};
    },
    //模板
    template:`<tr><td v-for="item in items" v-bind:class="{'dp-last':month!=item.month,'dp-today':cur==item.data,'dp-select':sel==item.data}"><span @click="click(item)">{{item.day}}</span></td></tr>`,
    methods:{
        click(item){
            //派发事件，在实例上触发它，沿父链冒泡遇到一个监听器后停止
            this.$dispatch('click',item.data)
        }
    }
});
export {calendarLine};

这是整个日历组件

//自执行，闭包
import {calendarLine} from './calendarLine'
console.log(calendarLine)
(function (window){
    
    //获取日历格式函数
    //返回一个二维数组，格式：
    //[[{month:8,day:28,data:"2016-8-28"},{}...],
    // [{month:9,day:7,data:"2016-9-7"},....],
    // [...]
    // ....
    //]


    //整个日历组件
    var calendar=Vue.extend({
        props:['date'],
        //同理，要求要用函数
        data(){
            var d='';  //显示日历的
            var len=(''+this.data).length;
            //看有无date先
            if(!this.date||(len!=13&&len!=10)){
                //没有
                d=new Date();
            }else{
                //异常值
                d=len==13?new Date(parseInt(this.date)):new Date(this.date*1000);
            }
            var sel='';//选择初始化为空
            //看d是不是date形式
            if(Object.prototype.toString.call(d)==="[object Date]"){
                //是date
                if(isNaN(d.getTime())){
                    //d取不到
                    d=new Date();
                }else{
                    //取到
                    sel=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
                }
            }else{
                d=new Date();
            }

            //这里不知道
            if(!this.date){
                sel='';
            }

            var curTime=new Date();//当前的时间
            var cur=''+curTime.getFullYear()+'-'+(curTime.getMonth()+1)+'-'+curTime.getDate();//当前日期字符串格式
            var y=d.getFullYear();
            var m=d.getMonth()+1;
            var data=getCalendar(d.getFullYear(),d.getMonth()+1);
            return {
                cur:cur,
                sel:sel,
                y:y,
                m:m,
                data:data,
                show:false
            }
        },
        template:`
            <div class="input-wrap">
                <input type="text" class="input middle-input" 
                @focus="show=true" v-model="sel">
            </div>
            <div class="dp" v-show="show">
                <div class="dp-header">
                    <a class="dp-h-1" @click="cy(-1)">«</a>
                    <a class="dp-h-2" @click="cm(-1)">‹</a>
                    <span class="dp-ym">{{y}}年{{m}}月</span>
                    <a class="dp-h-3" @click="cm(1)">›</a>
                    <a class="dp-h-4" @click="cy(1)">»</a>
                </div>
                <table class="dp-table">
                    <thead>
                        <tr>
                            <th><span>一</span></th>
                            <th><span>二</span></th>
                            <th><span>三</span></th>
                            <th><span>四</span></th>
                            <th><span>五</span></th>
                            <th><span>六</span></th>
                            <th><span>日</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr is="calendar-line" v-for="cell in data" :items="cell" :cur="cur" :sel="sel" :month="m"></tr>
                    </tbody>
                </table>
                <div class="dp-footer"><a @click="clickNow">{{sel}}</a><span class="btn btn-ok" @click="show=false">确定</span></div>
            </div>`,
        methods:{
            cm(direct){
                //修改this.m
                if(direct=="-1"){
                    if(this.m==1){
                        //$emit触发当前实例的事件,参数都会发给监听函数
                        this.$emit('init',parseInt(this.y)-1,12);
                    }else{
                        this.$emit('init',this.y,parseInt(this.m)-1)
                    }
                }else{
                    if(this.m==12){
                        this.$emit('init',parseInt(this.y)+1,1);
                    }else{
                        this.$emit('init',this.y,parseInt(this.m)+1)
                    }
                }
            },
            cy(direct){
                //修改this.y
                if(direct=="-1"){
                    this.$emit('init',parseInt(this.y)-1,this.m);
                }else{
                    this.$emit('init',parseInt(this.y)+1,this.m)
                }
            },
            clickNow(){
                //点击回到当前时间日期的日历
                var t=new Date();
                var y=t.getFullYear();
                var m=t.getMonth()+1;
                console.log(m);
                var d=t.getDate();
                this.$emit('init',y,m);
            },
            foc(){
                this.show=true;
            },
        },
        events:{
            //切换日期，传进年,月
            init(y,m){
                //更换新的显示日期
                this.data=getCalendar(y,m);
                //
                this.y=y;
                this.m=m;
            },
            //监听从子组件传来的
            click(data){
                this.sel=data;
                var arr=data.split('-');
                var m=arr[1];
                var y=arr[0];
                //这里的date实际上是父组件的date,也就是time
                this.date =new Date(arr[0],arr[1]-1,arr[2]).getTime();
                if(m==this.m){
                    //点击的是当前月份的就不用更新data    
                }else{
                    this.y=y;
                    this.m=m;
                    this.data=getCalendar(y,m)
                }
            }
        },
        components:{
            'calendar-line':calendarLine
        }
    });

    //把calendar加进window的conponents中
    window.components=window.components||{};
    window.components.calendar=calendar;
})(window);    

运行结果

Answer 1

import是ES6新增的模块化标准，对于不支持最新标准的浏览器端，可以用babel转换成es5的模块化写法，不过需要注意的是，需要转换成AMD规范，然后再使用requirejs或者browserify打包。如此以来你会发现，反而更加复杂。所以，为何不直接使用webpack呢，webpack支持各种模块化规范，而且就vuejs来讲，有脚手架工具搭建基于webpack的开发环境，只需简单自定义的配置。所以，使用webpack吧

Answer 2

一模一样。。。请问你解决了吗