vue3 uses Element-plus and TS (TypeScript)

If you have a problem, why do the codes directly in the CV Element plus document always report various errors? ! Then you are right to read this article! (For Vue3)

1. After importing the project into vscode, install Element-plus

npm install element-plus --save

 2.Introduce Element-plus in main.js

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

3. Introduce the Typescript package ( the following 3-6 steps are for the project that has been created, and the bottom one is created with vue-cli when creating the project )

npm install --save-dev typescript

npm install --save-dev ts-loader

4.webpack configuration

vue cli 3.0及以上版本The created project needs to be configured in vue.config.js, the code is as follows:

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$/],    
        }    
      }        
    ]    
  }    
}
}

Others are in webpack.base.conf, you can refer to

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

5. Create tsconfig.json in the root directory, the code is as follows

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

 6.Create the test.ts file under src with empty content, as shown above

7. Another way! Imported with vue-cli. The official documentation explains:

Just choose manual construction, check (space bar) in this step, and then press Enter to next step. 

Over From now on, the element template can be used casually with CV~

It’s not easy to make, so please like and collect it!

Reference documentation

TS syntax used in Vue-cli3, and usage examples - short book