<template>
    <div :class="['todo-item',todo.completed ? 'completed' :'' ]">
        <input
                type="checkbox"
                class="toggle"
                v-model="todo.completed"
        >
        <label> {{todo.content}}</label>
        <button class="destroy" @click="deletetodo"> </button>
    </div>
</template>
<script>
    export default {
        props: {
            todo: {
                type: Object,
                required: true
            }
        },
        methods : {
            deletetodo(){
                this.$emit("del",this.todo.id);
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .todo-item
        position relative
        background #ffffff
        font-size 24px
        border-bottom 1px solid rgba(0,0,0,.06)
        &:hover
            .destroy:after {
                content: 'x'
            }

        label
            white-space pre-line
            word-break break-all
            padding 15px 60px 15px 15px
            margin-left 45px
            display block
            line-height 1.2
            transition color 0.4s
    &.completed{
        label
        color #d9d9d9
        text-decoration line-through
    }
    .toggle{
        text-align center
        width 400px
        height 40px
        position absolute
        top 0
        bottom 0
        margin auto 0
        border none
        outline none
        appearance none
    }
    .toggle:before{
        content:url('../assets/images/round.png')
        position absolute
        left 12px
        cursor pointer
    }
    .toggle:checked:before{
        content : url('../assets/images/done.png')
        position absolute
        left 12px
        cursor pointer
    }
    .destroy
        position absolute
        top 50%
        right 10px
        bottom 0;
        width 40px
        height 40px
        margin auto 0;
        font-size 30px
        color #cc9a9a;
        margin-bottom 11px
        transition: color 0.2s east-out
        background-color transparent
        appearance none
        border-width 0
        cursor pointer
        outline none
</style>

{
  "name": "todo",
  "version": "1.0.0",
  "description": "vue+webpack示例项目",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=dev webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --config webpack.config.js"
  },
  "author": "yangsx95",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^9.6.1",
    "babel-core": "^6.26.3",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "cross-env": "^5.2.0",
    "css-loader": "^3.1.0",
    "file-loader": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^2.1.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack-dev-server": "^3.7.2"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-loader": "^8.0.6",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  }
}

// webpack 用于打包项目, 得到可以直接在浏览器打开的代码
const webpack = require('webpack'); // webpack
const path = require('path'); // nodejs path模块用于获取绝对路径
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // vueLoader插件，用于加载解析vue资源
const isDev = process.env.NODE_ENV === 'dev'; // 是否是开发环境，开发环境会多出部分配置
const HTMLPlugin = require('html-webpack-plugin');

const config = {
    target: 'web', // 设置webpack编译目标为web平台，webpack-dev-server配置必须配置此项
    entry: path.join(__dirname, 'src/index.js'), // 定义入口文件
    output: {
        filename: 'bundle.js', // 输出为bundle.js
        path: path.join(__dirname, 'dist') // 输出路径为 dist文件夹下
    },
    plugins: [
        new VueLoaderPlugin(), // 依赖vueLoader插件
        new webpack.DefinePlugin({ // 用于设定环境变量
            'process.env': {
                NODE_ENV: isDev ? '"dev"' : '"product"' // 注意要加双引号
            }
        }),
        new HTMLPlugin(), // 依赖html-webpack-plugin,此插件会给项目添加一个html入口页面
    ],
    module: { // 用于定义模块规则
        rules: [
            {
                test: /\.vue$/, // vue结尾的文件，使用vue-loader模块加载器加载
                loader: 'vue-loader'
            },
            {
                test: /\.jsx$/, // jsx 文件采用babel-loader操作
                loader: 'babel-loader'
            },
            {
                test: /\.css$/, // css结尾的文件，使用style-loader，css-loader模块加载器加载
                use: ['vue-style-loader', 'css-loader', 'postcss-loader'] // use可以接受数组，使用多个loader
            },
            {
                test: /\.styl/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    'stylus-loader'
                ]
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/,
                use: [ // 不传入string，而传入对象，对象可以加入配置信息
                    {
                        loader: 'url-loader', // 针对file-loader的封装，将图片/文件转换为base64文本，放入到js文件中
                        options: {
                            limit: 1024, // 用于限定文件大小
                            name: '[name].[ext]' // 文件名规则定义
                        }
                    }
                ]
            }
        ]
    }
};

// 如果是dev环境，就进行webpack-dev-server配置
if (isDev) {
    config.devtool = '#cheap-module-eval-source-map'; // 转换后的代码（仅限行）
    config.devServer = {
        port: 8000,
        host: '0.0.0.0',
        overlay: {
            errors: true // 展示错误到控制台
        },
        // open: true, // 启动后打开浏览器页面
        hot: true, // 热模块更换开关——改组件，此组件会被单独刷新，不会刷新整个页面
    };
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(), // 启用热模块更换
        new webpack.NoEmitOnErrorsPlugin(), // webpack 进程遇到错误代码将不会退出
    );
}
module.exports = config;