【ca88亚洲手机app】手把手教你vue,单页应用多页应用对比

vue-cli到多页应用

前言

【ca88亚洲手机app】手把手教你vue,单页应用多页应用对比。webx5
单页格局展开药情势:justep.shell.showpage();
多页情势张开药形式:window.loacation.href = require.tourl();

ca88亚洲手机app 1

前言:笔者有二个cli创制的vue项目,可是自个儿想做成多页应用,如何是好,废话非常少说,直接开撸~

从接触vue初始用的是vue-cli直接搭建单页应用,参考合作着vue-router开拓起来简爽直到吊炸天,可是出于体系进一步复杂了,单页用起来也可能有一些不可能,能或不可能弄成多页面吗,查了有关材质猎取的下结论是一心能够的,能多页面多入口,而且能够采纳组件,还引进jQuery,那简直精细入微了,那些demo是从笔者已经济体改造变成的品种中摘出来的,未来示范下怎么把遵照vue2的vue-cli单页模板退换成多页面,并且多入口的种类。

ca88亚洲手机app 2

约定:新增代码部分在//add和//end中间
删除(注释)代码部分在//del和//end中间,非常多事物都写在讲授里

技术栈

1006796-20161028103922875-886619453.png

第一步:cli一个vue项目

  1. vue: 2.0.1
  2. vue-resource:1.0.3
  3. vue-router:2.0.0
  4. webpack:1.13.2
  5. gulp:3.9.1
  6. ES6

ca88亚洲手机app 3

新建多少个vue项目 官方网址 vue init webpack demo

运行

cli暗中认可使用webpack的dev-server服务,那一个服务是做不了单页的,必要手动建三个私服叫什么你随意一般叫dev.server只怕dev.client

git clone https://github.com/dawnyu/vue-cli-multipage.git
npm install 
npm run build
npm run dev

其次步:加多三个章程管理出口入口文件(SPA暗中同意写死的)

改建后的目录

跻身刚刚创造vue项目 cd demo

ca88亚洲手机app 4

在目录上面找到build/utils.js文件

能够多目录生成靶子文件

修改部分:

集体的js和体裁Logo放到assets文件夹就可以

utils.js

修改点

'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

//add
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');  //功能:生成html文件及js文件并把js引入html
const pagePath = path.resolve(__dirname, '../src/views/'); //页面的路径,比如这里我用的views,那么后面私服加入的文件监控器就会从src下面的views下面开始监控文件
//end

exports.assetsPath = function (_path) {
 const assetsSubDirectory = process.env.NODE_ENV === 'production'
  ? config.build.assetsSubDirectory
  : config.dev.assetsSubDirectory

 return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
 options = options || {}

 const cssLoader = {
  loader: 'css-loader',
  options: {
   sourceMap: options.sourceMap
  }
 }

 const postcssLoader = {
  loader: 'postcss-loader',
  options: {
   sourceMap: options.sourceMap
  }
 }

 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

  if (loader) {
   loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
     sourceMap: options.sourceMap
    })
   })
  }

  // Extract CSS when that option is specified
  // (which is the case during production build)
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
 const output = []
 const loaders = exports.cssLoaders(options)

 for (const extension in loaders) {
  const loader = loaders[extension]
  output.push({
   test: new RegExp('\\.' + extension + '$'),
   use: loader
  })
 }

 return output
}

exports.createNotifierCallback = () => {
 const notifier = require('node-notifier')

 return (severity, errors) => {
  if (severity !== 'error') return

  const error = errors[0]
  const filename = error.file && error.file.split('!').pop()

  notifier.notify({
   title: packageConfig.name,
   message: severity + ': ' + error.name,
   subtitle: filename || '',
   icon: path.join(__dirname, 'logo.png')
  })
 }
}

