嚐鮮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"
},

1. vite

   vite是推薦使用的新工具https://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)