vue 问题集锦(打包)

1、设置根节点满屏

在写vue应用时，想让根节点满屏，设置height: 100%无效。

 

2、Vue项目打包

（1）npm run build打包后生成一个dist文件夹，放到服务器tomcat的webapps中。

（2）启动tomcat,发现一个空白页，解决方法如下：

https://www.cnblogs.com/muamaker/p/8023522.html

① 找到config-->index.js,build-->util.js,修改成红色框中样式

 

 

（3）打包工具（做到webpack打包vue项目后，可以修改配置文件）

        https://www.cnblogs.com/caimuqing/p/7094364.html

 

 

3、session问题

      https://blog.csdn.net/qq_26566331/article/details/72478923

在main.js中设置 axios.defaults.withCredentials=true;

4、设置cookie

//设置cookie,放在main.js
Vue.prototype.setCookie = function(c_name,value,expiredays) {
  var exdate=new Date()
  exdate.setDate(exdate.getDate()+expiredays)
  document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
};

//获取cookie
Vue.prototype.getCookie=function(c_name) {
  if (document.cookie.length>0)
  {
    var  c_start=document.cookie.indexOf(c_name + "=")
    if (c_start!=-1)
    {
      c_start=c_start + c_name.length+1
      var c_end=document.cookie.indexOf(";",c_start)
      if (c_end==-1) c_end=document.cookie.length
      return unescape(document.cookie.substring(c_start,c_end))
    }
  }
  return ""
};

5、动态给iview组件添加class

<Submenu v-if="item2.children" :class="[item2.children ?'test': '']">
  <template slot="title">
    <span>{{item2.name}}</span>
  </template>
  <MenuItem v-for="item3 in item2.children" :name="item3.state">{{item3.name}}</MenuItem>
</Submenu>

6、给input添加enter事件

<Button type="primary" @click="searchDiagram()" style="float: right">Search</Button>
<Input placeholder="请输入要查询的表名" id="mySearch" v-model="searchText" @keyup.enter.native="searchDiagram()"></Input>

7、使用Element中layout布局

（1）只想在如下布局中的最左和最右加入数据，中间部分空着

<el-row :gutter="20">
  <el-col :span="4"><div class="grid-content bg-purple">项目名称</div></el-col>
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple">注销</div></el-col>
</el-row>

如果只写以上代码，那么将达不到想要的效果（中间那块将不占位置，项目名称和注销会挨在一起）

此时，就需要给<el-col>中的<div>标签设置一个高度即可。

.grid-content{
  min-height: 80px;
}

效果如下：

8、div居中

<div>
    <div style="width='50%; margin:0 auto'">此div居中</div>
</div>

9、给封装好的组件加点击事件

    我最近碰到了一个这样的问题，就是我用了element的radio组件，但是需求是选中了某个radio后，再次点击即取消选中。然而Radio单选框这个组件只有一个change事件，再加一个点击事件也加不上了，那怎么办呢

    解决方法：

1.在封装好的组件上使用，所以要加上.native才能click

2.prevent就相当于..event.preventDefault()

实现代码如下：

 <el-radio v-model="gsjRadio" :label="scope.row" @click.native.prevent="guanlian('gsj',scope.row)">关联</el-radio>

guanlian (name, e) {
      switch (name) {
        case 'gsj':
          e === this.gsjRadio ? this.gsjRadio = '' : this.gsjRadio = e
          break
        case 'xfjd':
          e === this.xfjdRadio ? this.xfjdRadio = '' : this.xfjdRadio = e
          break
        case 'hjh':
          e === this.hjhRadio ? this.hjhRadio = '' : this.hjhRadio = e
          break
        case 'mhjy':
          e === this.mhjyRadio ? this.mhjyRadio = '' : this.mhjyRadio = e
          break
      }
    },

10、项目运行时报以下错误

在我的项目中，出现这个问题是因为找不到对应的component,因为我的vue文件名与scss文件名一致，所以在router中引用时，就识别不了到底引用的是哪个文件。

解决方法如下：

（1）写明要引入的具体文件名

（2）那就是让vue后缀的文件名唯一

后面还会陆陆续续更新，敬请期待~