创建项目并整理目录
npm init vue@latest
jsconfig.json配置别名路径
配置别名路径可以在写代码时联想提示路径
{
"compilerOptions" : {
"baseUrl" : "./",
"paths" : {
"@/*":["src/*"]
}
}
}
elementPlus引入
1. 安装elementPlus和自动导入插件
npm i elementPlus
npm install -D unplugin-vue-components unplugin-auto-import
2. 配置自动按需导入
// 引入插件
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()],
}),
]
})
3. 测试组件
<template>
<el-button type="primary">i am button</el-button>
</template>
定制elementPlus主题
1. 安装sass
基于vite的项目默认不支持css预处理器,需要开发者单独安装
npm i sass -D
2. 准备定制化的样式文件
/* 只需要重