one , take src Change folder to examples folder The project cannot run after the change You need to create a new one in the root of the project vue.config.js file
And add the following configuration
module.exports = { pages: { index: { entry: 'examples/main.js', template:
'public/index.html', filename: 'index.html' } } }
two , Create a folder in the root directory packages Write your own components in this folder The structure is as follows
three , stay button In folder index.js Write the code in
import myBtn from './src/myBtn' // Provide for components install Installation method , For introduction on demand myBtn.install =
function (Vue) { Vue.component(myBtn.name, myBtn) } // Default export component export default
myBtn
four , stay packages Next index.js Write the following code in
import myBtn from './button/index' const components = [ myBtn ] const install =
function(Vue) { // Judge whether to install if (install.installed) return components.map(component
=> { Vue.component(component .name, component ) }) // Judge whether the file is imported directly if (typeof
window!== 'undefined' && window.Vue) { install(window.Vue) } } export default {
// Exported objects must have install, Can be Vue.use() Method installation install, // The following is a list of specific components myBtn }
five , In the picture lib The folder is generated for packaging , stay package.json Add the following configuration to the
six ,packages The folder should be configured as the default loaded folder in the configuration file , At this time vue.config.js The complete configuration is as follows
add(__dirname + ‘package’) In dirname It can't be ignored Otherwise, the startup will report an error
seven , Ready to contract perfect package.json The file configuration is as follows
File names in this article Readers can change it according to their own needs
Run after npm login Sign in npm after , Then type in npm who am i If the command has its own account name , It proves that the landing was successful , That's it npm publish
The contract was awarded After successful release Use in projects that need to use components npm install Package name that will do The package name here is wjwui
eight , Using component packages
stay main.js in Import file import Package name from Package folder // This is an example import wjwUI from 'wjwui' // stay vue Used in
Vue.use(wjwUI )
After that, you can use your own components directly in the page
use
This process is for reference only Specific components need to be packaged according to the needs of readers
Technology