Arco.design：完整引入与按需引入的差异

Nephilim 2024-07-03

573

Tips：一些记录，一些笔记

2024/07/03

WEDNESDAY

I am not afraid of tomorrow for I have seen yesterday and love today.

我不害怕明天，因为我见过昨天，又热爱今天。

我们是如何引入「Arco.design」组件库的？

在官方网站上，可以看到，引入「Arco.design」组件库有几种方法：

完整引入
按需引入

官方网站的这一部分的文档：

https://arco.design/vue/docs/start

一、完整引入

官方给出的代码样例是：

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';


const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

完整引入的好处是，你可以指定「Arco.design」的样式文件与你自己自定义的样式文件的执行优先顺序。

像这样：

// 样式表
// 全局字体的配置在「main.css」 - 放在越后面执行的会覆盖前面的配置


// Arco.desgin「完整引入」
import '@arco-design/web-vue/dist/arco.css'


// 「主」样式文件
import './assets/styles/main.css'


// 导入包
import { createApp } from 'vue'
import { createPinia } from 'pinia'


// Arco.desgin「完整引入」
import ArcoVue from '@arco-design/web-vue'


// 图标（vite-plugin-svg-icons）
import 'virtual:svg-icons-register'


// 导入文件
import App from './App.vue'
import router from './router'


// 自定义组件「自动导入」
import MyComponents from '@/components/index'


// 实例化
const app = createApp(App)


// 注册
app.use(createPinia())
app.use(router)


// Arco.desgin「完整引入」
app.use(ArcoVue)


// 自定义组件「自动导入」
Object.keys(MyComponents).forEach((key) => {
  // 显示
  console.log('【src/main.ts】当前组件【' + key + '】')
  // 执行组件注册
  app.component(key, MyComponents[key])
})


// 挂载
app.mount('#app')

而在我们自定义的「主样式文件」中，我们设置了全局的字体样式：

文件「./assets/styles/main.css」

@import './base.css';
@import './fonts.css';


#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}


a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}


@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}


@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }


  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
}

文件「fonts.css」

body {
  font-family: "阿里妈妈刀隶体";
}

来看看「完整引入」的方式下，页面应用自定义字体格式的效果：

二、按需引入

官方提供的「按需引入」的代码如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite';
import { ArcoResolver } from 'unplugin-vue-components/resolvers';


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ArcoResolver()],
    }),
    Components({
      resolvers: [
        ArcoResolver({
          sideEffect: true
        })
      ]
    })
  ]
});

在继续测试「按需引入」之前，现将前面「完整引入」的相关代码注释：

文件「./src/main.ts」中的：

import ArcoVue
app.use(ArcoVue)
import "@arco-design/web-vue/dist/arco.css"

「按需引入」需要修改的文件是「vite.config.ts」

该文件这时候的完整代码如下：

import { fileURLToPath, URL } from 'node:url'


import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'


// 按需加载
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'


// Arco.desgin「按需加载」
import {
  ArcoResolver,
} from 'unplugin-vue-components/resolvers'


// 图标（vite-plugin-svg-icons）
import {
  createSvgIconsPlugin
} from 'vite-plugin-svg-icons'


// https://vitejs.dev/config/
export default defineConfig(({mode}) => {
  const env = loadEnv(mode, process.cwd(), '')
  
  return {
    plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    
    // 图标（vite-plugin-svg-icons）
    createSvgIconsPlugin({
      iconDirs: [
        fileURLToPath(
          new URL('./src/assets/icons', import.meta.url)
        )
      ],
      symbolId: 'icon-[dir]-[name]',
    }),
    
    // 按需加载
    AutoImport({
      resolvers: [
        ArcoResolver(),
      ]
    }),
    Components({
      resolvers: [
        ArcoResolver({
          sideEffect: true
        }),
      ]
    }),
    ],
    resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
    },
    css: {
    preprocessorOptions: {
      scss: {
        prependData: ``,
        additionalData: `
          @use "@/assets/fonts/index.scss" as *;
        `,
        // modifyVars: {
        //   'font-family': '阿里妈妈刀隶体',
        // }
      },
      less: {
        modifyVars: {
          'font-family': '阿里妈妈刀隶体',
        },
        javascriptEnabled: true,
      }
    }
    },
    server: {
      host: '0.0.0.0',
      port: 4000,
    }
  }
})

看看页面效果：

可以看到，虽然「Arco.design」的组件被渲染出来了，但是我们在自定义样式文件中，对字体的设置「阿里妈妈刀隶体」的效果失效了。

在浏览器的开发者模式中，出现了「删除线」的格式，可能得原因是，被后续的配置覆盖了这里的配置。

END

温馨提示

如果你喜欢本文，请分享到朋友圈，想要获得更多信息，请关注我。

vue 软件 app

文章转载自Nephilim，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

Arco.design：完整引入与按需引入的差异

评论