将vue官方在线示例整合到组件中 - vue-cli-multipage-bootstrap

2016-11-11      23      Vue
项目简介 前往项目首页

Vue Learn

一个带有Bootstrap的VueJS2.0项目,将vue官方在线示例整合到组件中。

组件

开发环境

npm install

npm run dev

初始访问路径:

  • OfficialDemo: http://localhost:9091/officialdemo.html
  • TableHome: http://localhost:9091/tablehome.html
  • PopupsHome: http://localhost:9091/popupshome.html
  • CarouselHome: http://localhost:9091/carouselhome.html
  • FormLogin: http://localhost:9091/formlogin.html

你可以点击导航 '案例:Examples' 并选择 'TableHome' 跳转到另一个项目 'tablehome.html'。

Build Setup

# 安装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/<em>/</em>.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: // <a href="https://github.com/kangax/html-minifier#options-quick-reference">https://github.com/kangax/html-minifier#options-quick-reference</a> }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }; // 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象 webpackConfig.plugins.push(new HtmlWebpackPlugin(conf)); }

Welcome guidance !!