vue3+ts搭建项目、引入element-plus、安装Vue VSCode Snippets

vue create 项目名

完整引入element-plus

npm install element-plus --save

//main.ts 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app:any = createApp(App)
app.use(ElementPlus)
//app.use(store).use(router).mount('#app')

按需引入element-plus

npm install -D unplugin-vue-components unplugin-auto-import

此时执行npm run serve报错：
setup: ((_a = plugin.esbuild) == null ? void 0 : _a.setup) ?? function setup({ onStart, onEnd, onResolve, onLoad, initialOptions, esbuild: { build: build2 } }) {…
This is probably not a problem with npm. There is likely additional logging output above.
原因：还在找~，所以我目前都是完整引入element-plus

//vue.config.js
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
  //transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
})

修改vue.config.js文件后，要重新启动项目

在vscode中安装Vue VSCode Snippets插件，便于快速生成 vue3-ts 对应模板，然后在vue文件中输入vb生成模板