All Projects → Mrminfive → Vue Multiple Page

Mrminfive / Vue Multiple Page

vue + webpack 多页/单页 脚手架

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Multiple Page

Vue2 Vue Router2 Webpack2
《从零搭建 vue2 vue-router2 webpack4 工程》《从零搭建 vue2 vue-router2 webpack3 工程》《搭建 vue2 vue-router2 webpack3 多入口工程》
Stars: ✭ 90 (-44.79%)
Mutual labels:  webpack3, vue2
vue-taobao
基于 vue2 + vuex + mint-ui 构建一个单页面应用
Stars: ✭ 19 (-88.34%)
Mutual labels:  vue2, webpack3
vue-number-keyboard
vue-number-keyboard是基于VUE实现的数字键盘插件,当前支持整数、小数数字输入、乱序键盘,demo中给出了常用的验证码、金额数字示例。数字键盘的大小包括字体尺寸支持响应式。
Stars: ✭ 51 (-68.71%)
Mutual labels:  vue2, webpack3
Vue2 Study
vue 的webpack配置,按需加载,element-ui,vuex
Stars: ✭ 16 (-90.18%)
Mutual labels:  webpack3, vue2
Easy Vue
Learn vueJS Easily 👻
Stars: ✭ 896 (+449.69%)
Mutual labels:  webpack3, vue2
List Pull Loading
list-pull-loading是一个基于VUE实现的下拉刷新,上拉加载的组件。主使用IScroll(iscroll-probe)来实现,提供了项目中数据列表经常会用到的下拉提示信息、上拉提示信息、图片懒加载、回到顶部,其提示信息UI、内容可灵活配置,可使用提供的默认样式也可以自定义也可以隐藏。
Stars: ✭ 17 (-89.57%)
Mutual labels:  webpack3, vue2
Vue2-All
Vue2 + Vue-router2 + Vuex + Webpack + axios + jwt
Stars: ✭ 67 (-58.9%)
Mutual labels:  vue2, webpack3
Vue2 Admin
基于vue-element-admin、Vue2 权限、监控、管理系统(包含地图等嵌套)
Stars: ✭ 74 (-54.6%)
Mutual labels:  webpack3, vue2
Multivisor
Centralized supervisor WebUI and CLI
Stars: ✭ 104 (-36.2%)
Mutual labels:  cli, vue2
Webtau
Webtau (short for web test automation) is a testing API, command line tool and a framework to write unit, integration and end-to-end tests. Test across REST-API, Graph QL, Browser, Database, CLI and Business Logic with consistent set of matchers and concepts. REPL mode speeds-up tests development. Rich reporting cuts down investigation time.
Stars: ✭ 156 (-4.29%)
Mutual labels:  cli
Tty Table
A flexible and intuitive table generator
Stars: ✭ 161 (-1.23%)
Mutual labels:  cli
Xstate Codegen
A codegen tool for 100% TS type-safety in XState
Stars: ✭ 158 (-3.07%)
Mutual labels:  cli
Git Machete
Probably the sharpest git repository organizer & rebase/merge workflow automation tool you've ever seen ;)
Stars: ✭ 158 (-3.07%)
Mutual labels:  cli
Paris
Logger in Rust for pretty colors and text in the terminal. Aiming for a relatively simple API
Stars: ✭ 162 (-0.61%)
Mutual labels:  cli
Vuetify Todo Pwa
✔️ A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify.
Stars: ✭ 160 (-1.84%)
Mutual labels:  vue2
Rtop
rtop is an interactive, remote system monitoring tool based on SSH
Stars: ✭ 1,963 (+1104.29%)
Mutual labels:  cli
Eslint Watch
ESLint with simple watching capabilities
Stars: ✭ 159 (-2.45%)
Mutual labels:  cli
Passw0rd
🔑securely checks a password to see if it has been previously exposed in a data breach
Stars: ✭ 159 (-2.45%)
Mutual labels:  cli
Swiggy Analytics
Analyse your swiggy orders 🍔
Stars: ✭ 163 (+0%)
Mutual labels:  cli
Serverless Secrets
An opinionated tool for safely managing and deploying Serverless projects and their secrets.
Stars: ✭ 162 (-0.61%)
Mutual labels:  cli

vue-multiple-page

简介

该项目为日常项目开发中抽离的一个脚手架,目的是为了方便后续开发。脚手架默认配置es6-7-8+cssnext+vue开发环境,但并不仅限于用vue做开发。并对webpack打包流程做了优化处理。支持单页/多页面开发,支持代码切割异步加载,有兴趣者请参阅webpack中文文档#代码分离

对新语法不熟悉的同学请参阅:

使用

git clone https://github.com/Mrminfive/vue-multiple-page.git
cd vue-multiple-page
npm install
npm run dev

打包

项目默认配置三种代码环境,分别为 production(正式环境)production-d(测试环境) 以及 development(开发)

测试环境与正式环境打包方式一致,主要用于正式版与测试版的代码微调。开发版本相对简单,取消代码压缩及其它不必要的优化,支持开发热更新。

脚手架使用 DllPlugin + DllReferencePlugin 打包外部资源包,优化打包速度,manifest 及打包后的文件包均放置在 static/libs/js 目录下,也可进入脚本自行配置路径。

dev

npm run dev

build

npm run build

build:d

