I am a fresh graduate, because of the recent graduation idle down, I think can build their own UI frame, nothing to play, but also can learn some knowledge. The main thing is to talk about the process inside. I think the current need to be familiar with the general process, UI framework, there are a lot of out-of-the-box, can be based on them to redo.

  1. Initialize the WebPack-based myUI project with vUE. To open a folder and then a terminal, you can use git bash directly.

vue init webpack my-ui
Copy the code

  1. Then run the initialized folder
Json to see the NPM run dev commandCopy the code
  1. Start writing component code, or you can go to Github to pull a good open source framework (niche), the main is to understand some of the process, can be like this. Packages can be placed in the source code SRC can be placed in the current project runtime interface.

  1. Since we are sending packages to NPM, we thought that we should import our package entry when importing, so we should modify it in the package.json main field. Of course import has a lot of rules.
import MyUI from 'my-ui'
Vue.use(MyUI)

"main": "./packages/index.js".Copy the code
  1. We use vue.use (), encountered export install function, specific can baidu

import FTable from './components/table/index'

const components = [
  FTable,
]

const install = function (Vue) {
  components.forEach(component= > {
    Vue.component(component.name, component)
  })
}

if (typeof window! = ='undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  install,
  FTable,

}
Copy the code
  1. Then we start sending packets, and this will need to use the NPM image. Use the command switch,publish error move to this article
npm config set registry  https://registry.npmjs.org/

npm publish 
Copy the code
  1. Since I sent NPM before, please do not verify the account password. Please pay attention to change the private in package.json to false.

  1. Log in to NPM to view

  1. And then we looked at some of our other packages, and this is my god-released package.

10. Then we can use our own bag to see if it works

npm i my-ui-sww
Copy the code

Discovery can be used in pages