创建vue3 ts element-plus项目

一、创建vue3项目

1.新建vue3TsElement文件夹

该文件夹中打开命令行窗口，运行创建vue3项目的命令

npm init vue@latest复制

2.打开创建好的vue3_TS_element文件夹

关掉之前的命令行窗口，在该文件夹中再次打开命令行窗口下载依赖文件

npm install复制

3.说明

注意创建项目命令行窗口与安装依赖命令行窗口之间的切换

二、安装element-plus组件库

安装命令

npm install element-plus --save复制

1. 完整引入

在main.ts引入，就可以使用了

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

2. 按需引入

（1）首先要安装element-plus

npm install element-plus --save复制

（2）然后你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

（3）然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

import { fileURLToPath, URL } from 'node:url'
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//按需引入element
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        AutoImport({//按需引入element
            resolvers: [ElementPlusResolver()],
        }),
        Components({//按需引入element
            resolvers: [ElementPlusResolver()],
        }),
        vue(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})复制