npm run build:d

dll(打包外部资源库)

npm run build:vendors

如果需要打包外部资源库,应先跑 build:vendors 命令进行打包外部资源包,再执行编译。

项目结构

.
├── README.md
├── build
│   ├── build-d.js
│   ├── build.js
│   ├── dev-client.js
│   ├── dev.js
│   ├── util.js
│   ├── webpack.base.config.js
│   ├── webpack.dev.config.js
│   ├── webpack.dll.config.js
│   └── webpack.prod.config.js
├── config
│   ├── base.js
│   ├── dev.env.js
│   ├── index.js
│   ├── prod-d.env.js
│   ├── prod.env.js
│   └── util.js
├── package-lock.json
├── package.json
└── src
    ├── pages
    │   ├── common
    │   │   └── js
    │   │       └── common.js
    │   ├── index (页面1,单页模式将默认将index文件夹作为页面)
    │   │   ├── index.html
    │   │   ├── js
    │   │   │   ├── index.js
    │   │   └── style
    │   └── page2 (页面2)
    │       ├── index.html
    │       ├── js
    │       │   └── index.js
    │       └── style
    └── static (静态资源文件夹)
        ├── libs
        │   └── js (js文件夹下的)
        │       ├── manifest_vendors.json
        │       └── vendors.js
        └── test.txt

注意: 开启多页功能的情况下,脚本默认获取 src/pages文件夹下除 common 文件夹外的所有满足 !(_)*/!(_)*.html 条件的html文件作为html页面,并将满足条件的文件夹下的 js 文件夹下的 index.js 作为 webpack 打包入口。

每个页面项目的基本格式

.my-page (页面名称)
├── index.html (页面渲染的html模版)
├── js
│   └── index.js (页面脚本入口)
└── style (页面的样式文件)

编译后的项目结构

.
├── css
│   ├── index.3f05035e.css
│   ├── index.3f05035e.css.map
│   ├── page2.3f05035e.css
│   └── page2.3f05035e.css.map
├── js
│   ├── index.3f05035ea26e8a6c3eb8.js
│   ├── index.3f05035ea26e8a6c3eb8.js.gz
│   ├── index.3f05035ea26e8a6c3eb8.js.map
│   ├── page2.3f05035ea26e8a6c3eb8.js
│   └── page2.3f05035ea26e8a6c3eb8.js.map
├── static ()
│   ├── libs
│   │   └── js
│   │       ├── manifest_vendors.json
│   │       └── vendors.js
│   └── test.txt
├── index.html
└── page2.html

配置

脚手架的基本配置为 config/base.js 文件。修改配置文件将影响打包效果。

默认配置项

{
    isMultiplePage: true,
    // 是否启用异步加载功能
    isOpenSyncImport: true,
    // 最小chunk的大小
    minChunkSize: 10000,
    // dev模式下是否自动打开页面
    autoOpenBrowser: true,
    // 文件目录
    assetsRoot: path.resolve(__dirname, '../src'),
    // 生成目录
    buildRoot: path.resolve(__dirname, '../dist'),
    // 静态资源根目录
    staticAssets: 'static',
    // 生成路径
    publicPath: '/',
    // 公用别名
    commonAlias: {
        Static: 'static',
        '@': 'pages'
    },
    // 外部扩展
    externals: {
        // '$': 'JQuery'
    },
    // 公众模块(默认情况下common/js文件下的文件作为`commons chunk`打包)
    commons: {
        // demo: path.resolve(__dirname, '../src/pages/index/js/demo.js')
    },
    // 要打包的外部资源库
    library: [
        'axios',
        'vue',
        'vue-router'
    ],
    // 要引进外部资源库的页面(为空则全部引入)
    libraryEntry: [
        // 'index',
        // 'page2'
    ],
    // 本地开发端口
    port: 8009,
    // 本地开发代理
    proxy: {
        // '/api': {
        //  target: "http://*.com",
        //  changeOrigin: true,
        //  pathRewrite: {
        //      '^/api': ''
        //  },
        //  logLevel: 'error'
        // }
    }
}
  • isMultiplePage 是否多入口打包
  • isOpenSyncImport 是否启用异步加载功能(启用的状态下,commons 参数将失效)
  • minChunkSize 最小chunk的大小 (isOpenSyncImport 参数为 true 是生效)
  • autoOpenBrowser dev模式下是否自动打开页面
  • assetsRoot 资源文件目录 URL(参照webpack官方文档)
  • buildRoot 打包后的文件目录 URL(参照webpack官方文档)
  • staticAssets 在资源文件目录下的静态资源目录
  • publicPath 打包后的文件目录对应的公开 URL(参照webpack官方文档)
  • commonAlias 公用别名(参照webpack官方文档)
  • externals 外部扩展(参照webpack官方文档)
  • commons 公众模块(默认情况下common/js文件下的文件作为commons chunk打包,在 isOpenSyncImport 参数启用的情况下将失效)
  • library 要打包的外部资源库(填写模块名或引用路径)
  • libraryEntry 要引进外部资源库的页面(为空则全部引入,填写页面名称,即入口文件夹名称)
  • port 本地开发端口(默认为 8009
  • proxy 本地代理(参照http-proxy-middleware文档

备注

如果遇到脚本语法兼容问题,请升级 node 版本。其它问题请提交问题(issue)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].