尝鲜vue3.0-从ToDoList开始（1）

项目生成

1. webpack配置的版本 直接从github clone即可 github地址
2. @vue/cli

npm i -g @vue/cli
vue create vue-demo-1
cd vue-demo-1
vue add vue-next
npm run serve
复制代码

** 注意 **

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

3. vite

vite是推荐使用的新工具github.com/vitejs/vite

npm init vite-app vue-demo-2
cd vue-demo-2
npm install
npm 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)