<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;
你可以参考一下我的代码https://github.com/carrieguo/vue.js-todolist
报什么错?
求助!