{"id":16321451,"url":"https://github.com/doodlewind/vue-springbud","last_synced_at":"2025-03-22T21:32:19.833Z","repository":{"id":80193210,"uuid":"70574449","full_name":"doodlewind/vue-springbud","owner":"doodlewind","description":"不是最简洁的 Vue 生产环境模板","archived":false,"fork":false,"pushed_at":"2017-08-05T03:22:35.000Z","size":63,"stargazers_count":24,"open_issues_count":2,"forks_count":10,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-18T15:12:36.536Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doodlewind.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-11T08:50:53.000Z","updated_at":"2021-05-30T03:17:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"786109a9-7e93-4b20-ba9b-a9132f9251aa","html_url":"https://github.com/doodlewind/vue-springbud","commit_stats":{"total_commits":16,"total_committers":2,"mean_commits":8.0,"dds":0.25,"last_synced_commit":"1bdc43e2403cd9eba9b574e6b3ad9e2c80f39376"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fvue-springbud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fvue-springbud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fvue-springbud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doodlewind%2Fvue-springbud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doodlewind","download_url":"https://codeload.github.com/doodlewind/vue-springbud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245023039,"owners_count":20548649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T22:47:49.741Z","updated_at":"2025-03-22T21:32:19.746Z","avatar_url":"https://github.com/doodlewind.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-springbud\nVue 生产环境模板，默认支持特性包括：\n\n* 热重载\n* 公共依赖提取\n* 多入口 HTML 注入\n* 反向代理\n* 内联图片\n* Stylus 支持\n* CSS 提取\n\n\n## 运行\n安装依赖：\n\n``` text\nnpm install\n```\n\n运行开发模式，将监听文件变更并写入打包文件到磁盘：\n\n``` text\nnpm run dev-local\n```\n\n运行带 dev-server 的开发模式，默认启动本地于 `localhost:9000` 并监听文件变更。该模式下打包文件写入内存：\n\n``` text\nnpm run dev\n```\n\n\n运行生产模式，将压缩文件、分离 CSS 并添加 hash 值：\n\n``` text\nnpm run build\n```\n\n\n## 默认配置策略\n可修改 `build/config.js` 配置文件以定制相关参数。\n\n### 输入\n页面入口 JS 文件位于 `src` 路径下，相应 HTML 模板与其同名，位于 `src/templates` 路径下。`src` 目录结构如下：\n\n``` text\n├── index.js             # Webpack 入口 JS\n├── App.vue              # Vue 入口组件\n├── assets               # 图片 / 字体等静态资源\n│   └── logo.png\n├── components           # 页面 .vue 组件与各页面 JS\n│   └── Hello.vue\n├── styl                 # 公用样式\n│   ├── mixins.styl\n│   └── variables.styl\n└── templates            # 用于注入页面 JS 的 HTML 模板\n    └── index.html\n```\n\n### 输出\n模板默认将 JS 文件输出至 `dist` 路径下，生成的 HTML 文件输出至 `pages` 目录下。`run prod` 时，将提取 CSS 文件至 `dist/css` 路径下。小于 15K 的图片将内联至 JS，不需拼接雪碧图。\n\n默认输出 JS 包为 index / vendor / manifest 三个。其中 manifest 包用于存放对接 index 和 vendor 的 Webpack 相关模块加载代码，使得等业务模块变更时，只变动内容较小的 manifest 而无需更新第三方库 `vendor` 文件。\n\n\n## 自定义配置指南\n处理常见开发需求的配置方式如下：\n\n### 更改输出路径\n需对接不同后端框架时，可将输出的 JS 和 HTML 路径更改为后端框架的相应路径。若后端静态资源目录为 `resources`，HTML View 目录为 `applications/view`，线上路径为 `http://demo.com/foo/bar/resources/bundle.js`，相应配置可修改为：\n\n``` js\nvar bundlePath = path.join(process.cwd(), './resources')\nvar htmlPath = path.join(process.cwd(), './applications/view')\n// ...\noutput: {\n  publicPath: '/foo/bar/resources/'\n}\n```\n\n### 多入口文件\n目前已有 index 页面，需新建 foo 页面时，先修改配置文件的 `entry` 部分如下：\n\n``` js\nvar entry = {\n  index: './src/index.js',\n  foo: './src/foo.js',\n  vendor: ['vue']\n}\n```\n而后新建 `src/foo.js` 与 `src/templates/foo.html` 并重启 webpack 即可。\n\n### 合并多个公共依赖库\n默认将 Vue 作为唯一的第三方依赖打包至 `vendor.bundle.js`。若页面有多个第三方库，可在 `entry` 中指定需要抽取至 `vendor` 中合并的第三方库名：\n\n``` js\nvar entry = {\n  index: './src/index.js',\n  foo: './src/foo.js',\n  vendor: ['vue', 'chart.js', 'vue-router'] // ...\n}\n```\n\n### 导入 CSS\n模板已配置根路径为 `src` 与 `node_modules`，可通过绝对路径引入相应位置下的 CSS 文件：\n\n``` css\n/* 导入 src/styl/foo.css */\n@import '~styl/foo.css';\n\n/* 导入 npm install 的第三方 CSS 库 */\n@import '~normalize.css';\n```\n\n### 反向代理后端接口\n可通过 devServer 反向代理后端接口 API，从而无需在本地搭建后端环境或上传文件到测试环境。修改 `module.exports.devServer` 下的 `proxy` 参数即可：\n\n``` js\n{\n  // ...\n  proxy: {\n    '/api': { target: 'http://backend-address/' }\n  }\n}\n```\n\n### 原生 JS 项目\n若不需使用 Vue 时，可将本模板用于测试性开发原生 JS 项目。此时若更改 `templates/index.html` 入口模板后，需重启打包命令才会重新生成新的 `pages/index.html` 入口页。\n\n关于 Webpack 的更多常用配置，可参见 [Webpack Configuration](https://webpack.js.org/configuration/)\n\n\n## Changelog\n* `0.2.1`\n    * 配置文件升级 ES6\n    * 允许 dev server 由外部设备访问\n* `0.2.0`\n    * 添加原生 CSS 导入支持\n    * 优化默认 stylus 风格\n    * 移除 Yarn\n    * 优化默认打包命令\n    * 文档添加原生 JS 支持备注\n* `0.1.2` 修复 stylus 抽取 CSS 问题\n* `0.1.1` 修复 vue runtime 包问题\n* `0.1.0` 升级到 Webpack 2 并重写配置文件及目录结构\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoodlewind%2Fvue-springbud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoodlewind%2Fvue-springbud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoodlewind%2Fvue-springbud/lists"}