Vue + TypeScript 踩坑总结

晖鸽發表於 2019-12-9 22:00:00

<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="font-size: 16px; color: rgba(0, 0, 0, 1); padding: 10px; line-height: 1.6; word-spacing: 0; letter-spacing: 0; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif"><h1 data-tool="mdnice编辑器" style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: rgba(0, 0, 0, 1); border-bottom: 2px solid rgba(255, 87, 34, 1); font-size: 1.3em"><span style="display: inline-block; font-weight: normal; background: rgba(255, 87, 34, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px">Vue+TS 踩坑记录与方案总结</h1>
点击跳转-原文地址
<div class="table-of-contents" data-tool="mdnice编辑器"><ul style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc; font-size: 14px"><li>前言</li><li>整个 vue 项目的目录结构<ul style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); font-size: 14px; list-style-type: square"><li>main.ts 中，提示`import App from './App.vue'`处，找不到 App.vue 这个模块</li><li>main.ts 中，往 Vue 的原型 prototype 上挂载全局变量</li></ul></li><li>全局组件注册</li><li>SFC 单 vue 文件组件的基本写法和结构</li><li>computed 计算属性的写法</li><li>watch 监听器的使用<ul style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); font-size: 14px; list-style-type: square"><li>同一个 vue 页面中使用</li><li>父子两个 vue 页面传值后使用 watch 监听</li></ul></li><li>Watch 监听 store 中的数据改变</li><li>vue+ts 中，使用 filter 过滤器</li><li>自定义指令过滤器【待补充】</li><li>watch 监听 router 的变化</li><li>main.ts 中注册路由导航守卫并在组件中使用路由钩子函数</li><li>父子传值 - 子组件修改触发父组件的方法执行</li><li>@Prop 默认参数</li><li>中央总线注册与使用【待解决】</li><li>vue + ts 中使用 vue-echarts</li><li>vue + ts 中使用 Element-ui</li><li>全局 scss 变量</li><li>alias 别名设置</li><li>请求接口的代理设置</li><li>本地服务域名修改</li><li>vue + ts 在 vscode 中的问题<ul style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); font-size: 14px; list-style-type: square"><li>vue-cli 配置了 resolve alias 来声明的路径别名，在引用了 ts 后，vscode 会报错不能识别、模块查找失败：</li></ul></li></ul></div>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">前言</h2>
vue 和 TypeScript 结合的情况下，很多写法和我们平时的写法都不太一样，这里总结我项目开发过程中遇到的问题和问题的解决方案 
有些问题可能还没解决，欢迎各位大佬给与提点。 
另外，使用本文前可以先看vue 官方文档关于 typescript 的使用讲解
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">整个 vue 项目的目录结构</h2>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc; font-size: 14px">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-weight: 500; font-size: 13px">大体用 vue-cli 创建的项目，结构基本不变。</section></li></ul>
这里只写我后来为了解决问题改动的地方
<h3 data-tool="mdnice编辑器" style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px">main.ts 中，提示<code>import App from './App.vue'</code>处，找不到 App.vue 这个模块</h3>
解决方案：
1、将 shims-vue.d.ts 文件一分为二。 
2、在 shims-vue.d.ts 文件同级目录下新建 vue.d.ts（名字不一定叫 vue，如 xxx.d.ts 也可以），然后此文件包含代码如下
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// vue.d.ts
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
</code></pre>
3、而原来的 shims-vue.d.ts 代码修改、新增如下：
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// shims-vue.d.ts
import Vue from 'vue'
import VueRouter, { Route } from 'vue-router'
import { Store } from 'vuex'
declare module 'vue/types/vue' { 
interface Vue { 
$router: VueRouter; 
$route: Route; 
$store: Store<any>; 
// 以下是在main.ts中挂载到Vue.prototype上的变量 
$api: any; 
$mock: any; 
$configs: any; 
} 
}
</code><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px"></code></pre>
<h3 data-tool="mdnice编辑器" style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px">main.ts 中，往 Vue 的原型 prototype 上挂载全局变量</h3>
1、main.ts 配置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// main.ts
import api from "./api/request";
import mock from "./api/mock";
import configs from "./utils/config";
</code><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">Vue.prototype.$api = api;
Vue.prototype.$mock = mock; 
Vue.prototype.$configs = configs; 
</code></pre>
2、shims-vue.d.ts 配置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// shims-vue.d.ts 新增如下
declare module 'vue/types/vue' {
interface Vue {
// ...
// 以下是在main.ts中挂载到Vue.prototype上的变量
$api: any;
$mock: any;
$configs: any;
}
}
</code><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px"></code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">全局组件注册</h2>
注册
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// main.ts
import Page from "@/components/page.vue";
import AllComponent from "@/common/AllComponent.vue";
Vue.component("Page", Page);
Vue.component("all-component", AllComponent);
</code></pre>
使用
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">写法一：
<Page />
写法二：
<all-component />
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">SFC 单 vue 文件组件的基本写法和结构</h2>
一個简陋的 demo，展示 ts 下的 vue 文件中，对于相关功能的使用，重点关注<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(255, 93, 108, 1)"><Script></code>里的代码
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px"><template>

