![8f1a71c074d2ead8b99ef3c6723f2efb.gif](https://i-blog.csdnimg.cn/blog_migrate/9335d5cf95c84f3762e70447eadec198.gif)
点击上方蓝色字体,关注我们
1.搭建脚手架项目第一步:搭建脚手架,搭建好了之后我们安装sass.安装方法是先安装sass的依赖包 npm install --save-dev sass-loader然后Sass-loader依赖于node-sass,所以要安装node-sass ,直接命令npm install --save-dev node-sass 。如果没有安装成功可以用cnpm来安装,命令
npm install -g cnpm -- registry=https://registry.npm.taobao.org来安装cnpm,cnpm安装成功之后就能用命令cnpm -v检测cnpm的版本。
如果sass安装成功我们就能在package.json里看到如下红框的两个地方:
安装好sass之后在webpack.base.conf.js文件夹下配置
sass使用$符号来标识变量,在要用到scss的组件里面的style标签上加上lang="scss",在app.vue文件定义一个背景颜色变量,应用到css样式中,背景变成灰色,说明已成功配置好sass
直接上代码:
先看一下目前实现的效果长什么样子:
目前当我们选中时,会出现划线和勾选对勾,当我输入"新的学习计划"并点击"添加计划"按钮之后效果如下:
点击"已完成"查看已完成的计划:
点击"未完成"查看未完成的计划:
当我点击删除未完成里的"新的学习计划"之后,此时未完成里只剩"学习计划2",并且所有计划里的"学习计划2"也一并被删除了:
同样,当我点击删除已完成里的"学习计划3"之后,此时已完成里只剩"学习计划1",并且所有计划里的"学习计划3"也一并被删除了: