search

vuejs / vuepress

📝 Minimalistic Vue-powered static site generator
https://vuepress.vuejs.org
MIT License
22.6k stars 4.76k forks source link

[Feature Request] How to use the element-ui and load it on demand, with using babel-plugin-component #2426

Open pearlwang1106 opened 4 years ago

pearlwang1106 commented 4 years ago

Feature request

引入element-ui，并且实现按需加载，该如何设置

如下配置不生效：

const path = require('path');

function resolve (dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    title: '',
    description: '',
    head: [
        ['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],
        ['script', { src: 'https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js' }],
    ],
    markdown: {
        lineNumbers: true
    },
    chainWebpack: (config, isServer) => {
        config.resolve.alias
            .set('assets', resolve('public/assets'))
    },
    presets: [
        ["es2015", { "modules": false }],
    ],
    plugins: [
        [
        "component",
        {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
        }
        ]
    ],
}
ulivz commented 4 years ago

Hmmm ... you're using a babel plugin as a VuePress plugin, I suggest that you need read docs of VuePress's Plugin API again.

It seems that you need to config extra babel plugin, it's a valid feature request.

TAnas0 commented 2 years ago

I've managed to make this work by piecing together these 2 great answers:

This is how you would configure the babel-plugin-component to work with VuePress:

....
  chainWebpack: (config, isServer) => {
    // Thanks to https://github.com/vuejs/vuepress/issues/969#issuecomment-434193517
    // https://stackoverflow.com/a/52121492/4017403
    config.module
      .rule('js') // Find the rule.
      .use('babel-loader') // Find the loader
      .tap(options => Object.assign(options, { // Modifying options
        plugins: [
          ["component", {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }]
        ]
      }))
  },
....

Then you would selectively import your components as suggested by the VuePress Docs here

This has been open for a while, so I am not sure if it's of use to anybody :sweat_smile:

zzy-life commented 2 years ago

I've managed to make this work by piecing together these 2 great answers:

This is how you would configure the babel-plugin-component to work with VuePress:

....
  chainWebpack: (config, isServer) => {
    // Thanks to https://github.com/vuejs/vuepress/issues/969#issuecomment-434193517
    // https://stackoverflow.com/a/52121492/4017403
    config.module
      .rule('js') // Find the rule.
      .use('babel-loader') // Find the loader
      .tap(options => Object.assign(options, { // Modifying options
        plugins: [
          ["component", {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }]
        ]
      }))
  },
....

Then you would selectively import your components as suggested by the VuePress Docs here

This has been open for a while, so I am not sure if it's of use to anybody 😅

I use your method, but only 1 MB of capacity is compressed. Is this normal?

Oathkitchen commented 1 year ago

I've managed to make this work by piecing together these 2 great answers:

This is how you would configure the babel-plugin-component to work with VuePress:

....
  chainWebpack: (config, isServer) => {
    // Thanks to https://github.com/vuejs/vuepress/issues/969#issuecomment-434193517
    // https://stackoverflow.com/a/52121492/4017403
    config.module
      .rule('js') // Find the rule.
      .use('babel-loader') // Find the loader
      .tap(options => Object.assign(options, { // Modifying options
        plugins: [
          ["component", {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }]
        ]
      }))
  },
....

Then you would selectively import your components as suggested by the VuePress Docs here

This has been open for a while, so I am not sure if it's of use to anybody 😅

This is really helpful. Thanks a lot!