我的项目生成

  1. webpack配置的版本
    间接从github clone即可
    github地址
  2. @vue/cli
npm i -g @vue/clivue create vue-demo-1cd vue-demo-1vue add vue-nextnpm run serve

留神

//package.json可见"dependencies": {  "core-js": "^3.6.5",  "vue": "^3.0.0-beta.1"},

  1. vite

    vite是举荐应用的新工具https://github.com/vitejs/vite

    npm init vite-app vue-demo-2cd vue-demo-2npm installnpm run dev

简略的计数器（介绍局部api）

HelloWorld.vue代码

asyncCom.vue

<script>import {onMounted} from 'vue'export default { name: 'asyncCom', async setup(){   onMounted(()=>{     console.log('---');   })   await sleep() }}function sleep(){ return new Promise((resolve)=>{   setTimeout(()=>{     resolve()     console.log(1);   },3000) })}</script>

ToDoList组件

  • 顶部输入框，enter增加新item
  • list须要单项有checkbox和delete，全选性能,以及选中个数的统计
  • 滚动列表，输入框到肯定地位需置顶

    (款式可本人调节)
    toDoList.vue

最初

实现上述步骤之后，置信大家对vue3.0有了初步的理解。。。

生命不息，代码不止。。。

下一篇介绍vue3.0的变动尝鲜vue3.0-理解变动(2)