十. 需求分析与设计

1 功能演示

1) 我的配色方案

2) 成品效果图演示

3) 项目准备

i VSCode 配置

这里我安装了 Vetur 这个插件. 并做了如下配置

示例

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  // 在style样式中, 使用缩进, 缩进是2个空格
  "vetur.format.styleInitialIndent": true,
  // 在script样式中, 使用缩进, 缩进2个空格
  "vetur.format.scriptInitialIndent": true,
  "vetur.format.defaultFormatterOptions": {
    // 用于template部分的格式化
    "prettyhtml": {
      // 超过80个字符的标签换行显示
      "printWidth": 80
    },
    // 用于script部分的格式化
    "prettier": {
      // 使用单引号
      "singleQuote": true,
      // 不使用;号
      "semi": false,
      "proseWrap": "never",
      "printWidth": 80
    }
  },
  // stylus不使用{}
  "stylusSupremacy.insertBraces": false,
  // stylus不使用;
  "stylusSupremacy.insertSemicolons": false
}

演示

ii vue-devtools 扩展安装

2 组件拆分

组件化思想

vue 项目的一个重要的特点就是组件化的思想, 一个页面由多个组件组成, 组件再包含子组件

主页拆分为 3 个组件:

• MainHeader 组件
• MainTodo 组件
  • TodoItem 组件
  • TodoInfo 组件
• MainFooter 组件

3 目录结构与框架搭建

|-- src,
      |-- App.vue,
      |-- main.js,
      |-- assets,
      |   |-- images,
      |   |   |-- bg.jpg,
      |   |   |-- Checked.svg,
      |   |   |-- unChecked.svg,
      |   |-- styles,
      |       |-- global.styl,
      |       |-- reset.css,
      |       |-- test.css,
      |-- components,
          |-- MainFooter.vue,
          |-- MainHeader.vue,
          |-- MainTodo,
              |-- MainTodo.vue,
              |-- coms,
                  |-- TodoInfo.vue,
                  |-- TodoItem.vue,

#