README
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 | [] |
- |