├── examples ├── micro │ ├── src │ │ ├── pages │ │ │ └── .gitkeep │ │ ├── components │ │ │ └── hello.vue │ │ ├── app.vue │ │ └── main.js │ └── package.json └── with-routers │ ├── src │ ├── pages │ │ ├── about.vue │ │ ├── home.vue │ │ └── posts │ │ │ ├── first.vue │ │ │ └── [id].vue │ ├── components │ │ └── hello.vue │ ├── main.js │ └── app.vue │ └── package.json ├── favicon.ico ├── now.json ├── src ├── component.js ├── util.js ├── index.js └── router.js ├── docs.js ├── package.json ├── LICENSE ├── .gitignore ├── README.md └── yarn.lock /examples/micro/src/pages/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/unix/vue-auto/HEAD/favicon.ico -------------------------------------------------------------------------------- /examples/with-routers/src/pages/about.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/with-routers/src/pages/home.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/micro/src/components/hello.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/with-routers/src/pages/posts/first.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/with-routers/src/components/hello.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/with-routers/src/pages/posts/[id].vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/micro/src/app.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /examples/micro/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import app from './app.vue' 3 | import { install } from 'vue-auto' 4 | 5 | install(Vue, { 6 | autoRouter: false, 7 | }) 8 | 9 | new Vue({ 10 | render: h => h(app) 11 | }).$mount('#app') 12 | -------------------------------------------------------------------------------- /examples/with-routers/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import app from './app.vue' 3 | import { install } from 'vue-auto' 4 | 5 | const router = install(Vue) 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(app) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /examples/with-routers/src/app.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-auto", 3 | "version": 2, 4 | "alias": "vue-auto.lambdas.dev", 5 | "github": { 6 | "silent": true 7 | }, 8 | "builds": [ 9 | { 10 | "src": "package.json", 11 | "use": "@now/static-build", 12 | "config": { 13 | "distDir": "dist" 14 | } 15 | } 16 | ], 17 | "routes": [ 18 | { 19 | "src": ".*", 20 | "dest": "./dist/index.html" 21 | } 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /src/component.js: -------------------------------------------------------------------------------- 1 | import * as util from './util' 2 | 3 | export const createComponents = (vue, components) => { 4 | components 5 | .forEach(com => { 6 | if (!com.routerName.startsWith(util.pagePrefix) && !com.routerName.startsWith(util.getPrefix())) { 7 | com.routerName = `${util.getPrefix()}-${com.routerName}` 8 | } 9 | com.name = com.name || com.routerName 10 | vue.component(com.name, com) 11 | }) 12 | } 13 | 14 | -------------------------------------------------------------------------------- /examples/micro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "examples-micro", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "vue-cli-service serve" 8 | }, 9 | "dependencies": { 10 | "vue": "^2.6.6", 11 | "vue-auto": "^0.4.0" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^3.5.0", 15 | "@vue/cli-service": "^3.5.0", 16 | "vue-template-compiler": "^2.5.21" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/with-routers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "examples-with-routers", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "vue-cli-service serve" 8 | }, 9 | "dependencies": { 10 | "vue": "^2.6.6", 11 | "vue-auto": "^0.3.2", 12 | "vue-router": "^3.0.7" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.5.0", 16 | "@vue/cli-service": "^3.5.0", 17 | "vue-template-compiler": "^2.5.21" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /docs.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const { execSync } = require('child_process') 3 | 4 | const es = fs.readFileSync('./README.md', 'utf-8') 5 | const init = t => `Vue Auto 6 |
7 | ${require('marked')(t)}
This project is open-sourced on GitHub.
` 8 | 9 | execSync('(yarn add marked & mkdir dist) && cp favicon.ico ./dist') 10 | fs.writeFileSync('dist/index.html', init(es)) 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-auto", 3 | "version": "0.7.0", 4 | "main": "src/index.js", 5 | "repository": "git@github.com:unix/vue-auto.git", 6 | "author": "unix ", 7 | "license": "MIT", 8 | "scripts": { 9 | "lint": "xo", 10 | "now-build": "node docs.js" 11 | }, 12 | "pre-commit": [ 13 | "lint" 14 | ], 15 | "files": [ 16 | "src" 17 | ], 18 | "xo": { 19 | "extends": [ 20 | "lambdas/vue" 21 | ], 22 | "rules": { 23 | "max-params": [ 24 | "error", 25 | 5 26 | ] 27 | }, 28 | "ignore": [ 29 | "examples" 30 | ] 31 | }, 32 | "peerDependencies": { 33 | "vue": "^2.5.0" 34 | }, 35 | "dependencies": { 36 | "vue-router": "^3.0.7" 37 | }, 38 | "devDependencies": { 39 | "babel-eslint": "^10.0.2", 40 | "eslint-config-lambdas": "^0.2.5", 41 | "pre-commit": "^1.2.2", 42 | "xo": "^0.24.0" 43 | } 44 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Witt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /src/util.js: -------------------------------------------------------------------------------- 1 | export const dynamicRouterReg = /^\[(\S+)]$/ 2 | export const pagePrefix = 'pages' 3 | let defaultPrefix = 'auto' 4 | 5 | export const getPrefix = () => defaultPrefix 6 | 7 | export const setPrefix = (prefix = defaultPrefix) => { 8 | defaultPrefix = prefix 9 | } 10 | 11 | export const setDefaultOption = options => { 12 | options.prefix = options.prefix || getPrefix() 13 | options.mode = options.mode || 'history' 14 | options.base = options.base || process.env.BASE_URL 15 | if (options.autoRouter === undefined) { 16 | options.autoRouter = true 17 | } 18 | 19 | if (options.routes && !Array.isArray(options.routes)) { 20 | throw new Error('vue-auto: options.routes must be an array.') 21 | } 22 | options.routes = options.routes || [] 23 | return options 24 | } 25 | 26 | export const getComponentName = path => { 27 | return `${defaultPrefix}-${pathToParams(path).reverse()[0]}`.toLowerCase() 28 | } 29 | 30 | export const getPageName = path => { 31 | const componentName = pathToParams(path) 32 | .map(name => { 33 | if (!dynamicRouterReg.test(name)) return name 34 | return name.match(dynamicRouterReg)[1] || name 35 | }) 36 | .join('-') 37 | return `${pagePrefix}-${componentName.toLowerCase()}` 38 | } 39 | 40 | export const pathToParams = path => { 41 | path = path 42 | .replace('.vue', '') 43 | .replace(/_/g, '-') 44 | 45 | return path 46 | .split('/') 47 | .filter(name => name !== '.') 48 | } 49 | 50 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import * as util from './util' 2 | import * as router from './router' 3 | import * as component from './component' 4 | 5 | let pagesContext, componentsContext, 6 | notFoundPages = false, 7 | notFoundComponents = false 8 | try { 9 | pagesContext = require.context('@/pages/', true, /\.vue$/) 10 | } catch (error) { 11 | notFoundPages = true 12 | } 13 | 14 | try { 15 | componentsContext = require.context('@/components/', true, /\.vue$/) 16 | } catch (error) { 17 | notFoundComponents = true 18 | } 19 | 20 | const getModules = (context, isPage) => context 21 | .keys() 22 | .map(path => { 23 | const getName = isPage ? util.getPageName : util.getComponentName 24 | return Object.assign( 25 | {}, 26 | context(path).default, 27 | { routerName: getName(path) }, 28 | ) 29 | }) 30 | 31 | const pages = !notFoundPages ? getModules(pagesContext, true) : {} 32 | 33 | const install = (vue, options = { 34 | prefix: util.getPrefix(), 35 | mode: 'history', 36 | base: process.env.BASE_URL, 37 | autoRouter: true, 38 | routes: [], 39 | }) => { 40 | options = util.setDefaultOption(options) 41 | util.setPrefix(options.prefix) 42 | const components = !notFoundComponents ? getModules(componentsContext) : {} 43 | 44 | !notFoundComponents && component.createComponents(vue, components) 45 | !notFoundPages && component.createComponents(vue, pages) 46 | 47 | if (!options.autoRouter) return null 48 | return router.createRouter( 49 | vue, 50 | pages, 51 | pagesContext.keys(), 52 | { 53 | mode: options.mode, 54 | base: options.base, 55 | }, 56 | options.routes, 57 | ) 58 | } 59 | 60 | const withRouters = router.makeWithRouters(pages) 61 | 62 | export { 63 | install, 64 | withRouters, 65 | } 66 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Router from 'vue-router' 2 | import * as util from './util' 3 | 4 | let pages = [] 5 | export const makeWithRouters = p => { 6 | pages = p 7 | return withRouters 8 | } 9 | 10 | const withRouters = routers => routers 11 | .map(r => { 12 | if (r.component && (typeof r.component !== 'string')) return r 13 | if (r.children) r.children = withRouters(r.children) 14 | 15 | const name = r.name || r.component 16 | if (!name) return r 17 | 18 | const ident = name.toLowerCase() 19 | const instance = pages.find(item => item.routerName === ident) 20 | if (!instance) { 21 | console.error(`Router: No route matching ${r.name} was found.`) 22 | } 23 | r.component = instance 24 | 25 | return r 26 | }) 27 | 28 | export const createRouter = (vue, pages, pageContexts, routerOptions, extraRoutes) => { 29 | let routes = extraRoutes || [] 30 | pageContexts 31 | .sort(a => util.dynamicRouterReg.test(a) ? 1 : -1) 32 | .forEach(path => { 33 | routes = appendRouter(path, routes, pages) 34 | }) 35 | vue.use(Router) 36 | return new Router({ 37 | routes, 38 | mode: routerOptions.mode, 39 | base: routerOptions.base, 40 | }) 41 | } 42 | 43 | const makeRouter = (path, routerPath, pages) => { 44 | const instance = pages.find(item => item.name === util.getPageName(path)) 45 | return { 46 | path: `/${routerPath}`, 47 | component: instance, 48 | } 49 | } 50 | 51 | const appendRouter = (path, routes, pages) => { 52 | const params = util.pathToParams(path) 53 | const routerPath = params 54 | .map(name => { 55 | if (!util.dynamicRouterReg.test(name)) return name 56 | return `:${name.match(util.dynamicRouterReg)[1]}` || name 57 | }) 58 | .join('/') 59 | 60 | const exist = routes.find(item => item.path === routerPath) 61 | if (exist) return routes 62 | return routes.concat([makeRouter(path, routerPath, pages)]) 63 | } 64 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-auto 2 | > use Vue in a simpler way. 3 | 4 | `vue-auto` can help you inject all components automatically, It makes your project simpler, cleaner. 5 | 6 |
7 | 8 | ### Features 9 | 10 | - No Import. 11 | 12 | - No `Vue.component`. 13 | 14 | - No `component.name`. 15 | 16 | - No `Router.component`. 17 | 18 |
19 | 20 | ### Automation 21 | 22 | - Auto import `Component`: 23 | 24 | You created a component file: 25 | ``` 26 | // hello.vue 27 |