踩坑合集Vue2、TypeScript 、Vue CLI

tw_zgn
519 阅读1分钟

一. Vue CLI

1. 使用git提交代码时报错，提示文件名错误不符合规范

  • 解决办法：在 .eslintrc.js 文件中 加入
 rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 0
  },

2. 在Vue CLI中使用 svg-sprite-loader  处理svg图标时的配置文件

  • 解决办法：在vue.congfig.js 中 输入以下代码
const path = require('path')

module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    const dir = path.resolve(__dirname, 'src/assets/icons')

    config.module
      .rule('svg-sprite')
      .test(/.svg$/)
      .include.add(dir).end() // 包含 icons 目录
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({ extract: false }).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{ plainSprite: true }])
    config.module.rule('svg').exclude.add(dir)
  }
}
// 其他 svg loader 排除 icons 目录

3. 处理报错

  • ‘ WebpackModuleApi' is not defined no-undef ’

解决办法：在 .eslintrc.js 文件中 加入

globals: { 
    "__WebpackModuleApi": true
  },
  • 如果svg图片文件带有fill 属性，会有默认的颜色，且无法被覆盖

解决方法 :

  1. 在iconfont.cn下载时候，先添加至项目-批量操作-去除颜色

  2. 使用svgo-loader

      • 安装：yarn add --dev svgo-loader
      • 配置在在vue.congfig.js 中 输入以下代码：
.use('svgo-loader').loader('svgo-loader')
.tap(options => ({ ...options, plugins: [{ removeAttrs: { attrs: 'fill' } }] })).end()
  • 这种写法如果报错“ # svg loader Error: Plugin name should be specified”，请使用下面这种
.use('svgo-loader').loader('svgo-loader')
.tap(options => ({ ...options, plugins: [{ name: 'removeAttrs', params: { attrs: 'fill' } }] })).end()

二. TypeScript

1. TypeScript 中，将多个svg同时引入到一个文件中，注意路径

let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {
    importAll(require.context('../assets/icons', true, /.svg$/));
} catch (error) {
    console.log(error);
}

2. 在TypeScript中，使用js报错

  • 解决办法是在tsconfig.json文件中加一句
//错误信息
Virtual script not found, may missing <script lang="ts"> / "allowJs": true / jsconfig.json.
//解决方法
"allowJs": true,

3. 在vue中使用ts

import Vue from "vue";
import { Component,Prop } from "vue-property-decorator";

@Component   //装饰器
export default class MyComponent extends Vue {
    //初始数据可以直接声明为实例的 property
    @Prop(Number) MyProp:number|undefined;
}
  • 如何使用"vue-property-decorator"
@Component({
  components: { Youcomponent },//引用非全局组件时候，此为必填项
})
  • props报错

通过父组件向子组件传递的值，直接赋值给子组件的变量，可能会为undefind

三、git 相关

  • 有时候编译器，浏览器都未报错，且程序功能正常，但是git会给出报错可以使用这种方法跳过git检查
git commit --no-verify -m "修改了某部分内容"
avatar
文章
阅读
粉丝