07.Vue3.x 实现一个完整的toDoList（待办事项） 【前面知识综合练习】

一、Vue中集成Sass/Scss

1.1 安装sass-loader node-sass

npm install -D sass-loader node-sass

安装完启动项目如果出现"Syntax Error: TypeError: this.getOptions is not a function"的错误，可能是sass-loader版本太高

卸载了重新安装低版本

# 卸载当前sass-loader
npm uninstall --save sass-loader
# 重新安装低版本
npm install -D sass-loader@10.x

1.2 style中配置sass/scss

lang可以配置scss，scoped表示这里写的css只有当前组件有效

现在style中就支持嵌套了。

<style lang="scss" scoped>
  h2 {
    
    text-align: center;
  }
  .todolist {
    
    width: 600px;
    border: 1px solid #eee;
    margin: 0 auto;
    padding: 20px;
    h3 {
    
      color: red;
      font-size: 40px;
    }
  }
</style>

二、实现一个完整的toDolist(待办事项)以及类似京东App搜索缓存数据的功能

功能：

1. 在文本框中输入待办事项，敲回车，就将事项添加到正在进行列表；
2. 勾选正在进行列表项，则该项移动到已经完成；
3. 勾选已经完成列表项，则该项移动回正在进行；
4. 点击正在进行或已经完成项末尾的删除，则删除该项

示例效果图：

逻辑实现：

export default {
   
    name: "App",
    data