搭建vue3项目

pnpm 命令

pnpm create vue@latest

  cd vue-ts
   pnpm install
   pnpm format
   pnpm dev

 git init && git add -A && git commit -m "initial commit"

安装sass

pnpm add sass -D

1. 项目配置示例‌

• Vue项目需在main.js导入全局样式：import './assets/main.scss'
• React+Vite项目可直接使用.scss文件无需额外配置

安装element plus

pnpm install element-plus

main.ts文件内引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

tsconfig.json

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

按需引入

pnpm add  -D unplugin-vue-components unplugin-auto-import

vite  vite.config.ts

import { defineConfig } from 'vite'
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()],
    }),
  ],
})

webpack   webpack.config.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

全局配置

main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

按需引入:

<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

安装 unocss

pnpm add -D unocss

安装插件：

vite.config.ts

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

创建 uno.config.ts 文件：

uno.config.ts

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

将 virtual:uno.css 添加到你的主入口中：

main.ts

import 'virtual:uno.css'

变体组转换器

pnpm add -D @unocss/transformer-variant-group

import transformerVariantGroup from '@unocss/transformer-variant-group'
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

有用法

<div class="hover:(bg-gray-400 font-medium) font-(light mono)" />

转变为

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono" />

指令转换器

pnpm add -D @unocss/transformer-directives

import transformerDirectives from '@unocss/transformer-directives'
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

用法

@apply

.custom-div {
  @apply text-center my-0 font-medium;
}

转变为

.custom-div {
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: 500;
}