zoukankan      html  css  js  c++  java
  • vue-cli 3.0 + elementUI踩坑记录

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

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

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

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

    import 和 module.exports (node语法)不能在一个文件内同时使用,可用 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,直接在里面定义变量@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', '');
            }
          }

        }
      }
    }

  • 相关阅读:
    ASP.NET很容易的图片裁剪功能
    ASP.NET 你肯定会用到的图片裁剪功能,可按长度或宽度裁剪,也能绘制一个更大图
    最简单的设置Title和关键字方法,方便你做搜索引擎检索
    ASP.NET 图片压缩,等比压缩图片
    不安装MVC3环境在IIS7上部署MVC3项目
    移动端布局(rem+dpr)
    H5网页打开APP
    第二次作业
    第四次
    第三次作业
  • 原文地址:https://www.cnblogs.com/92xcd/p/9933428.html
Copyright © 2011-2022 走看看