vue3+elementPlus项目搭建

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

vue3+elementPlus项目搭建_第1张图片

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

你可能感兴趣的:(vue.js,javascript,前端)