[Vuejs]-Install specific component on a package (beginner)

by

2👍

✅

Using npm (or even Yarn), you can only install an entire package and all of it’s dependencies. Installing specific parts of a package isn’t a thing; more docs can be found here. Once again, even the docs for element-ui makes it quite clear that installing the package can only be done through

npm i element-ui -S

or if you’re using yarn, yarn install ‘ing after adding the package to your package.json.

Now, if you’re wondering if it’s possible to only include the component you want in the output bundle of your Vue app, then the answer is yes. You’ll need to ensure that you’re importing only the full path of the component (as opposed to the entire package):

import ElementUI from 'element-ui'; // will import the whole library

OR

import { DatePicker } from 'element-ui/lib/Datepicker' // will import only the Datepicker

You’ll need to ensure that the path you’re importing the component from matches that of the installed package location within your node_modules directory. As well, you’ll then need to make sure that your Webpack config is setup correctly to bundle only the JS files you’re importing (which should be handled by default).

👤Xenyal

1👍

I think there is no way to only install one single component from a ui library.
Because there has a lot of dependency between each component in the source code.
But if you are worry about it’s to heavy to import the whole library into your project.

Maybe the best way is import the library on demand like below:

import Vue from 'vue'
import { DatePicker } from 'element-ui'

Vue.use(DatePicker)

When using it with webpack and babel-plugin-component.
Your bundle output will only include code from the library which is actually useful.
You can see the detail document here Element QuickStart.(Ps: the On demand section)

Or you can discard to use ElementUI.
And choose another DatePicker Component for Vue from this site Awesome Vue

👤MinimalistYing

Leave a comment