css结合使用详解,的解决方法

Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决方法,

发现问题

运行一下以前的一个Vue+webpack的 vue仿新闻网站  小项目,报错

由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^…^)才找到原因
-v-

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

图片 1 

点开错误的文件,标注错误的地方是这样的一段代码:

图片 2

import {normalTime} from './timeFormat';

module.exports={
  normalTime
};

就是module.exports;

解决方法

同过谷歌查找,和论坛各种搜索:

原因如下:The code above is ok. You can mix require and export. You can‘t mix import and module.exports.

翻译过来就是说,代码没毛病,在webpack打包的时候,可以在js文件中混用require和export。但是不能混用import
以及module.exports

因为webpack 2中不允许混用import和module.exports ,

解决办法就是统一改成ES6的方式编写即可.

图片 3

import {normalTime} from './timeFormat';

export default normalTime;

再次运行:

图片 4

总结

以上就是这文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对帮客之家的支持。

TypeError: Cannot assign to
read only property’exports‘ of object’#Object‘的解决方法, 发现问题
运行一下以前的一个Vue+webpack的 vue仿…

vue过渡和animate.css结合使用详解,vueanimate.css

今天学习了vue过渡和animate.css结合使用,所以,添加一点小笔记。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动画</title>
  <script type="text/javascript" src="vue.js"></script>
  <link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" >
  <style type="text/css">
    p {
      width: 300px;
      height: 300px;
      background: red;
      margin: 10px auto;
    }
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var app = new Vue({
        el:'#box',
        data:{
          show:false
        }
      })
    }
  </script>
</head>
<body>
  <div id="box">
    <!-- 控制数据的值切换显示隐藏 -->
    <button @click="show=!show">transition</button>

    <!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
      <p v-show="show" class="animated"></p>
    </transition> -->

    <!-- 第二种方法 -->
    <!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
      <p v-show="show"></p>
    </transition> -->

    <!-- 多元素运动 -->
    <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
      <p v-show="show" class="animated" :key="1"></p>
      <p v-show="show" class="animated" :key="2"></p>
    </transition-group>
  </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

今天学习了vue过渡和animate.css结合使用,所以,添加一点小笔记。 !DOCTYPE
htmlhtml lang=”en”head me…

文字溢出隐藏后添加省略号,文字溢出隐藏省略号

当我们想让文字溢出后隐藏并添加省略号的效果

在当前容器或父容器必须要设置宽度,否则代码会失效。 

.box{
         width:50%;
         text-overflow :ellipsis;/* 文字隐藏后添加省略号 */
         white-space : nowrap;/* 强制不换行 */
         overflow : hidden;/*自动隐藏文字*/
         width: 20em;/*不允许出现半汉字截断*/
    } 

当我们想让文字溢出后隐藏并添加省略号的效果
在当前容器或父容器必须要设置宽度,…

发表评论

电子邮件地址不会被公开。 必填项已用*标注