三、手把手教你创建Vue3后台模板─────集成element-plus_elementplus官方文档

想比vue2用的element-ui，element-plus是基于 Vue 3，面向设计师和开发者的组件库

element-plus官方文档：https://element-plus.org/zh-CN/#/zh-CN

配置@ = src 目录

因为Vite 客户端不支持node内置模块path的处理，我们使用path-browserify作为代替

npm install path-browserify --save-dev

// vite.config.js
 
  resolve: {
 
    alias: {
 
      path: 'path-browserify',
 
      '@': resolve(__dirnameNew, 'src'),
 
      '@views': resolve('./src/views')
 
    }
 
  }

项目中 集成scss

安装依赖

npm install sass --save-dev

scss集成起来比较方便，直接npm后就可以编写scss样式了

安装element-plus依赖

npm install element-plus --save

 接下来main注册依赖就可以了，这边采用的是全局注册

// main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

安装element-plus icon依赖

npm install @element-plus/icons-vue --save

npm install vite-plugin-svg-icons --save-dev

 src/components/SvgIcon/index.vue

<template>
  <div v-if="isExternalIcon" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$attrs" />
  <svg :class="svgClass" aria-hidden="true" v-on="$attrs">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
</template>
 
<script>
import { isExternal } from '@/utils/validate'
import { computed } from 'vue'
export default {
  name: 'SvgIconIndex',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    },
    color: {
      // 设置图标颜色
      type: String,
      default: '#333'
    }
  },
  setup(props) {
    const isExternalIcon = isExternal(props.iconClass)
 
    const iconName = computed(() => `#icon-${props.iconClass}`)
 
    const svgClass = computed(() => {
      if (props.className) {
        return `svg-icon ${props.className}`
      }
      return 'svg-icon'
    })
 
    const styleExternalIcon = computed(() => ({
      mask: `url(${props.iconClass}) no-repeat 50% 50%`,
      '-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
    }))
 
    return { iconName, svgClass, isExternalIcon, styleExternalIcon }
  }
}
</script>
 
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
 
.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>

// import { isExternal } from '@/utils/validate'
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

 vue升级到3版本后，element plus引入icon是需要单独去引用的。

// main.js
import 'virtual:svg-icons-register' // 引入注册脚本
import SvgIcon from '@/components/SvgIcon/index.vue' // svg component
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
// 注册el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

重置一下css 

npm install normalize.css --save

// main.js
import 'normalize.css/normalize.css' // CSS重置
import '@/styles/index.scss' // global css

css样式自定义内容比较多，没用到的可以自行删除  

@/styles/index.scss

@import './element-plus.scss';
@import './module.scss';
@import './reset.scss';
 
body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
 
label {
  font-weight: 700;
}
 
html {
  height: 100%;
  box-sizing: border-box;
}
 
#app {
  height: 100%;
}
 
*,
*:before,
*:after {
  box-sizing: inherit;
}
 
a:focus,
a:active {
  outline: none;
}
 
a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
 
div:focus {
  outline: none;
}
 
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ' ';
    clear: both;
    height: 0;
  }
}
 
// main-container global css
.app-container {
  padding: 20px;
}
 
 

element-plus.scss

// cover some element-plus styles
 
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}
 
.el-upload {
  input[type='file'] {
    display: none !important;
  }
}
 
.el-upload__input {
  display: none;
}
 
 
// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;
 
    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}
 
// dropdown
.el-dropdown-menu {
  a {
    display: block;
  }
}
 
// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

main.js代码

import { createApp } from 'vue'
 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
import 'normalize.css/normalize.css' // CSS重置
import '@/styles/index.scss' // global css
 
import 'virtual:svg-icons-register' // 引入注册脚本
import SvgIcon from '@/components/SvgIcon/index.vue' // svg component
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
import App from './App.vue'
 
const app = createApp(App)
 
// 注册el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
 
app.component('svg-icon', SvgIcon)
app.use(ElementPlus)
app.mount('#app')

完整vite.config.js配置 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { cwd } from 'process'
import { resolve, dirname } from 'path'
import { fileURLToPath } from 'url'
 
const __filenameNew = fileURLToPath(import.meta.url)
 
const __dirnameNew = dirname(__filenameNew)
 
// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(cwd(), 'src/icons/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    })
  ],
  resolve: {
    alias: {
      path: 'path-browserify',
      '@': resolve(__dirnameNew, 'src'),
      '@views': resolve('./src/views')
    }
  },
  server: {
    host: '0.0.0.0',
    port: 8086, // 自定义端口
    open: true // 设置服务启动时是否自动打开浏览器
  }
})

package.json

到这一步element-plus、scss、svg的引入就大功告成了。vue2跟vue3还是有区别的，配置起来还是要花一番功夫。能一步配置成功当然最好，大家遇到问题的话，欢迎评论区提出来。