//add 新增一个方法处理入口文件(单页应用的入口都是写死,到时候替换成这个方法)
exports.createEntry = () => {
 let files = glob.sync(pagePath + '/**/*.js');
 let entries = {};
 let basename;
 let foldername;

 files.forEach(entry => {
  // Filter the router.js
  basename = path.basename(entry, path.extname(entry), 'router.js');
  foldername = path.dirname(entry).split('/').splice(-1)[0];

  // If foldername not equal basename, doing nothing
  // The folder maybe contain more js files, but only the same name is main
  if (basename === foldername) {
   entries[basename] = [
    'webpack-hot-middleware/client?noInfo=true&reload=true&path=/__webpack_hmr&timeout=20000',
    entry];
  }
 });
 return entries;
};
//end

//add 新增出口文件
exports.createHtmlWebpackPlugin = () => {
 let files = glob.sync(pagePath + '/**/*.html', {matchBase: true});
 let entries = exports.createEntry();
 let plugins = [];
 let conf;
 let basename;
 let foldername;

 files.forEach(file => {
  basename = path.basename(file, path.extname(file));
  foldername = path.dirname(file).split('/').splice(-1).join('');

  if (basename === foldername) {
   conf = {
    template: file,
    filename: basename + '.html',
    inject: true,
    chunks: entries[basename] ? [basename] : []
   };
   if (process.env.NODE_ENV !== 'development') {
    conf.chunksSortMode = 'dependency';
    conf.minify = {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
    };
   }

   plugins.push(new HtmlWebpackPlugin(conf));
  }
 });
 return plugins;
};
//end

build/utils.js

其三步:创造私服(不选拔dev-server服务,自身建二个)

var path = require('path')
var config = require('../config')
var glob = require('glob')
 // 将样式提取到单独的css文件中,而不是打包到js文件或使用style标签插入在head标签中
var ExtractTextPlugin = require('extract-text-webpack-plugin')

exports.assetsPath = function(_path) {
 var assetsSubDirectory = process.env.NODE_ENV === 'production' ?
 config.build.assetsSubDirectory :
 config.dev.assetsSubDirectory
 return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function(options) {
 options = options || {}
 // generate loader string to be used with extract text plugin
 function generateLoaders(loaders) {
 var sourceLoader = loaders.map(function(loader) {
  var extraParamChar
  if (/\?/.test(loader)) {
  loader = loader.replace(/\?/, '-loader?')
  extraParamChar = '&'
  } else {
  loader = loader + '-loader'
  extraParamChar = '?'
  }
  return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
 }).join('!')

 if (options.extract) {
  return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
 } else {
  return ['vue-style-loader', sourceLoader].join('!')
 }
 }

 // http://vuejs.github.io/vue-loader/configurations/extract-css.html
 return {
 css: generateLoaders(['css']),
 postcss: generateLoaders(['css']),
 less: generateLoaders(['css', 'less']),
 sass: generateLoaders(['css', 'sass?indentedSyntax']),
 scss: generateLoaders(['css', 'sass']),
 stylus: generateLoaders(['css', 'stylus']),
 styl: generateLoaders(['css', 'stylus'])
 }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function(options) {
 var output = []
 var loaders = exports.cssLoaders(options)
 for (var extension in loaders) {
 var loader = loaders[extension]
 output.push({
  test: new RegExp('\\.' + extension + '$'),
  loader: loader
 })
 }
 return output
}
//增加获取多入口的方法 注意 这个参数是个数组
exports.getEntry = function(globPaths) {
 var entries = {},
 basename, tmp, pathname;
 for (globPath of globPaths) {
 glob.sync(globPath).forEach(function(entry) {
  basename = path.basename(entry, path.extname(entry));
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
 });
 }
 console.log(entries);
 return entries;
}

从express新建私服并配备(build文件夹下新建 笔者这边叫webpack.dev.client.js)

webpack.base.conf.js

webpack.dev.client.js

var path = require('path')
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../') ///——driname当前目录
var chunks = Object.keys(utils.getEntry(['./src/module/**/*.js', './src/m/**/*.js']));
// 将样式提取到单独的css文件中,而不是打包到js文件或使用style标签插入在head标签中
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
 entry: utils.getEntry(['./src/module/**/*.js', './src/m/**/*.js']),//传入需要打包的入口,我这里是pc端和手机端入口打到一个包里
 output: {
 path: config.build.assetsRoot,
 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, //根名称可配置
 filename: '[name].js'
 },
 resolve: {
 extensions: ['', '.js', '.vue'],
 fallback: [path.join(__dirname, '../node_modules')],
 alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components'),
  'jquery': 'jquery'
 }
 },
 resolveLoader: {
 fallback: [path.join(__dirname, '../node_modules')]
 },
 module: {
 loaders: [{
  test: /\.vue$/,
  loader: 'vue-loader'
  },
  {
  test: /\.js$/,
  loader: 'babel',
  include: projectRoot,
  exclude: /node_modules/
  },
  {
  test: /\.json$/,
  loader: 'json'
  },
  {
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url',
  query: {
   limit: 30000,
   name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
  },
  {
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url',
  query: {
   limit: 10000,
   name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
  }
 ]
 },
 eslint: {
 formatter: require('eslint-friendly-formatter')
 },
 vue: {
 loaders: utils.cssLoaders(),
 postcss: [
  require('autoprefixer')({
  browsers: ['last 2 versions']
  })
 ]
 },
 plugins: [
 // new webpack.optimize.CommonsChunkPlugin('static/build.js'),
 // 提取公共模块
 new webpack.optimize.CommonsChunkPlugin({
  name: 'vendors', // 公共模块的名称
  chunks: chunks, // chunks是需要提取的模块
  minChunks: chunks.length
 }),
 // 配置提取出的样式文件
 new ExtractTextPlugin('css/[name].css'),
 //引入jqury
 new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery"
 })
 ],
}
/**
 * created by qbyu2 on 2018-05-30
 * express 私服
 * */
