vue-chunk-routes-store
v1.0.1
Published
+ 路由的路径为`~/routes`,在webpack的alias别称中添加了`~`来代替`src`,`~/routes`即是`src`下的`routes`文件夹。
Downloads
1
Readme
因为webpack的require.context的第一个参数只支持字面量,无法使用变量,所以本项目的路径是写死的,具体路径可以在注册时修改,或者在webpack的alias配置中添加别称。
路由的路径为
~/routes
,在webpack的alias别称中添加了~
来代替src
,~/routes
即是src
下的routes
文件夹。同理
~/store/modules
即为src/store/modules
文件夹。
使用了这个插件后。
不需要在routes/index.js
中写routes,会自动检索src/routes/modules
下的所有除了index.js的js文件,自动注册到路由中。
不需要在store/index.js
中写入modules,会自动检索src/store/modules
下所有的js文件,自动注册到store中。
使用方法
import store from '~/store'
import router from '~/routes'
import autoRouteStore from './index'
const routerContext = require.context('~/routes/modules', true, /\.js$/)
const storeContext = require.context('~/store/modules', true, /\.js$/)
Vue.use(autoRouteStore, {
router,
routerContext,
storeContext,
store
})
注意事项
因webpack在dev下的缓存配置问题,当删除目录下的文件夹时,需要npm run dev
重新启动项目来更新缓存
目录
|__src
|__routes
|__modules
|__demo1-router.js
|__demo2-router.js
|__index.js
|__store
|__modules
|__demo1-store.js
|__demo2-store.js
|__global.js
|__index.js
routes/index.js
import Vue from 'vue' // 引入vue
import VueRouter from 'vue-router' // 引入vue-router
const router = new VueRouter({
routes: []
})
Vue.use(VueRouter)
export default router
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import global from '~/store/global'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
global
}
})
export default store