{"id":13536461,"url":"https://github.com/zhoou/vue-cli-multipage-bootstrap","last_synced_at":"2025-10-26T18:31:47.253Z","repository":{"id":215851423,"uuid":"73467662","full_name":"zhoou/vue-cli-multipage-bootstrap","owner":"zhoou","description":"vue-cli-multipage-bootstrap demo with vue2+vue-router+vuex+bootstrap+markdown  for learning vue2.0","archived":false,"fork":false,"pushed_at":"2018-06-06T13:26:17.000Z","size":4089,"stargazers_count":113,"open_issues_count":0,"forks_count":29,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-01-31T22:23:34.210Z","etag":null,"topics":["bootstrap","bootstrap3","highlightjs","markdown","vue","vue-cli","vue-router","vue2","vuex","webpack4"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/zhoou.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}},"created_at":"2016-11-11T10:16:21.000Z","updated_at":"2024-08-10T09:03:34.000Z","dependencies_parsed_at":"2024-01-18T06:12:47.179Z","dependency_job_id":null,"html_url":"https://github.com/zhoou/vue-cli-multipage-bootstrap","commit_stats":null,"previous_names":["zhoou/vue-cli-multipage-bootstrap"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoou%2Fvue-cli-multipage-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoou%2Fvue-cli-multipage-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoou%2Fvue-cli-multipage-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoou%2Fvue-cli-multipage-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhoou","download_url":"https://codeload.github.com/zhoou/vue-cli-multipage-bootstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238386130,"owners_count":19463305,"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":["bootstrap","bootstrap3","highlightjs","markdown","vue","vue-cli","vue-router","vue2","vuex","webpack4"],"created_at":"2024-08-01T09:00:39.838Z","updated_at":"2025-10-26T18:31:46.746Z","avatar_url":"https://github.com/zhoou.png","language":"Vue","funding_links":[],"categories":["Demo示例"],"sub_categories":[],"readme":"# Vue Learn\n\n\u003e A Vue.js2.0 project with Bootstrap which integrated the vue official online examples to components and some components build by myself to anyone who interested in .\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/zhoou/DataSource/blob/master/images/newvue2.png\" alt=\"vue-cli-multipage-bootstrap-new\"\u003e\n  \u003cimg src=\"https://github.com/zhoou/DataSource/blob/master/images/vue-cli-multipage-bootstrap.gif?raw=true\" alt=\"vue-cli-multipage-bootstrap\"/\u003e\n\u003c/div\u003e\n\n## Components\n* [Alert 组件](/src/components/Common/vAlert.vue)\n* [Modal 组件](/src/components/Common/vModal.vue)\n* [Table 组件](/src/components/Common/vTable.vue)\n* [Carousel 组件](/src/components/Common/vCarousel.vue)\n* [Loading 组件](/src/components/Common/vLoading.vue)\n* [Login 组件](/src/components/Common/vLogin.vue)\n* [Error 组件](/src/components/Common/vError.vue)\n\n## Dev Environment\n\n`npm install`\n\n`npm run dev`\n\n### The initial access path：\n\u003cul\u003e\n\u003cli\u003eOfficialDemo： http://localhost:9091/officialdemo.html\u003c/li\u003e\n\u003cli\u003eTableDemo： http://localhost:9091/tabledemo.html\u003c/li\u003e\n\u003cli\u003ePopupsDemo： http://localhost:9091/popupsdemo.html\u003c/li\u003e\n\u003cli\u003eCarouselDemo： http://localhost:9091/carouseldemo.html\u003c/li\u003e\n\u003cli\u003eFormLoginDemo： http://localhost:9091/formlogindemo.html\u003c/li\u003e\n\u003c/ul\u003e\n\nyou can click the nav '案例：Examples' and choice 'TableHome' to jump to another project 'tablehome.html'.\n\n## Prod Environment\n\n`npm install`\n\n`npm run build`\n\nPlease take the published content to the local server IIS or on another server you like ,\n\nand then the initial access path ：(serverIP)/officialdemo.html\n\n## Build Setup\n\n``` bash\n# 安装vue-cli\nnpm install -g vue-cli\n\n# 使用vue-cli初始化项目\nvue init webpack my-project\n\n# 进入到目录\ncd my-project\n\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# run unit tests\nnpm run unit\n\n# run e2e tests\nnpm run e2e\n\n# run all tests\nnpm test\n```\n## 多页面配置\n\n#### webpack.base.conf.js 配置：\n\u003cpre\u003e\u003ccode\u003e\nvar entries = getEntry('./src/module/*/*.js'); // 获得入口js文件\n\nfunction getEntry(globPath) {\n  var entries = {},\n    basename, tmp, pathname;\n\n  glob.sync(globPath).forEach(function (entry) {\n    basename = path.basename(entry, path.extname(entry));\n    tmp = entry.split('/').splice(-3);\n    pathname = tmp.splice(1, 1).toString().toLowerCase(); // 正确输出js和html的路径\n    entries[pathname] = entry;\n  });\n  return entries;\n}\n\u003c/code\u003e\u003c/pre\u003e\n其中入口entry修改成如下：\n\u003cpre\u003e\u003ccode\u003e\nentry: Object.assign(entries,{\n    vendors : ['jquery', 'bootstrap']\n  })\n \u003c/code\u003e\u003c/pre\u003e\n\n#### webpack.dev.conf.js 配置：\n\u003cpre\u003e\u003ccode\u003e\nfunction getEntry(globPath) {\n  var entries = {},\n    basename, tmp, pathname;\n\n  glob.sync(globPath).forEach(function (entry) {\n    basename = path.basename(entry, path.extname(entry));\n    tmp = entry.split('/').splice(-3);\n    pathname = tmp.splice(1, 1).toString().toLowerCase();\n    entries[pathname] = entry;\n  });\n\n  return entries;\n}\n\nvar pages = getEntry('./src/module/**/*.html');\n\nfor (var pathname in pages) {\n  // 配置生成的html文件，定义路径等\n  var conf = {\n    filename: pathname + '.html',\n    template: pages[pathname], // 模板路径\n    inject: true              // js插入位置\n  };\n  // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象\n  module.exports.plugins.push(new HtmlWebpackPlugin(conf));\n}\n\u003c/code\u003e\u003c/pre\u003e\n \n#### webpack.prod.conf.js 配置：\n \u003cpre\u003e\u003ccode\u003e\n function getEntry(globPath) {\n  var entries = {},\n    basename, tmp, pathname;\n\n  glob.sync(globPath).forEach(function (entry) {\n    basename = path.basename(entry, path.extname(entry));\n    tmp = entry.split('/').splice(-3);\n    pathname = tmp.splice(1, 1).toString().toLowerCase();\n    entries[pathname] = entry;\n  });\n  return entries;\n}\nvar pages = getEntry('./src/module/*/*.html');\nfor (var pathname in pages) {\n  // 配置生成的html文件，定义路径等\n  var conf = {\n    filename: pathname + '.html',\n    template: pages[pathname], // 模板路径\n    inject: true,              // js插入位置\n    minify: {\n      removeComments: true,\n      collapseWhitespace: true,\n      removeAttributeQuotes: true\n      // more options:\n      // https://github.com/kangax/html-minifier#options-quick-reference\n    },\n    // necessary to consistently work with multiple chunks via CommonsChunkPlugin\n    chunksSortMode: 'dependency'\n  };\n  // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象\n  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));\n}\n\u003c/code\u003e\u003c/pre\u003e\n\n## markdown配置\n\n详见：build\\webpack.markdown.js\n主要使用的插件：[markdown-it](https://github.com/markdown-it/markdown-it)\n\n\nWelcome guidance ！！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhoou%2Fvue-cli-multipage-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhoou%2Fvue-cli-multipage-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhoou%2Fvue-cli-multipage-bootstrap/lists"}