<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;
