小练习-todolist

使用

vue vli2

打包并上传github

第一次上传的时候，发现背景图片加载不出来，控制台查看发现背景图片路径是/static开头 搜索解决办法，修改下面的文件

1. build->utils.js

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../' // 添加一行
      })

2. config->index.js

注意更改的是build对象下的内容
build: {
    // assetsPublicPath: '/', 代码改成下方
    assetsPublicPath: './',
}

重新npm run build 重新上传git

小坑

本地重新运行项目 assetsPublicPath: '/'改正回来

后来发现不应该改dev下的assetsPublicPath: '/'

否则报错

//Refused to load the image 'http://localhost:8080/favicon.ico'  
because it violates the following Content Security Policy directive:  
"default-src 'none'". Note that 'img-src' was not explicitly set,  
so 'default-src' is used as a fallback.;  

练习过程总结

1. 背景图片样式如下，综合写法火狐、IE、移动端不兼容(待查原因)

body {
  height: 100vh;
  width: 100vw;
  background-image: url("./assets/2.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

2. 待办任务内容很长的换行显示 使用CSS 属性 word-break 指定怎样在单词内断行

word-break: break-all;

3. vue列表动画实现 参考了官方文档以及这篇博客, 很受用! 添加标签transition-group,需注意v-fo标签key

<transition-group tag="ul" class="todo-list">
          <li
            v-for="(todo,index) in filterTodos"

            <!--注意这里-->
            :key="index+1" 
            
            :class="{completed: todo.completed, editing: todo === editTodoed}"
          >

按需添加样式

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.v-enter-active,
.v-leave-active {
  transition: all 1s;
}
.v-move {
  transition: transform 1s;
}

/* 要让删除的元素先脱离文档流，旁边的元素才能过渡过来 */
.v-leave-active {
  position: absolute;
}

4. 其他

• 发现不错的找图网站
• 大佬的demo