带你初探 Vue3 + TS

编译没问题但报红

用 vue-cli 创建的项目在 WebStorm 中 main.ts 可能会有如下情况。原因是 App 不是 Component，解决方法如下:

 ts
    // App.vue
    <script lang="ts">
      import { defineComponent } from 'vue';
      export default defineComponent({});
    </script>
    ```
> Js中文网 - 前端进阶资源教程 [www.javascriptC.com](https://www.javascriptc.com),typescript 中文文档
> 一个帮助开发者成长的社区，**你想要的，在这里都能找到**


+   在 router/index.js 中可能会有如下情况 ![](https://static.javascriptc.com/frontend/vue/20201015/vue3-p-zoom-1cddab630.image) 原因是 App 不是 Component，解决方法如下:


```javascript
 ts
    // router/index.vue
    const routes: Array<RouteRecordRaw> = [
      {
        path: '/',
        name: 'Home',
        component: () => Home
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
    ```



## 全局实例定义

在 Vue2 中定义全局实例的方式


```javascript
import Utils from './libs/utils'
...
Vue.prototype.$utils = Utils

但到了 Vue3 中不适用 Vue2 的方法定义全局实例，而且还报错。

Vue3 定义全局实例有两种写法：

第一种写法

 ts
// libs/utils.ts
import { App } from 'vue';

declare interface Utils {
  addN(n: number): number;
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $utils: Utils;
  }
}

export default {
  install(app: App) {
    app.config.globalProperties.$utils = {
      addN(n: number): number {
        return n == 1 ? 1 : n + this.addN(n - 1);
      }
    }
  }
}

 ts
// main.ts
import Utils from './libs/utils';
...
const app = createApp(App);
app.use(Utils);
...
app.mount('#app');

第二种写法

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

 ts
// libs/utils.ts
declare interface Utils {
  addN(n: number): number;
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $utils: Utils;
  }
}

export default {
  addN(n: number): number {
    return n == 1 ? 1 : n + this.addN(n - 1);
  }
}

 ts
import Utils from './libs/utils';
...
app.config.globalProperties.$utils = Utils;
...
app.mount('#app');

两种写法都有一段代码是相同的，就是

 ts
// libs/utils.ts
declare interface Utils {
  addN(n: number): number;
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $utils: Utils;
  }
}

如果没了这段代码编译会报错带你初探 Vue3 + TS 加上之后需要重启，否则还是报这个错误。