<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';?//?是否是開發(fā)環(huán)境，開發(fā)環(huán)境會多出部分配置
const?HTMLPlugin?=?require('html-webpack-plugin');

const?config?=?{
????target:?'web',?//?設(shè)置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({?//?用于設(shè)定環(huán)境變量
????????????'process.env':?{
????????????????NODE_ENV:?isDev???'"dev"'?:?'"product"'?//?注意要加雙引號
????????????}
????????}),
????????new?HTMLPlugin(),?//?依賴html-webpack-plugin,此插件會給項目添加一個html入口頁面
????],
????module:?{?//?用于定義模塊規(guī)則
????????rules:?[
????????????{
????????????????test:?/\.vue$/,?//?vue結(jié)尾的文件，使用vue-loader模塊加載器加載
????????????????loader:?'vue-loader'
????????????},
????????????{
????????????????test:?/\.jsx$/,?//?jsx?文件采用babel-loader操作
????????????????loader:?'babel-loader'
????????????},
????????????{
????????????????test:?/\.css$/,?//?css結(jié)尾的文件，使用style-loader，css-loader模塊加載器加載
????????????????use:?['vue-style-loader',?'css-loader',?'postcss-loader']?//?use可以接受數(shù)組，使用多個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的封裝，將圖片/文件轉(zhuǎn)換為base64文本，放入到j(luò)s文件中
????????????????????????options:?{
????????????????????????????limit:?1024,?//?用于限定文件大小
????????????????????????????name:?'[name].[ext]'?//?文件名規(guī)則定義
????????????????????????}
????????????????????}
????????????????]
????????????}
????????]
????}
};

//?如果是dev環(huán)境，就進行webpack-dev-server配置
if?(isDev)?{
????config.devtool?=?'#cheap-module-eval-source-map';?//?轉(zhuǎn)換后的代碼（僅限行）
????config.devServer?=?{
????????port:?8000,
????????host:?'0.0.0.0',
????????overlay:?{
????????????errors:?true?//?展示錯誤到控制臺
????????},
????????//?open:?true,?//?啟動后打開瀏覽器頁面
????????hot:?true,?//?熱模塊更換開關(guān)——改組件，此組件會被單獨刷新，不會刷新整個頁面
????};
????config.plugins.push(
????????new?webpack.HotModuleReplacementPlugin(),?//?啟用熱模塊更換
????????new?webpack.NoEmitOnErrorsPlugin(),?//?webpack?進程遇到錯誤代碼將不會退出
????);
}
module.exports?=?config;