If you want to create an eleUI Tabs effect on your website, you might want to use them elsewhere in the future, and there might be other components, so just write your own UI library. There are no CSS effects because I haven’t thought of any styles yet.

Record the process here, only for personal website customization needs to develop. I will continue to revise if I can’t explain clearly in the first post

So let’s get started

Project address (in ongoing development, for study only)

demo

  • Reference articles (thanks to these authors)
  • Build Vue component library VV-UI from scratch
  • Hand in hand to take you to a VUE component library!
  • A wave of vUE plug-in development, documentation, Github release, NPM package release

preparation

Vue-cli3 npm webpack

The body of the

Create a project and do some configuration

  1. Create a default project.

    vue create fungwey-ui
# Install as follows
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
Copy the code
    Install complete🎉 Successfully created project fungwey- UI. 👉 Get started with the following commands: $cd fungwey-ui
$ yarn serve
Copy the code

  2. Adjust the directory structure.

    Project root (SRC sibling)

        .
.
| - examples / / SRC directory, change to examples used as examples
| - packages / / new packages for writing storage component
.
    .
Copy the code

    With the above changes, two problems arise

    • srcThe nameexamples, causing the project to fail to run
    • newpackagesFolder, the directory is not addedwebpackcompile

    Cli3 provides an optional vue.config.js configuration file. If this file exists, it will be automatically loaded, and all the configuration for the project and webpack will be in this file.

    New vue. Config. Js,

    • pagesModify the entry
    • chainWebpack 对 packagesDirectory processing
    module.exports = {
// Change the SRC directory to examples
    pages: {
        index: {
        entry: 'examples/main.js',
        template: 'public/index.html',
        filename: 'index.html'
        }
    },
LintOnSave: false // Closes ESLint
}
Copy the code

    After yarn serve is executed, the project can be run. Delete the HelloWorld component and empty app. vue

    <template>
<div id="app">
    <router-view/>
</div>
</template>
<script>
export default {
    name: 'app'
}
</script>
Copy the code

Write components

  1. Import component create the following content, the file content is here on GitHub

        .
.
    +- packages
| +--src
| +--utils
| +--util.js
| +-- tab-pane
| +-- index.js
| +-- tabs
| +-- index.js
| +-- src
| +-- tabs.vue
| +-- tab-pane.vue
| +-- tab-nav.vue
| +-- tab-bar.vue
.
    .
Copy the code

    Export the component in/Packages /tabs/index.js

    // Import components
import Tabs from './tabs'
import TabPane from './tab-pane/index.js'

// Store a list of components
const components = [
    TabPane,
    Tabs
]

// Define the install method that accepts Vue as an argument. If the plug-in is registered with use, all components will be registered
const install = function (Vue) {
    // Determine whether to install it
    if (install.installed) return
    // Iterate over registered global components
    components.map(component= > Vue.component(component.name, component))
}

// Check whether the file is imported directly
if (typeof window! = ='undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // Export install, you can globally import Vue. Use ()
    install,
    // Here is a list of specific components that can be loaded on demand
    TabPane,
    Tabs
}
Copy the code

  2. Write a sample

    Import the component library in examples/main.js

    import Vue from 'vue'
import App from './App.vue'
import router from './router'

// Import the component library
import FungWeyUI from '. /.. /packages/index'
// Register the component library
Vue.use(FungWeyUI)

Vue.config.productionTip = false

new Vue({
router,
render: h= > h(App)
}).$mount('#app')

Copy the code

    The yarn serve command is successfully started.

Github launch

Next, upload Github and set up the Github display page.

  1. Create a new project on Github

  2. Upload code

    • git initInitialize the Git project
    • git checkout -b masterCreate a new master branch
    • git add .Add all files
    • Git commit -mGit local Commit
    • git remote add origin https://github.com/fungwey/fungwey-ui.gitLink to the warehouse
    • git push origin mastersubmit

  3. GitHub Pages -> Settings -> Options -> Source -> None -> Master branch Above can see the address of Your site is published at https://fungwey.github.io/fungwey-ui/

Release NPM package

First you need to register an account with NPM. Activate the mailbox through NPM’s mail.

If taobao mirror is configured, reconfigure it.

npm config set registry http://registry.npmjs.org 
Copy the code

Then run the login command on the terminal and enter the user name, password, and email address (which must be activated) to log in.

yarn login
# username, email, password
yarn publish
Copy the code

Publish successfully and it’s ready to go. Views /search/index.js is the practice in this project