0.7.0 • Published 4 years ago
vue-auto v0.7.0
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
install:
npm i vue-auto
.create
components/
andpages/
folder.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 isauto
. - any component can refer to each other.
- use
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)
- files under folder
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 | [] | - |