Vue3项目引入Typescript

如果你的项目创建时没有使用Ts可以使用该命令添加Ts

因为接手了一个Webpack构建的Vue3项目并未使用Ts所以需要再次引入Ts到项目中

还是建议大家使用Vite因为很快Webpack要等3-4秒

使用命令安装Typescript

vue add @vue/typescript

按照提示一路选Y如你有其他要求可视情况而定

安装完成

package.json

{
  "name": "xshop-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.3.4",
    "core-js": "^3.6.5",
    "lib-flexible": "^0.3.2",
    "path": "^0.12.7",
    "pinia": "^2.0.13",
    "postcss-px2rem": "^0.3.0",
    "vant": "^3.4.3",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.1.6",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.19",
    "@vue/cli-plugin-router": "~4.5.19",
    "@vue/cli-plugin-typescript": "~4.5.19",
    "@vue/cli-plugin-vuex": "~4.5.19",
    "@vue/cli-service": "~4.5.19",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-plugin-import": "^1.13.6",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "prettier": "2.8.4",
    "typescript": "~4.1.5"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Vscode安装插件配置

如果你之前安装了Vuter请禁用此插件会不兼容

安装Volar插件

此插件配合Ts使用

推荐去B站学习Ts

https://www.bilibili.com/video/BV1nv4y1h7ad/?spm_id_from=333.999.0.0

封装Ts类型

项目中Ts都写在页面是会比较拥挤的

把你的Vue/Ts使用的到的Ts都存放在此Ts然后暴露出去在从页面解构直接使用即可！

按个人使用命名使用让项目更清晰！