yarn add webpack webpack-cli webpack-dev-server
touch webpack.config.js
// webpack.config.js
module.exports = {
    mode: "development",
    entry: ["./src/index.js"],
    output: {
    	path: path.join(__dirname,'dist'),
    	filename: "bundle.js"
    },
    module: {},
    plugins: {},
    devServer: {}
}

	Vue.component('child',{
        data(){
            return {
                mymessage:this.message
            }
        },
        template:`
            <div>
                <input type="text" v-model="mymessage" 
                @input="passData(mymessage)"> </div>
        `,
        props:['message'],//得到父组件传递过来的数据
        methods:{
            passData(val){
                //触发父组件中的事件
                this.$emit('getChildData',val)
            }
        }
    })
//┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┅┄＊
	Vue.component('parent',{
        template:`
            <div>
                <p>this is parent compoent!</p>
                <child :message="message"
                v-on:getChildData="getChildData"></child>
            </div>
        `,
        data(){
            return {
                message:'张不怂'
            }
        },
        methods:{
            //执行子组件触发的事件
            getChildData(val){
                console.log(val)
            }
        }
    })
//┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┅┄＊

	 // 挂载
    var app=new Vue({
        el:'#app',
        template:`
            <div>
                <parent></parent>
            </div>
        `
    })

Vue.component('brother1',{
        data(){
            return {
                mymessage:'hello brother1'
            }
        },
        template:`
            <div>
                <p>this is brother1 compoent!</p>
                <input type="text" v-model="mymessage"
                @input="passData(mymessage)"> 

            </div>
        `,
        methods:{
            passData(val){
                //触发全局事件globalEvent
                bus.$emit('globalEvent',val)

            }
        }
    })
 //┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┅┄＊

    Vue.component('brother2',{
        template:`
            <div>
                <p>this is brother2 compoent!</p>
                <p>brother1传递过来的数据：{{brothermessage}}</p>
            </div>
        `,
        data(){
            return {
                mymessage:'hello brother2',

                brothermessage:''
            }
        },
        mounted(){
            //绑定全局事件globalEvent
            bus.$on('globalEvent',(val)=>{
                this.brothermessage=val;
            })
        }
    })
//┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┅┄＊

    //中央事件总线
    var bus=new Vue();

    var app=new Vue({
        el:'#app',
        template:`
            <div>
                <brother1></brother1>
                <brother2></brother2>
            </div>
        `
    })

// 在控制变量改变的时候进行 强制渲染更新

let childrenRefs = this.$refs.elTabs.$children
this.$nextTick(() => {
  childrenRefs.forEach(child => child.$forceUpdate())
})

var newArray = this.questionData.slice(0)
this.questionData = []
this.$nextTick(function () {
  this.questionData = newArray;
})

const gulp = require('gulp') //引入gulp
const less = require('gulp-less') //引入gulp-less处理less语法
const LessAutoprefix = require('less-plugin-autoprefix') //css兼容前缀
const autoprefix = new LessAutoprefix({
    browsers: ['last 2 versions']
})
const del = require('del') //删除文件模块,在每次gulp任务前执行
const babel = require('gulp-babel') //babel
const browserSync = require('browser-sync').create() //自动刷新
const reload = browserSync.reload //reload示例,用于浏览器刷新
const browserify = require('browserify') //模块处理
const source = require('vinyl-source-stream') //将browerify流转换成gulp文件流
const babelify = require('babelify') //用于browserify的babel编译器

//主任务
function main(cb) {
    (async () => {
        await del.sync('dist')
        //less
        gulp.src('./src/index.less').pipe(less({
            plugins: [autoprefix]
        })).pipe(gulp.dest('./dist'))
        //js
        browserify({
            entries:['./src/index.js']
        })
        .transform(babelify,{
            presets: ['@babel/env','@babel/preset-react'],
            plugins: ["@babel/plugin-transform-runtime"]
        })
        .bundle() //打包
        .pipe(source('index.js')).pipe(gulp.dest('./dist'))
        gulp.src('./src/index.html').pipe(gulp.dest('./dist'))
        cb()
    })()

}

//开发环境
function devServer(cb){
    browserSync.init({
        server: {
            baseDir: './dist'
        }
    })
    gulp.watch("./src/**", gulp.series(lessChange,jsChange,htmlChange))
    cb()
}

//检测html变化
function htmlChange(){
    return gulp.src('./src/index.html').pipe(gulp.dest('./dist')).pipe(reload({stream:true}))
}

//检测样式文件
function lessChange() {
    return gulp.src('./src/index.less').pipe(less({
        plugins: [autoprefix]
    })).pipe(gulp.dest('./dist')).pipe(reload({stream:true}))
}

//检测js文件
function jsChange(cb){
    browserify({
        entries:['./src/index.js']
    })
    .transform(babelify,{
        presets: ['@babel/env','@babel/preset-react'],
        plugins: ["@babel/plugin-transform-runtime"]
    })
    .bundle()
    .pipe(source('index.js')).pipe(gulp.dest('./dist')).pipe(reload({stream:true}))
    cb()
}

//default默认任务,用于package.json执行脚本gulp任务
gulp.task('default', gulp.series(main,devServer))