vue3+elementPlus项目搭建_add an end-to-end testing solution?

一、安装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