vue-auto

use Vue in a simpler way.

vue-auto can help you inject all components automatically, It makes your project simpler, cleaner.

Features

• No Import.

• No Vue.component.

• No component.name.

• No Router.component.

Automation

• Auto import Component:

  You created a component file:

  // hello.vue
  <template> <p>hello</p> <template>

  It can be used anywhere:

  <auto-hello>

• Auto set router

  File pages/home.vue == router /home:

  // pages/home.vue
  <template> <p>home</p> <template>

  File pages/posts/[id].vue == router /posts/20:

  // pages/posts/[id].vue
  <template> 
    <p>This is a dynamic route, {{ $route.params.id }}</p> 
  <template>

It's easy.

Usage

1. install: npm i vue-auto.

2. create components/ and pages/ folder.

3. import to your main.js:

import Vue from 'vue'
import { install } from 'vue-auto'

const router = install(Vue, { prefix: 'my' })
new Vue({
  router,
  render: h => h(app),
}).$mount('#app')

Any component will be automatically injected into the global, you can also customize component prefixe.

Guide

Please complete the init in step Usage first.

• Components:

  • use my-{filename} in anywhere.
  • prefixe can be modified in options.prefix, default is auto.
  • any component can refer to each other.

• Routers:

  • files under folder pages will automatically be routed.
  • get router /about == create file /pages/about.vue.
  • get router /posts/:id == create file /posts/[id].vue.
  • get router /pages/first == create file /posts/first.vue. (static routes take precedence over dynamic routes)

Options

Here are the options of install(vue, options)

| name | type | description | default | example | |---|---|---|---|---| | prefix | string | custom component prefix | auto | my | | autoRouter | boolean | auto inject router | true | - | | mode | string | h5 router mode | history | - | | base | string | router base | process.env.BASE_URL | - | | routes | array | extra routes: RouteConfig | [] | - |

Examples

• micro project

• with-router-project

LICENSE

MIT