Vue3.0的源码已经开放，满怀激动的搞了一个demo来尝试一下，哇咔咔

vue3.0 源码在Github上，地址 github.com/vuejs/vue-n…

接下来开始编写demo

1.把vue-next克隆下来之后，那就是我们熟悉的，安装依赖，运行，本人使用的是yarn，

命令就是

    yarn //安装依赖
    yarn build //打包
    
    <!--到此你会在发现在packages/vue下面有一个dist文件，其中的vue.global.js  就是我们需要用到的-->

2.建立一个文件夹，之后建立一个index.html文件，将我们得到的vue.global.js引入index.html

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>初试vue3.0</title>
    </head>
    <body>
        <div id="app"></div>
        // 引入vue.global.js
        <script src="./vue.global.js"></script>
    </body>
    </html>

3.接下来创建我们页面展现，搞一个main.js

    在index.html中引入
    <!-- 页面 -->
    <script src="./main.js"></script>
    
    //main.js
    const { createApp, createComponent } = Vue
    // 计数器组件
    const Counter = createComponent({
        // 这个就是相当于 .vue 文件模板
        template: `
            <div class="dateBox">
                <span :class="index==count?'activeClass':''" v-for="(item,index) in dateList" :key="index" @click="chooseClick(index)">{{item}}</span>
                <i></i><i></i>
            </div>
            <div>
                选择日期为
                <span style="color:red">
                  {{dateList[count]}}
                </span>
            </div>
        `,
        // 这个就是相当于 .vue 文件中 的 data()
        data() {
            return {
                dateList: [
                    '2020-01-01',
                    '2020-01-02',
                    '2020-01-03',
                    '2020-01-04',
                    '2020-01-05',
                    '2020-01-06',
                    '2020-01-07',
                    '2020-01-08',
                    '2020-01-09',
                    '2020-01-10'
                ],
                count: 0
            }
        },
        // 这个就是相当于 .vue 文件中的 methods
        methods: {
            chooseClick(index) {
                this.count = index
            }
        }
    })
    
    // 创建一个 跟组件 app
    const App = createComponent({
        // 这个就相对于 在另一个 .vue 文件 引用 Counter 组件，需要在 components 属性局部注册组件
        components: {
            Counter,
        },
        // 挂载到 App 模板中
        template: `
            <div class="vueBox">
                <h3>一个日期选择器</h3>
                <Counter />
            </div>
        `
    })
    
    // 启动
    // container 就是相当于 new Vue() 中 el 元素
    const container = document.querySelector("#app")
    // createApp() 就是相当于 new Vue() 内部返回的就是 new Vue()
    const app = createApp()
    // 挂载组件
    app.mount(App, container)

4.对了还有样式

        /* 样式 */
        .vueBox {
            border: 1px solid #070707;
            border-radius: 5px;
            width: 450px;
            padding: 20px;
            margin: 0 auto;
        }
        .vueBox h3{
            text-align: center;
        }
        .dateBox {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .dateBox span{
            display: inline-block;
            padding: 2px 4px;
            border: 1px solid #dddddd;
            margin-bottom: 10px;
            width: 90px;
            cursor: pointer;
        }
        .dateBox i{
            display: inline-block;
            width: 90px;
            padding: 2px 4px;
        }
        .dateBox .activeClass{
            background: skyblue;
            color: springgreen;
        }

5.大功告成

vue-next（Vue 3.0）初试

Vue3.0的源码已经开放，满怀激动的搞了一个demo来尝试一下，哇咔咔