<div class="minos-system-setting" v-if="hideHeader">
<h3>结构示例</h3>
<span>{{ selfKey1 }}</span>
<ul>
 <li :key="item" v-for="item in fatherKey">{{ item }}</li>
</ul>
<button @click="addText">追加文字</button>
<AnotherVue
 :class="['default-class', selfKey1.length > 10 ? 'one' : 'two']"
/>
</div>
</template>
</code><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px"><script lang="ts"> 
import { Component, Vue, Prop, Watch } from "vue-property-decorator"; 
import { Route } from "vue-router"; 
import AnotherVue from "@/components/AnotherVue.vue"; 
@Component({ 
// 组件注册 
components: { 
AnotherVue 
// 'another-vue': AnotherVue 
}, 
// 过滤器 
filters: { 
filterFn1() {} 
}, 
// 属性传递 
props: { 
hideHeader: { 
type: Boolean, 
required: false, 
default: false // 默认属性的默认值 
} 
} 
}) 
export default class ComponentName extends Vue { 
@Prop({ 
type: Boolean, 
required: false, 
default: false // 默认属性的默认值 
}) 
private hideHeader!: boolean | undefined; 
@Prop() private fatherKey: string[]; // 其他没有默认值的传值 
selfKey1: string = "自己的一个变量"; 
// 生命周期 
created() {} 
mounted() {} 
// 计算属性 
get computedKey() { 
return this.selfKey1.length; 
} 
// 监听器 
@Watch("computedKey") 
getcomputedKey(newVal) { 
console.log(newVal); 
} 
// 导航守卫函数 
private beforeRouteEnter(to: Route, from: Route, next: () => void): void { 
console.log("beforeRouteEnter", to, from, next); 
next(); 
} 
// 方法 
addText() { 
this.selfKey1 += "，追加文字！"; 
} 
} 
</script> 
<style lang="scss" scoped> 
@import "@/assets/styles/demo.scss"; 
</style> 
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">computed 计算属性的写法</h2>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// 计算属性
get computedKey() {
return this.selfKey1.length
}
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">watch 监听器的使用</h2>
<h3 data-tool="mdnice编辑器" style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px">同一个 vue 页面中使用</h3>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
</code><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">@Watch('boxHeight') 
getboxHeight(val) { // get+上边括号里的名字 
// xxx 
} 
</code></pre>
<h3 data-tool="mdnice编辑器" style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px">父子两个 vue 页面传值后使用 watch 监听</h3>
子组件监听从父组件传过来的值
1、父组件用属性传值【前提是父组件引入子组件、注册并调用了】
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px"><ziZuJian :oneKey="oneKeyObj" />
</code></pre>
2、子组件要使用的工具引入工作
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">import { Component, Vue, Prop, Watch } from "vue-property-decorator";
</code></pre>
3、子组件 Prop 接受
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">export default class ZiZuJian extends Vue {
@Prop() private oneKey: object
}
</code></pre>
4、子组件 Watch 监听
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">@Watch('oneKey')
getoneKey(newVal,oldVal) {
// 监听成功后要做
log(newVal)
this.myfunction(newVal)
}
</code></pre>
5、父组件（内部）改动值，会被子组件监听
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">export default class FuZuJian extends Vue {
oneKeyObj = {}
...
mounted(){
$.ajax().then(()=>{
 // 适时情况下改动props传递的值，就会被子组件监听到改变
 oneKeyObj = {
 name : '测试'
 }
 oneKeyObj.age = 18
})
}
}
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">Watch 监听 store 中的数据改变</h2>
主要思路是计算属性获取 state 里的数据，watch 再监听计算属性
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">import { Component, Vue, Prop, Watch } from 'vue-property-decorator' // 引入Watch
get stateSomeKey() { // 计算属性
// 监听state下的stateSomeKey对象中的keyName属性，return返回该值
return this['$store'].state.stateSomeKey.keyName
}
@Watch('stateSomeKey') // 与上边计算属性同名
getstateSomeKey(val) { // get+上边括号里的名字
// 监听到变化后，执行对应的内容
this.myFunction()
...
}
</code></pre>
其中，第七行，监听器那里也可以這麽写
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">@Watch('stateSomeKey') // 与上边计算属性同名
watchMenuState(val) { // 这里可以这么写：或用watch+上边括号里的名字也可以（虽然不太确定为什么，只是代码这么写成功了）
// 下同
// ...
}
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">vue+ts 中，使用 filter 过滤器</h2>
定义：（在@Component 里边，写 filters，注意 s 单词）
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px"><script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
filters: {
 filterValue(value) {
 return Number(value).toLocaleString();
 }
 // otherFilterFn(value) { 其他filter示例
 // return ...
 // }
},
components: {}
})
export default class Container extends Vue {
// ...
}
</script>
</code></pre>
使用：同之前，正常使用：
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px"><span v-if="showSpan">{{showValue | filterValue}}</span>
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">自定义指令过滤器【待补充】</h2>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// 待补充
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">watch 监听 router 的变化</h2>
1、shims-vue.d.ts 的设置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// shims-vue.d.ts
import Vue from 'vue'
import VueRouter, {Route} from 'vue-router';
</code><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">declare module 'vue/types/vue' { 
interface Vue { 
$router: VueRouter; // 这表示this下有这个东西 
$route: Route; 
} 
} 
</code></pre>
2、main.ts 的设置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// main.ts
import { Component } from "vue-class-component";
Vue.config.productionTip = false;
Component.registerHooks([
"beforeRouteEnter", //进入路由之前
"beforeRouteLeave", //离开路由之前
"beforeRouteUpdate"
]);
</code></pre>
3、需要监听路由钩子的 SCF 组件：
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px"><script lang="ts">
// xxx.vue 的script标签内
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { Route, RawLocation } from 'vue-router';
// # 下边两段，看你需要什么了：
// 1/监听路由变化 
@Watch('$route',{ immediate: true }) 
private changeRouter(route: Route){ 
console.log(route) 
}
</code><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// 2/定义路由钩子函数 
private beforeRouteEnter(to: Route, from: Route, next: () => void): void { 
console.log('beforeRouteEnter', to, from, next) 
next(); // 没有next将不会进入路由内部，跟vue文档用法一致 
} 
private beforeRouteUpdate(to: Route, from: Route, next: () => void): void { 
console.log('beforeRouteUpdate'); // 暂时不生效，版本问题 
next(); 
} 
private beforeRouteLeave(to: Route, from: Route, next: () => void): void { 
console.log('beforeRouteLeave'); 
next(); 
} 
</script> 
</code></pre>
监听路由的第二种写法 (如果只是想更新视图的话可以考虑监听路由)
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">@Watch('$route')
routeWatch() {
this.loadData();
}
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">main.ts 中注册路由导航守卫并在组件中使用路由钩子函数</h2>
基本同上 
1、shims-vue.d.ts 的设置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// shims-vue.d.ts
import Vue from 'vue'
import VueRouter, {Route} from 'vue-router';
</code><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">declare module 'vue/types/vue' { 
interface Vue { 
$router: VueRouter; // 这表示this下有这个东西 
$route: Route; 
} 
} 
</code></pre>
2、main.ts 的设置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// main.ts
import { Component } from "vue-class-component";
Component.registerHooks([
"beforeRouteEnter", //进入路由之前
"beforeRouteLeave", //离开路由之前
"beforeRouteUpdate"
]);
</code></pre>
3、需要监听路由钩子的 SCF 组件：
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px"><script lang="ts">
// xxx.vue 的script标签内
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { Route, RawLocation } from 'vue-router';
// # 下边两段，看你需要什么了：
// 1/监听路由变化 
@Watch('$route',{ immediate: true }) 
private changeRouter(route: Route){ 
console.log(route) 
}
</code><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// 2/定义路由钩子函数 
private beforeRouteEnter(to: Route, from: Route, next: () => void): void { 
console.log('beforeRouteEnter', to, from, next) 
next(); // 没有next将不会进入路由内部，跟vue文档用法一致 
} 
private beforeRouteUpdate(to: Route, from: Route, next: () => void): void { 
console.log('beforeRouteUpdate'); // 暂时不生效，版本问题 
next(); 
} 
private beforeRouteLeave(to: Route, from: Route, next: () => void): void { 
console.log('beforeRouteLeave'); 
next(); 
} 
</script> 
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">父子传值 - 子组件修改触发父组件的方法执行</h2>
父组件内部： 
1、调用子组件、并绑定传值：
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px"><ZiZuJian @chuanDiGuoQu="FuQinZiJiYong"></ZiZuJian>
</code></pre>
准备好一会会被子组件触发的函数：
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">FuQinZiJiYong(){
console.log('我是父亲内部待被触发的方法')
}
</code></pre>
子组件 ZiZuJian 内部在需要触发的地方执行$emit
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">export default class Menu extends Vue {
// 在需要触发的地方，执行如下代码
this.$emit('chuanDiGuoQu', '')
}
</code></pre>
最后还有另一种网友总结很麻烦的写法：参见地址
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">@Prop 默认参数</h2>
第一种：github 找到的 demo 这样。如下代码中<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(255, 93, 108, 1)">hideHeader</code>就是由默认参数的父组件传过来的属性
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">export default class ComponentName extends Vue {
@Prop({
type: Boolean,
required: false,
default: false // 默认属性的默认值
})
private hideHeader!: boolean | undefined
}
</code></pre>
第二种：vue 原生的写法，并写到了@component 构造器中就好了：
如果不传值此函数默认就是 true，传 false 就是 false 了。并且能严格判断只能传 Boolean 类型。挺好。
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">@Component({
props: {
hideHeader: {
 type: Boolean,
 required: false,
 default: false // 默认属性的默认值
}
}
})
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">中央总线注册与使用【待解决】</h2>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// 待解决
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">vue + ts 中使用 vue-echarts</h2>
安装
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">npm i -S vue-echarts echarts
</code></pre>
main.ts 中引入并注册
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// main.ts
// 引用
import ECharts from "vue-echarts";
// 用到的模块要单独引用
import "echarts/lib/chart/line"; // 线图为例，其他图一样
import "echarts/lib/component/title.js"; // 标题
import "echarts/lib/component/legend"; // 图例
import "echarts/lib/component/tooltip"; // 提示框
import "echarts/lib/component/toolbox"; // 工具（如下载功能与按钮）
</code><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// 注册 
Vue.component("v-chart", ECharts); 
</code></pre>
vue.config.js 中设置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// vue.config.js
module.exports = {
// For Vue CLI 3+, add vue-echarts and resize-detector into transpileDependencies in vue.config.js like this:
transpileDependencies: ["vue-echarts", "resize-detector"]
};
</code></pre>
tsconfig.json 中也要设置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// tsconfig.json
{
"compilerOptions": {
"types": ["webpack-env", "echarts"]
}
}
</code></pre>
SFC 应用
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px"><v-chart :options="echartsOptions" id="myCharts" ref="myCharts" />
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">vue + ts 中使用 Element-ui</h2>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// main.ts
import ElementUI from "element-ui";
Vue.use(ElementUI);
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">全局 scss 变量</h2>
在 assets/styles 下新建_variable.scss 文件，用于存放 scss 变量。 
然后再 vue.config.js 中设置全局变量
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// vue.config.js
module.exports = {
css: {
loaderOptions: {
 sass: {
 prependData: `
 @import "@/assets/styles/_variable.scss";
 `
 }
}
}
};
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">alias 别名设置</h2>
同时解决问题<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(255, 93, 108, 1)">alias 配置的路径别名，在 vscode 中报错模块查找失败</code>和问题<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(255, 93, 108, 1)">vue-cli 配置了 resolve alias 来声明的路径别名，在引用了 ts 后，vscode 会报错不能识别、模块查找失败</code>。其中，vscode 报错在 win 环境还需要一个插件安装，解决方案见下边
vue.config.js 配置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// vue.config.js
module.exports = {
chainWebpack: config => {
// 别名配置
config.resolve.alias
 .set("comp", resolve("src/components"))
 .set("css", resolve("src/assets/styles"));
// ...同上，路径核对好就行
}
};
</code></pre>
jsconfig.json 配置。注意这里的名字要和上边 set 后边的名字保持一致
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// jsconfig.json
{
"compilerOptions": {
"paths": {
 "@/*": [
 "src/*" // 这个本来就有
 ],
 // 后边追加
 "comp/*": [
 "src/components/*"
 ],
 "css/*": [
 "src/assets/styles/*"
 ],
 // ... 同上，路径核对好就行
},
}
};
</code></pre>
SCF 使用设定的别名
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// main.ts
import MyError from "view/error/Error.vue";
</code></pre>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">/* SCF单页中scss路径引用 */
@import "css/_variable.scss";
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">请求接口的代理设置</h2>
vue.config.js 配置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// vue.config.js
module.exports = {
devServer: {
proxy: {
 "/api": {
 target: "http://11.11.11.111/", // 示例ip地址，也可以填域名，需要的是后端接口地址的相同部分
 changeOrigin: true,
 pathRewrite: {
 "^/api": ""
 }
 }
}
}
};
</code></pre>
axios 请求地址时的写法： 
注意<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(255, 93, 108, 1)">/api</code>一定要有，且在路径的最前边，代替相同的路径。
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">axios
.get("/api/wo/de/di/zhi") // 前边的'/api'一定要有，它代表的就是vue.config.js中proxy.target的路径
.then(() => {
// 接口成功...
});
</code></pre>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">本地服务域名修改</h2>
vue.config.js 配置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// vue.config.js
module.exports = {
devServer: {
disableHostCheck: true, // 用域名代替localhost,禁用主机检查
host: "www.haha.com"
// 另外端口也可以在这里改，只不过我写到了package.json总，见下边
}
};
</code></pre>
package.json dev 命令的配置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">{
"scripts": {
"dev": "npm run serve",
"serve": "vue-cli-service serve --port 80 --open", # 端口设置为80，--open运行完毕后自动打开地址
}
}
</code></pre>
本地 host 配置
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">127.0.0.1 www.haha.com # 这里注意和vue.config.js中的host的值对应
</code></pre>
此时，<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(255, 93, 108, 1)">npm run dev</code>成功后，浏览器跑项目输入地址<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(255, 93, 108, 1)">http://www.haha.com</code>即可
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 24px; text-align: left">vue + ts 在 vscode 中的问题</h2>
<h3 data-tool="mdnice编辑器" style="margin-top: 40px; margin-bottom: 20px; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px">vue-cli 配置了 resolve alias 来声明的路径别名，在引用了 ts 后，vscode 会报错不能识别、模块查找失败：</h3>
1、扩展商店安装插件 - Path Intellisense
2、配置代码（vscode setting.json 中设置）
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">"path-intellisense.mappings": {
"@": "\${workspaceRoot}/src"
}
</code></pre>
3、在 package.json 统计目录下创建 jsconfig.json 文件，并填入下边代码
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; border-radius: 8px">// jsconfig.json
{
"compilerOptions": {
"paths": {
 "@/*": ["src/*"]
}
}
}
</code></pre>
2019/12/09 ...持续更新中...
</section>

</div>
<div id="MySignature" role="contentinfo">
越努力，越幸运；阿门。 
来源：https://www.cnblogs.com/padding1015/p/12013722.html

頁: [1]

琼殿技术论坛's Archiver

Vue + TypeScript 踩坑总结