Vue3 小白的学习笔记之todo 一

「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」

课程背景

• 我是一名前端小白 开发过程中用到了vue
• 所以我才来学习 了解一下vue3
• 这是一篇跟着教程走的笔记 不具备什么高深的操作
• 不过比你看官方教程应该能省点事

正文开始

1 创建项目

npm init vite-app 15todo   //初始化项目
cd 15todo
npm install  //初始化包
npm i less -D //安装less依赖
npm run dev

2 清除默认样式 因为默认样式会影响到我们的布局，所以我们清除以下默认的样式。 index.css全局样式文件中

:root{
  font-size: 12px;
}
body{
  padding:8px;
}

3 删除HellWord.vue文件 4 重新定义 App.vue文件的内容

<template>
  <div>
    <h1>App根组件</h1>
  </div>
</template>

<script>
export default {
  name:'LiiyApp',
  data(){
    return {
      todolist:[
        {id:1,task:'周一早晨吃烧烤',down:false},
        {id:2,task:'周一晚上哈啤酒',down:false},
        {id:3,task:'周二早晨吃海鲜',down:false},
      ]
    }
  }
}
</script>
<style lang="less" scoped>

</style>

注意 style 中的scoped是为了防止样式穿刺，也就是影响别的组件中的样式。之前都没有学会，这里特别说明一下。

5 创建todolist组件 components下面创建目录 todo-list 目录下创建index.vue文件

<template>
  <div>todo list 组件</div>
</template>

<script>
export default {
    name:"TodoList"
}
</script>

<style lang="less" scoped>

</style>

6 app.vue中引入组件

7 main.js中引入boostrap

import './assets/css/bootstrap.css'

8 todolist组件中编辑基本的html结构

<template>
    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <div class="form-check" >
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input" value="">Option 1
          </label>
        </div>
        <div>
            <span class="badge badge-pill badge-success">成功</span>
          <span class="badge badge-pill badge-warning">警告</span>
        </div>
      </li>
  </ul>
</template>

<script>
export default {
    name:"TodoList"
}
</script>

<style lang="less" scoped>

</style>

这时候就可以看到最基本的效果了