尝鲜vue3.0-从ToDoList开始(1)
码农天地 -项目生成webpack配置的版本
直接从github clone即可
github地址
@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"
},
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添加新itemlist需要单项有checkbox和delete,全选功能,以及选中个数的统计滚动列表,输入框到一定位置需置顶(样式可自己调节)
toDoList.vue
完成上述步骤之后,相信大家对vue3.0有了初步的了解。。。
生命不息,代码不止。。。
下一篇介绍vue3.0的变化尝鲜vue3.0-了解变化(2)
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。
上一篇: html 父子页面iframe双向发消息
下一篇: 尝鲜vue3.0-了解变化(2)