whale-vue是一个基于webpack4和vue2.+进行编写的多页面脚手架,其配置将完全暴露在core目录中,并未进行封装,用户可以根据自己的需求进行重新修改配置; 你可以像重新配置webpack一样的阅读脚手架代码,目录参考了nuxt.js和egg的部分结构,你可以直接克隆Git仓库的源码进行运行。
git克隆项目
git clone https://github.com/xiangzongliang/whale-vue.git
npm run dev
npm run build
- /assets //资源目录
- /build //build命令输出目录
- /components //组件目录
- /config 配置文件
-
- pages.js 所有页面入口
-
- rem.js rem自适应
- /core
webpack编译核心文件 - /pages //页面存放目录
- /public //静态文件目录(可以通过端口直接访问文件,并会在打包时直接复制该目录文件)
- /router // 在使用
vue-router时路由存放目录 - /template //编译模版文件
- /tests //测试文件目录
/store//在使用vuex时候,状态文件管理目录/plugin//插件目录
资源目录,在项目中存放的图片、样式、字体等文件存放目录,可以在项目中直接使用@/assets/***.css,有关@/的配置参见core/base.js
resolve:{
alias: {
'@':path.resolve(__dirname, '../'),
}
}
vue开发的公共组件
主要用来存放项目的公共配置,pages.js文件是多页面的入口文件,每增加一个页面,需要在此处增加配置,也可以通过注释此处的入口从而避免打包,但会保持pages目录下的页面源文件依然存在。
webpack核心编译配置代码,可以通过修改这里的配置来灵活的改变项目所对应的业务需求。
该文件会通过core/utils.js下的方法生成多页的入口和输出两部分的配置,该配置最终使用html-webpack-plugin插件的形式注入,例如:
about: {
title:'whale-vue 基于 webpack4 的 vue 大型多页项目脚手架',
entry: './pages/about/about.js',
template: './template/index.html',
//chunks
//favicon
//excludeChunks
}
title将会通过htmlWebpackPlugin.options.title注入到模版页面中entry页面入口文件的路径template编译的模版文件chunks支持[ Array | Function ],为Array时候只会注入数组中的代码块,为Function接收默认的代码块,可以经过处理,但必须返回数组。
默认注入的模块已经经过优化,应该尽量减少
chunks API的使用。
favicon对应htmlWebpackPlugin插件的faviconexcludeChunks用于排除不必要的代码块,支持[ Array | Function | RegExp],为数组时将会直接排除数组中的模块,为函数时接受当前默认代码块,并返回数组,为正则表达式,将会直接使用test方法排除。
该模块的改动尽量阅读源码。
主要是页面在使用rem单位时进行适配的相关处理
多页面存放目录
静态文件目录,开发环境下可以直接通过端口进行文件的访问,静态输出的时候会通过copy-webpack-plugin将所有文件复制到输出目录
路由存放目录
项目默认并没有该目录,需要手动新建, 当使用vuex来管理状态时,可以将文件存放至该目录,当然也可以自定义目录名称。
需要手动创建。插件存放目录,例如你要是用Vue.use()进行方法的扩展等,你可以将一些通用的处理方法或者插件存放至此。
关于
whale-vue的整体项目配置,我们只是在webpack 4和vue 2.+的基础上进行了默认的配置,并做了相应的规范管理,并没有做任何封装。你完全可以在了解webpack以及打包流程的情况下,自行修改core目录下的配置文件来对应你的业务需求。