Unocss(原子化css) 使用及vue3 + vite + ts讲解

1

pnpm create vite unocss-demo -- --template vue-ts

1

npm init vite@latest my-vue-app -- --template vue

1

yarn create vite my-vue-app --template vue

1

pnpm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// 引入Unocss

import Unocss from 'unocss/vite';

import { presetUno, presetAttributify, presetIcons } from 'unocss'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    vue(),

    Unocss({ // 使用Unocss

      presets: [

        presetUno(),

        presetAttributify(),

        presetIcons()],

    })

  ]

})

1

2

3

4

5

6

import { createApp } from 'vue'

import './style.css'

import App from './App.vue'

// 导入Unocss

import 'uno.css'

createApp(App).mount('#app')

1

2

3

4

5

6

7

1

pnpm i -D @iconify-json/logos

1

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import Unocss from 'unocss/vite';

import { presetUno, presetAttributify, presetIcons } from 'unocss'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    vue(),

    Unocss({

      presets: [

        presetUno(),

        presetAttributify(),

        presetIcons()

      ],

      rules: [ // 在这个可以增加预设规则, 也可以使用正则表达式

        [

          'p-c', // 使用时只需要写 p-c 即可应用该组样式

          {

            position: 'absolute',

            top: '50%',

            left: '50%',

            transform: `translate(-50%, -50%)`

          }

        ],

        [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],

      ]

    })

  ]

})