项目写法为组合式api

vue3中的手动挂载

createApp实例方法，第一个参数为导入的组件对象，第二个参数rootProps，返回一个实例。使用实例方法mounted方法挂载，参数为挂载元素。挂载完毕将元素加入文档即可。(单例模式待完成)

  const el = document.createElement("div");
  document.body.appendChild(el);
  app.mount(el);

createApp无法解析组件内包含的第三方组件

Router使用

组件内需要主动导入: useRouter、useRoute。 useRouter 返回路由实例 userRoute 返回组件内路由对象，在此对象内获取路由参数

全局方法

定义: 在main内使用应用实例config.globalProperties定义

app.config.globalProperties.变量 = 全局方法或对象

使用: 在需要使用的组件内导入getCurrentInstance方法，getCurrentInstance方法返回对象的appContext.config.globalProperties中获取全局方法或对象

import { getCurrentInstance } from 'vue'
const $ls = getCurrentInstance()?.appContext.config.globalProperties.$ls

引入vant

vant官网

npm i vant@3 -S

配置按需引入，安装 babel-plugin-import

npm i babel-plugin-import -D

babel.config.js 中添加配置:

{ "plugins": [ [ "import", { "libraryName": "vant", "libraryDirectory": "es", "style": true } ] ] }

安装 ts-import-plugin

www.jianshu.com/p/b595a726a…

npm i -D ts-import-plugin

vue.config.plugin中加入

const merge = require("webpack-merge");
const tsImportPluginFactory = require("ts-import-plugin");

module.exports = {
  lintOnSave: true,
  chainWebpack: config => {
    config.module
      .rule("ts")
      .use("ts-loader")
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: "vant",
                libraryDirectory: "es",
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: "es2015"
          }
        });
        return options;
      });
  }
};

然后在plugin/vant中配置:

import {
  Button,
  Popup
} from "vant"

export default function(app: any) {
  app.use(Button)
  app.use(Popup)

}

在main引入配置函数，传入应用实例即可.

props 中的类型问题

props: {
    other: {
        type: Array
    }
}

该type会报错，无法确定Array内的值类型，需要强制转换:

props: {
    other: {
        type: Array as PropType<number[]>
    }
}

PropType转换联合类型数据

使用第三方插件的类型检查问题

在xxx.d.ts文件配置，比如axios: (未验证)

/**
 * ~/src/***.d.ts
 */
import { AxiosRequestConfig } from 'axios';

declare module 'axios' {
  export interface AxiosRequestConfig {
    headers?: {
      [index: string]: string
    }
  }
}

vuex使用

组件内使用:

import { useStore } from "vue"

useStore在router配置和axios配置内无效，useStore导出undefine(应用挂载前无法使用?) useStore需要在setup内执行.

provide和inject用法

provide:

provide("key", 变量)

inject:

变量: inject("key")
函数: inject("key", Function, true) // as Function 使用: 返回值加()
函数: inject("key", Function, false) // 返回值当作构造函数, 使用new处理

!!inject只能放在setup内使用! 不能放在其他生命周期内，函数内部也不行!

declare

关于全局类型声明文件，只能在src或者src/types下添加以d.ts结尾的文件才有效，且只能在ts文件内使用未完待续....

vue3 + TypeScript 使用体验