vue版本升级以及支持ts语法

vue从2.6.x升级到2.7.x或3.x.x

升级到vue2.7.x的官网教程以及改变

vue-2-7-naruto

升级需要

升级本地的@vue/cli-xxx依赖

• ~4.5.18 for v4
• ~5.0.6 for v5

升级vue到2.7.x版本之后，可以移除 vue-template-compiler ，因为在vue2.7.x版本不再需要该依赖

升级vue-loader到15.10.x版本

• vue-loader: ^15.10.0

在vue2.7.x版本，createApp还是不支持的，只要vue3才支持该API

如果有使用eslint-plugin-vue，需要将该依赖升级到9+版本，如果需要使用 <script setup>语法。

升级到vue2.7时本地版本的依赖如下所示。

package.json

"dependencies": {
  "core-js": "^3.8.3",
  "vue": "^2.7.1",
},
"devDependencies": {
  "@vue/cli-plugin-babel": "~5.0.0",
  "@vue/cli-service": "~5.0.0",
},

上图只展示了升级vue版本所需要的对应依赖以及版本号。

下面开始在vue2.7版本中支持typeScript。

下载对应的ts依赖

npm i typescript ts-loader -D

在对应vue.config.js文件中增加如下配置

module.exports = {
  configureWebpack: {
    resolve: {
      extensions: [".js", ".vue", ".json", ".ts"] // 后缀名
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: "ts-loader",
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/] // ts-loader
          }
        }
      ]
    }
  }
};

同时需要新增tsconfig.json文件，对应配置如下：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@assets": ["src/assets"],
      "@components": ["src/components"],
      "@views": ["src/views"],
      "@layout": ["src/layout"]
    },
    "target": "ES5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node",
    "allowJs": true,
    "outDir": "./",
    "strictPropertyInitialization": false,
    "noImplicitAny": false
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist","static","dr-sys"]
}

同时，为了在vue中支持ts需要，因此还需要对应的.d.ts文件声明，在src文件下新建 shims-vue.d.ts 文件，内容如下：

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}