Mrminfive / Vue Multiple Page
vue + webpack 多页/单页 脚手架
Stars: ✭ 163
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-number-keyboard
vue-number-keyboard是基于VUE实现的数字键盘插件,当前支持整数、小数数字输入、乱序键盘,demo中给出了常用的验证码、金额数字示例。数字键盘的大小包括字体尺寸支持响应式。
Stars: ✭ 51 (-68.71%)
Mutual labels: vue2, webpack3
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
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
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
Passw0rd
🔑securely checks a password to see if it has been previously exposed in a data breach
Stars: ✭ 159 (-2.45%)
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].