'use strict';

const fs = require('fs');
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');  //文件监控(前面配置了从views下面监控)
const webpackHotMiddleware = require('webpack-hot-middleware');  //热加载
const config = require('../config');
const devWebpackConfig = require('./webpack.dev.conf');
const proxyMiddleware = require('http-proxy-middleware');  //跨域

const proxyTable = config.dev.proxyTable;

const PORT = config.dev.port;
const HOST = config.dev.host;
const assetsRoot = config.dev.assetsRoot;
const app = express();
const router = express.Router();
const compiler = webpack(devWebpackConfig);

let devMiddleware = webpackDevMiddleware(compiler, {
 publicPath: devWebpackConfig.output.publicPath,
 quiet: true,
 stats: {
  colors: true,
  chunks: false
 }
});

let hotMiddleware = webpackHotMiddleware(compiler, {
 path: '/__webpack_hmr',
 heartbeat: 2000
});

app.use(hotMiddleware);
app.use(devMiddleware);

Object.keys(proxyTable).forEach(function (context) {
 let options = proxyTable[context];
 if (typeof options === 'string') {
  options = {
   target: options
  };
 }
 app.use(proxyMiddleware(context, options));
});

//双路由  私服一层控制私服路由  vue的路由控制该页面下的路由
app.use(router)
app.use('/static', express.static(path.join(assetsRoot, 'static')));

let sendFile = (viewname, response, next) => {
 compiler.outputFileSystem.readFile(viewname, (err, result) => {
  if (err) {
   return (next(err));
  }
  response.set('content-type', 'text/html');
  response.send(result);
  response.end();
 });
};

//拼接方法
function pathJoin(patz) {
 return path.join(assetsRoot, patz);
}

/**
 * 定义路由(私服路由 非vue路由)
 * */

// favicon
router.get('/favicon.ico', (req, res, next) => {
 res.end();
});

// http://localhost:8080/
router.get('/', (req, res, next)=>{
 sendFile(pathJoin('index.html'), res, next);
});

// http://localhost:8080/home
router.get('/:home', (req, res, next) => {
 sendFile(pathJoin(req.params.home + '.html'), res, next);
});

// http://localhost:8080/index
router.get('/:index', (req, res, next) => {
 sendFile(pathJoin(req.params.index + '.html'), res, next);
});

module.exports = app.listen(PORT, err => {
 if (err){
  return
 }
 console.log(`Listening at http://${HOST}:${PORT}\n`);
})

webpack.dev.conf.js

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图