码迷,mamicode.com
首页 > 其他好文 > 详细

vue-cli 3.0 + elementUI踩坑记录

时间:2018-11-09 10:53:37      阅读:920      评论:0      收藏:0      [点我收藏+]

标签:项目   onkeyup   页面   input   second   import   property   处理   3.0   

公司的一个后台项目,自己人用,没有兼容性要求。

一直兼容ie8的我,是时候放飞自我了。

下面是暂时遇到的一些问题。

error:Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘ 

import 和 module.exports 不能在一个文件内同时使用,可用 export default 

~~~~~~~~~~~~~~~~

有时候封装模块js里需要使用到element-ui某些功能,如弹窗:

import {Notification} from ‘element-ui‘;

Notification.error({
  title: ‘错误‘,
  message: ‘这是条错误消息‘
});

~~~~~~~~~~~~~~~~

el-input 可以通过绑定@keyup.enter.native来实现覆盖原有事件

el-button不可以,可以自己注册一个事件实现回车登录事件

document.onkeyup = function (e) {

var code = e.charCode || e.keyCode;
    if (code == 13) {
       self.submitForm(‘ruleForm2‘);
  }
}

~~~~~~~~~~~~~~~~

报错:did you register the component correctly? For recursive components, make sure to provide the "name" option(组件引进来后没有注册)

export default {
  name: ‘home‘,
  components: {
     HelloWorld//这里注册
  }
}

 

~~~~~~~~~~~~~~~~

在vue-cli3中使用less

安装less依赖包,<style lang="less"></style>

在style标签内导入外部less
@import "./style/index.less"; @import url("./style/index.less");
在main.js导入外部less
import ‘./style/index.less‘;

在main.js里引入了正确路径的公共index.less,直接在里面定义变量@width:100px;在别的页面直接引用是不生效的(about.vue)

~~~~~~~~~~~~~~~~

写项目在本地的地址调用线上接口就存在跨域,vue.config.js proxy设置:

module.exports = {
  baseUrl: ‘./‘,//打包后打开index文件报错设置此处
  devServer: {
    port: 8085, // 端口号
    host: ‘localhost‘,
    open: true, //配置自动启动浏览器
    proxy: {//设置代理处理跨域问题
      ‘/api‘: {
        target: ‘http://192.168.xxx.xxx:8501/‘,
        ws: true,
        changOrigin: true,
        pathRewrite: function(path, req) { //重写路径,不然会在你的目标路径里多一个/api,导致路径不对
          return path.replace(‘/api‘, ‘‘);//这注意了,这里正则写的好,下面的匹配怎么写都没问题,我这里就是随便复制文档来用,下面写个api2和这里匹配冲突了,后来改成‘/second‘
        }
      },
      ‘/second‘: {
        target: ‘http://192.168.xxx.xxx:8891/‘,
        ws: true,
        changOrigin: true,
        pathRewrite: function(path, req) {
          return path.replace(‘/second‘, ‘‘);
        }
      }

    }
  }
}

vue-cli 3.0 + elementUI踩坑记录

标签:项目   onkeyup   页面   input   second   import   property   处理   3.0   

原文地址:https://www.cnblogs.com/92xcd/p/9933428.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!