一、安装vue3
npm init vue@latest
Project name:项目名称,默认值:vue-project,可输入想要的项目名称,此处不建议中文。
Add TypeScript? 是否加入TypeScript组件?默认值:No。
Add JSX Support? 是否加入JSX支持?默认值:No。
Add Vue Router for Single Page Application development? 是否为单页应用程序开发添加Vue Router路由管理组件?默认值:No。
Add Pinia for state management? 是否添加Pinia组件来进行状态管理?默认值:No。
Add Vitest for Unit testing? 是否添加Vitest来进行单元测试?默认值:No。
Add an End-to-End Testing Solution?默认值No, Cypress , Playwright
(Add Cypress for both Unit and End-to-End testing? 是否添加Cypress来进行单元测试和端到端测试?默认值:No。)
Add ESLint for code quality? 是否添加ESLint来进行代码质量检查?默认值:No。
二、安装ElementPlus
2.1 全局引入
### 安装 element-plus
npm install element-plus --save
### ElementPlus 全局引入 main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
2.2 按需引入
#安装element-plus
npm install element-plus --save
#安装element-plus自动引入插件,这两插件的作用就是在你使用 element的某个组件的时候,不需要手动引入了,自动帮你引,很方便
npm install -D unplugin-vue-components unplugin-auto-import
配置vite.config.ts 文件
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
// ------------ 需要配置elementPlus的起点 ------------
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// ------------ 需要配置elementPlus的终点 ------------
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// ------------ 需要配置elementPlus的起点 ------------
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
// ------------ 需要配置elementPlus的终点 ------------
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
配置到这里基本上就可以使用了
2.3 遇到的问题
在引用一些比较复杂的组件后,会发现该组件只有功能,没有相应的css样式,遇到这种问题,主要有两种方式去解决。
第一种解决方式:
查看这些组件最上面是不是引入了一些类似下方的代码,如果有的话,直接删除或者注释掉即可。
因为之前下载主动引入的组件了,这里在引入就冲突了。
import { ElTable } from 'element-plus'
第二种解决方式(推荐方式):
需要在main.js中添加一行代码,引入elementUI的样式,这样就避免了引入一些组件,无样式的问题。
import 'element-plus/theme-chalk/src/index.scss'
当然,如果创建的vue3项目,没有scss,会提示样式错误的问题,这时,只需要安装下scss样式即可解决问题。
npm install sass sass-resources-loader sass-resources-loader --save-dev