一、创建vue3项目
1.新建vue3TsElement文件夹
该文件夹中打开命令行窗口,运行创建vue3项目的命令
npm init vue@latest
2.打开创建好的vue3_TS_element文件夹
关掉之前的命令行窗口,在该文件夹中再次打开命令行窗口下载依赖文件
npm install
3.说明
注意创建项目命令行窗口与安装依赖命令行窗口之间的切换
二、安装element-plus组件库
安装命令
npm install element-plus --save
完整引入
在main.ts引入,就可以使用了
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
按需引入
(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))
}
}
})