vue笔记

一、vue项目vscode自动import,VUE组件和ts模块

1、在vscode插件市场安装vetur插件

2、修改tsconfig.json文件

将moduleResolution改为node

3、重启vscode,后面再下代码就可以自动import了。

二、vue项目中使用elementplus

参考elementplus官网：https://element-plus.org/zh-CN/guide/design.html

1、为项目安装elementplus

先进入项目的根目录，然后打开命令输入一下命令安装element-plus

npm install element-plus --save

2、安装按需引入插件

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

安装这两个插件的目的是为了在后续使用elemntplus的过程中按需导入elementplus的组件，只有使用了对应的组件才将这个主键导入到项目中来。这也是elementplus官方推荐的方式。

然后修改vite.config.ts，在plugins加入AutoImport，Components，然后就可以使用elementplus了，详细配置如下

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})