转盘抽奖小程序_使用vue构建多页面应用的示例

使用vue构建多页面应用的示例       这篇文章主要介绍了使用vue构建多页面应用的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
页面之间的跳转是从一个页面跳转到另一个页面 页面片段之间的跳转是把一个页面片段删除或隐藏,加载另一个页面片段并显示出来。这是片段之间的模拟跳转,并没有开壳页面
页面间切换加载慢,不流畅,用户体验差,特别是在移动设备上 页面片段间的切换快,用户体验好,包括在移动设备上

为什么用Vue写多页面

vue只是一个工具,把他当做一个操作dom的工具来用写多页面,有单页面的优势同时是多页面的表现形式(具体要看需求)

构建多页面应用

准备工作

新建一个项目,项目需要一个"glob":"^7.0.3"的依赖

修改webpack的配置

我们需要更改的文件

utils.js webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js

// glob是webpack安装时依赖的一个第三方模块,还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件 var glob = require('glob') // 页面模板 var HtmlWebpackPlugin = require('html-webpack-plugin') // 取得相应的页面路径,因为之前的配置,所以是src文件夹下的pages文件夹 var PAGE_PATH = path.resolve(__dirname, '../src/pages') // 用于做相应的merge处理 var merge = require('webpack-merge') //多入口配置 // 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件,如果该文件存在 // 那么就作为入口处理 exports.entries = function () { var entryFiles = glob.sync(PAGE_PATH + '/*/*.js') var map = {} entryFiles.forEach((filePath) = { var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) map[filename] = filePath return map //多页面输出配置 // 与上面的多页面入口配置相同,读取pages文件夹下的对应的html后缀文件,然后放入数组中 Plugin = function () { ') let arr = [] entryHtml.forEach((filePath) = { let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) let conf = { // 模板来源 template: filePath, // 文件名称 ', // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本 chunks: ['manifest', 'vendor', filename], inject: true if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, colla凡科抠图eWhitespace: true, removeAttributeQuotes: true chunksSortMode: 'dependency' arr.push(new HtmlWebpackPlugin(conf)) return arr /* 这里是添加的部分 ---------------------------- 结束 */

webpack.base.conf.js 文件

module.exports = {
 /* 修改部分 ---------------- 开始 */
 entry: utils.entries(),
 /* 修改部分 ---------------- 结束 */
 output: {
 path: config.build.assetsRoot,

webpack.dev.conf.js 文件

 // glenjamin/webpack-hot-middleware#installation--usage
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoEmitOnErrorsPlugin(),
 // ampedandwired/html-webpack-plugin
 /* 注释这个区域的文件 ------------- 开始 */
 // new HtmlWebpackPlugin({
 // ',
 // ',
 // inject: true
 // }),
 /* 注释这个区域的文件 ------------- 结束 */
 new FriendlyErrorsPlugin()
 /* Plugin()) ------------------ */
 ].Plugin())
})

webpack.prod.conf.js 文件

 new OptimizeCSSPlugin({
 cssProcessorOptions: {
 safe: true
 //  with correct asset hash for caching.
 // 
 // see ampedandwired/html-webpack-plugin
 /* 注释这个区域的内容 ---------------------- 开始 */
 // new HtmlWebpackPlugin({
 // filename: config.build.index,
 // ',
 // inject: true,
 // minify: {
 // removeComments: true,
 // colla凡科抠图eWhitespace: true,
 // removeAttributeQuotes: true
 // // more options:
 // // kangax/html-minifier#options-quick-reference
 // },
 // // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 // chunksSortMode: 'dependency'
 // }),
 /* 注释这个区域的内容 ---------------------- 结束 */
 // split vendor js into its own file
 new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 minChunks: function (module, count) {
 // any required modules inside node_modules are extracted to vendor
 return (
 module.resource 
 /\.js$/.test(module.resource) 
 module.resource.indexOf(
 path.join(__dirname, '../node_modules')
 ) === 0
 // extract webpack runtime and module manifest to its own file in order to
 // prevent vendor hash from being updated whenever app bundle is updated
 new webpack.optimize.CommonsChunkPlugin({
 name: 'manifest',
 chunks: ['vendor']
 // copy custom static assets
 new CopyWebpackPlugin([{
 from: path.resolve(__dirname, '../static'),
 to: config.build.assetsSubDirectory,
 ignore: ['.*']
 /* Plugin()) ------------------- */
 ].Plugin())
if (config.build.productionGzip) {
 var CompressionWebpackPlugin = require('compression-webpack-plugin')
 webpackConfig.plugins.push(
 new CompressionWebpackPlugin({
 asset: '[path].gz[query]',
 algorithm: 'gzip',
 test: new RegExp(
 '\\.(' +
 config.build.productionGzipExtensions.join('|') +
 ')$'
 threshold: 10240,
 minRatio: 0.8
if (config.build.bundleAnalyzerReport) {
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 webpackConfig.plugins.push(new BundleAnalyzerPlugin())
module.exports = webpackConfig

ponents,pages分别是静态资源文件,组件文件,页面文件

<页面模板,src文件下的main.js和app.vue的功能。

参考:

以上就是使用vue构建多页面应用的示例的详细内容,更多关于vue构建多页面应用的资料请关注凡科其它

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://zzjzptp.cn/jingyan/3202.html