preface

If your company has used similar todo List products, you are probably familiar with them. Todo List, well known todo List products are Teambition, JIRA, etc. Teambition is charging, and it’s not cheap (but it does work, it’s very powerful).

So, in their own hands a simple, interested students can continue to pay attention to.

This “Todo List: Vue To-do List Task Management” is divided into the following chapters: Chapter 1: Understanding (project construction, implementation of basic functional components) Chapter 2: Dynamic data processing (localStorage + Vuex), which can be added and edited Chapter 3: To-do Item user-defined group Chapter 4: To-do Item Add description, image and other information Chapter 5: Online operation, database Mysql Chapter 6: Multi-person collaborative processing of to-do items, permission management Chapter 7: End: Online publishing

7 chapters are defined initially, and may be added or reduced in actual development.

Scaffolding project

vue init webpack todo-list
Copy the code

The project is older, written a few years ago, so building the project is still the old way, you can follow the Vue CLI3. x build after, does not affect the function behind.

Then let’s look at the overall project structure

Everything is automatically generated except the red box identifier.

You can also see the app.styl file. I used the stylus here.

vue + stylus

npm i stylus stylus-loader -S
Copy the code

After installation, modify the build/utils.js file

const postcssLoader = {
  ...
}

/ / stylusLoader increase
const stylusLoader = {
  loader: 'stylus-loader'.options: {
    sourceMap: options.sourceMap
  }
}

function generateLoaders (loader, loaderOptions) {
  // Array adds stylusLoader
  const loaders = options.usePostCSS ? [stylusLoader, cssLoader, postcssLoader] : [cssLoader]
  ...
}
Copy the code

Thus, the Stylus is ready to use.

vuedraggable

From the name, you should know what VueDraggable is, the drag-and-drop component of Vue. Take a look at an example:

Looking at this picture, do you think it is tailor-made for Todo List?

Vuedraggable git address

npm i vuedraggable -S
Copy the code

After installation, let’s see how to use it.

Todo List base components

Vue is each grouped list, and list-item.vue is each task in the list.

The HTML code for list.vue

<div id="list" class="clearfix">
  <div class="list-group" v-for="(item, index) in listData" :key="index">
    <div class="list-title">{{item.title}}</div>
    <draggable class="draggable" :list="item.list" group="people">
      <transition-group>
        <div class="draggable-item" v-for="element in item.list" :key="element.id">
          <list-item :objData="element"></list-item>
        </div>
      </transition-group>
    </draggable>
  </div>
</div>
Copy the code

The javascript code for list.vue

import ListItem from './list-item'
import Draggable from 'vuedraggable'

export default {
  props: {
    listData: {
      type: [Array].default: () = >[]}},components: {
    ListItem,
    Draggable
  }
}
Copy the code

Here Draggable is the vueDraggable component above, and the usage is also very simple to pull. After introducing modules

<draggable class="draggable" :list="list" group="people">
  <transition-group>
    <div class="draggable-item" v-for="element in list" :key="element.id">
      {{element.name}}
    </div>
  </transition-group>
</draggable>
Copy the code

Just keep the model.

The style corresponding to list.vue is the main part (stylus code)

#list
  height 100%
  background-color #f5f5f5
  padding 20px
  .list-group
    float left
    width 240px
    height 100%
    margin-right 20px
    .list-title
      font-size 14px
      font-weight 700
      margin-bottom 10px
    .draggable
      height 100%
      .draggable-item
        margin-bottom 8px
Copy the code

List-item. vue HTML code

<template>
  <div class="item">
    <span>{{objData.name}}</span>
  </div>
</template>

<script>
export default {
  props: {
    objData: {
      type: [Object],
      default: () => {}
    }
  }
}
</script>

<style lang='stylus'>
  @import './list-item.styl';
</style>
Copy the code

This is super simple at present, the object inside the name can be displayed, behind the main around this to do the function.

The next step is to reference the list.vue component.

Reference the Components /list.vue component

<template> <list :listData="todoData"></list> </template> <script> import List from '.. /components/list' export default {data () {return {todoData: [{title: 'to be processed ', list: [{id: 1, name: 'test 1}...]}, {title:' ongoing 'list: [{id: 6, name:' test 6 '}...]}, {title: 'has been completed, the list: [{id: 11, name: 'test 11'}}}}...]], the components: {List}} < / script >Copy the code

conclusion

The core of the first chapter is the use of the Draggable component, and then, with a little styling, the todo List cone. Please stay tuned for more updates.