webpack+vue已经成为单页面程序标配!其实webpack构建vue多页面程序也是相当出色!
1. 工程布局
2. webpak.config.js
3. 生产环境与开发环境
4. 自动化构建
5. 源码GitHub



1.工程布局

理想中的工程目录如下:

-app
    webpack.config.js  //webpack入口配置
    postcss.config.js  //css3兼容前缀
    package.json   //依赖json
    -dist    //打包之后根目录
        -js   //打包之后js存放
        -css   //打包之后css存放
        -views   //打包之后html存放
        -img   //打包之后 img存放
    -src  //源码,app开发过程所需一切resource
        -APPcommon  //公共部分
            -components  //常用组件
            -font  //字体部分
            -style   //重置样式,mixin
            -view  //入口html
            -modules  //常用js模块
            -lib  //js库
        -APPpages  //多页面
            -home  //home页面
            -about  //about页面
            -list  //list页面
            .....

下一章: 二. webpack.config.js

Logo

前往低代码交流专区

更多推荐