Skip to content

bullub/whale-vue

Repository files navigation

说明

whale-vue是一个基于webpack4vue2.+进行编写的多页面脚手架,其配置将完全暴露在core目录中,并未进行封装,用户可以根据自己的需求进行重新修改配置; 你可以像重新配置webpack一样的阅读脚手架代码,目录参考了nuxt.jsegg的部分结构,你可以直接克隆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目录

资源目录,在项目中存放的图片、样式、字体等文件存放目录,可以在项目中直接使用@/assets/***.css,有关@/的配置参见core/base.js

resolve:{
    alias: {
        '@':path.resolve(__dirname, '../'),
    }
}

+ components

vue开发的公共组件

+ config

主要用来存放项目的公共配置,pages.js文件是多页面的入口文件,每增加一个页面,需要在此处增加配置,也可以通过注释此处的入口从而避免打包,但会保持pages目录下的页面源文件依然存在。

+ core

webpack核心编译配置代码,可以通过修改这里的配置来灵活的改变项目所对应的业务需求。

pages.js

该文件会通过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插件的favicon
  • excludeChunks用于排除不必要的代码块,支持[ Array | Function | RegExp],为数组时将会直接排除数组中的模块,为函数时接受当前默认代码块,并返回数组,为正则表达式,将会直接使用test方法排除。

该模块的改动尽量阅读源码。

rem.js

主要是页面在使用rem单位时进行适配的相关处理

+ pages

多页面存放目录

+ public

静态文件目录,开发环境下可以直接通过端口进行文件的访问,静态输出的时候会通过copy-webpack-plugin将所有文件复制到输出目录

+ router

路由存放目录

+ store

项目默认并没有该目录,需要手动新建, 当使用vuex来管理状态时,可以将文件存放至该目录,当然也可以自定义目录名称。

+ plugin

需要手动创建。插件存放目录,例如你要是用Vue.use()进行方法的扩展等,你可以将一些通用的处理方法或者插件存放至此。

关于whale-vue的整体项目配置,我们只是在webpack 4vue 2.+的基础上进行了默认的配置,并做了相应的规范管理,并没有做任何封装。你完全可以在了解webpack以及打包流程的情况下,自行修改core目录下的配置文件来对应你的业务需求。

About

基于VUE2.0的定制化脚手架

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published