vue3 は Element-plus と TS (TypeScript) を使用します

問題がある場合、CV 要素とドキュメントに直接含まれるコードが常にさまざまなエラーを報告するのはなぜですか? ！それならこの記事を読むのが正解です！(Vue3の場合)

1. vscodeにプロジェクトをインポートした後、Element-plusをインストールします

npm install element-plus --save

2.main.jsにElement-plusを導入する

// 导入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
app.use(ElementPlus)

3. Typescript パッケージを導入します (以下の 3 ～ 6 の手順は作成されたプロジェクトに対するもので、一番下の手順はプロジェクト作成時に vue-cli で作成されます)

npm install --save-dev typescript

npm install --save-dev ts-loader

4.webpackの設定

vue cli 3.0及以上版本作成したプロジェクトは vue.config.js で設定する必要があります。コードは次のとおりです。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})
module.exports = { configureWebpack: {
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"],  
     alias: {}
  },
  module: {        
    rules: [    
      {    
        test: /\.tsx?$/,    
        loader: 'ts-loader',    
        exclude: /node_modules/,    
        options: {
          appendTsSuffixTo: [/\.vue$/],    
        }    
      }        
    ]    
  }    
}
}

その他は webpack.base.conf にあります。参照できます。

https://www.jianshu.com/p/3cbcdd766295

5. ルートディレクトリに tsconfig.json を作成します。コードは次のとおりです。

{
    "compilerOptions": {
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "lib": ["dom","es2016"],
      "target": "es5"
    },
    "include": ["./src/**/*"]  
}