Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zhoou/vue-cli-multipage-bootstrap
vue-cli-multipage-bootstrap demo with vue2+vue-router+vuex+bootstrap+markdown for learning vue2.0
https://github.com/zhoou/vue-cli-multipage-bootstrap
bootstrap bootstrap3 highlightjs markdown vue vue-cli vue-router vue2 vuex webpack4
Last synced: 4 months ago
JSON representation
vue-cli-multipage-bootstrap demo with vue2+vue-router+vuex+bootstrap+markdown for learning vue2.0
- Host: GitHub
- URL: https://github.com/zhoou/vue-cli-multipage-bootstrap
- Owner: zhoou
- Created: 2016-11-11T10:16:21.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-06T13:26:17.000Z (over 6 years ago)
- Last Synced: 2024-09-28T15:43:01.023Z (4 months ago)
- Topics: bootstrap, bootstrap3, highlightjs, markdown, vue, vue-cli, vue-router, vue2, vuex, webpack4
- Language: Vue
- Homepage:
- Size: 3.9 MB
- Stars: 113
- Watchers: 12
- Forks: 29
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-cli-multipage-bootstrap - cli-multipage-bootstrap?style=social) - 将vue官方在线示例整合到组件中 (Demo示例)
- awesome-github-vue - vue-cli-multipage-bootstrap - 将vue官方在线示例整合到组件中 (Demo示例)
- awesome-github-vue - vue-cli-multipage-bootstrap - 将vue官方在线示例整合到组件中 (Demo示例)
- awesome - vue-cli-multipage-bootstrap - 将vue官方在线示例整合到组件中 (Demo示例)
README
# Vue Learn
> 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 .
## Components
* [Alert 组件](/src/components/Common/vAlert.vue)
* [Modal 组件](/src/components/Common/vModal.vue)
* [Table 组件](/src/components/Common/vTable.vue)
* [Carousel 组件](/src/components/Common/vCarousel.vue)
* [Loading 组件](/src/components/Common/vLoading.vue)
* [Login 组件](/src/components/Common/vLogin.vue)
* [Error 组件](/src/components/Common/vError.vue)
## Dev Environment
`npm install`
`npm run dev`
### The initial access path：
- OfficialDemo： http://localhost:9091/officialdemo.html
- TableDemo： http://localhost:9091/tabledemo.html
- PopupsDemo： http://localhost:9091/popupsdemo.html
- CarouselDemo： http://localhost:9091/carouseldemo.html
- FormLoginDemo： http://localhost:9091/formlogindemo.html
you can click the nav '案例：Examples' and choice 'TableHome' to jump to another project 'tablehome.html'.
## Prod Environment
`npm install`
`npm run build`
Please take the published content to the local server IIS or on another server you like ,
and then the initial access path ：(serverIP)/officialdemo.html
## Build Setup
``` bash
# 安装vue-cli
npm install -g vue-cli
# 使用vue-cli初始化项目
vue init webpack my-project
# 进入到目录
cd my-project
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
```
## 多页面配置
#### webpack.base.conf.js 配置：
var entries = getEntry('./src/module/*/*.js'); // 获得入口js文件
function getEntry(globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(1, 1).toString().toLowerCase(); // 正确输出js和html的路径
entries[pathname] = entry;
});
return entries;
}
其中入口entry修改成如下：
entry: Object.assign(entries,{
vendors : ['jquery', 'bootstrap']
})
#### webpack.dev.conf.js 配置：
function getEntry(globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(1, 1).toString().toLowerCase();
entries[pathname] = entry;
});
return entries;
}
var pages = getEntry('./src/module/**/*.html');
for (var pathname in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: pathname + '.html',
template: pages[pathname], // 模板路径
inject: true // js插入位置
};
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}
#### webpack.prod.conf.js 配置：
function getEntry(globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(1, 1).toString().toLowerCase();
entries[pathname] = entry;
});
return entries;
}
var pages = getEntry('./src/module/*/*.html');
for (var pathname in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: pathname + '.html',
template: pages[pathname], // 模板路径
inject: true, // js插入位置
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
};
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
## markdown配置
详见：build\webpack.markdown.js
主要使用的插件：[markdown-it](https://github.com/markdown-it/markdown-it)
Welcome guidance ！！