1 体验效果
1.1 配置前
按住Ctrl键,用鼠标左键点击挂载在Vue原型上的自定义属性时,无法自动跳转到该属性定义的对应位置,只能通过全局搜索查找,效率低下。
1.2 配置后
按住Ctrl键,用鼠标左键点击挂载在Vue原型上的自定义属性时,可以非常方便地自动跳转到该属性定义的对应位置,开发效率大大提升。
2 项目开发环境配置
配置完成后,重启vscode才能生效
2.1 Vue原型上挂载自定义属性举例
// src/commom/index.js
import Request from "./request"
import Constant from "./constant"
import Utils from "./utils"
const common = {
Request,
Constant,
Utils
}
export default function install (Vue, options) {
Object.entries(common).forEach(([key, value]) => {
Vue.prototype['$' + key] = value
})
}
2.2 新增Vue自定义属性类型声明文件
// src/types/vue.d.ts
import Request from '@/common/request'
import Constant from '@/common/constant'
import Utils from '@/common/utils'
declare module 'vue/types/vue' {
interface Vue {
$Request: typeof Request;
$Constant: typeof Constant;
$Utils: typeof Utils;
}
}
export { }
2.3 新增jsconfig.json文件
vscode检测javascript项目文件的配置,文件位置处于项目根目录下
{
"compileroptions": {
"moduleResolution": "node",
"module": "commonjs",
"target": "es6",
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"],
"include": ["src/**/*"]
}