记录vue + ts + vscode 踩的一些坑

目录1、$router 在Vscode中标红的解决方法2、引入 js 模块时3、几种提取静态文件的方法用index.html中引入用axios引入json文件4、mixin5、vue.config.js的一些设置1、$router 在Vscode中标红的解决方法新建一个d.ts文件，写入如下代码import Vue from 'vue'import VueRouter from 'vue-...

inooryo

4602人浏览 · 2019-07-02 16:33:55

inooryo · 2019-07-02 16:33:55 发布

1、$router 在Vscode中标红的解决方法

新建一个d.ts文件，写入如下代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Route } from 'vue-router'


declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter,
    $route: Route
  }
}

2、引入 js 模块时

有时候引入别的 js 文件时，会报错
Could not find a declaration file for module

可在vue脚手架生成的 shims-vue.d.ts 文件中添加如下代码

declare module 'v-charts/lib/pie.common'

3、几种提取静态文件的方法

有时候需要从 public/static 中获取静态文件，有以下几种方法

用index.html中引入

<!-- vue-cli 3.0 生成 -->
<script src="./public_js/index.js"></script>

<!-- vue-cli 2.0 生成 -->
 <script src="./static/public_js/index.js"></script>

<!-- 即 3.0 不需要写 public -->
<!-- 引入代码可放在 <head></head> 里 -->

index.js内的写法

const t = 'hello word'

// 在vue文件中，可直接使用，所以需要注意命名的问题
// 但在别的地方，如封装好的 axios 中无法获取

// 需要在别的文件中获取时 或 模块化js时
window.t = 'hello word'

// 两种方法都需在 shims-vue.d.ts 声明

declare var 'v-charts/lib/pie.common'

考虑过使用模块化的 js 文件引入，但因为模块化的js 会产生异步引入的问题，所以此处不推荐

用axios引入json文件

import axios from './axios'

// vue-cil 2.x 
const baseUrl = './static/'

// vue-cil 3.x
const baseUrl: string = './'

export const getStates = ( fileName: string) => {
  let url = baseUrl + fileName
  return axios.get(url);
};

// 在使用页面引入这个函数即可

4、mixin

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

declare module 'vue/types/vue' {
  interface Vue {
    resAlert(res: any, msg: string): void,
  }
}

// 一定要写 @Component 
@Component 

export class ResResult extends Vue {

  resAlert(res: any,msg :string): void {
    let type :any = res.code == 0 ? 'success' : 'error'
    let message :string = res.code == 0 ? `${msg}成功` : `${msg}失败，${res.msg}`

    this.$message({
      showClose: true,
      message,
      type
    })
  }
}

5、vue.config.js的一些设置

module.exports = {
  publicPath: './',
  devServer : {
// 所有路径都指向同一个地址
    proxy:`地址`,
// 分路径
	proxy: {
	      '/api': {
	        secure: true,
	        pathRewrite: {
	          '^/api': '/api'
	        },
	        target: '地址',
	        changeOrigin: true
	      }, 
	  },
  lintOnSave: false,
  
  // 设置路径别名
  chainWebpack: (config) => {
    config.resolve.alias
      .set('public', resolve('public'))
  }
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^