当前位置:澳门新萄京网址 > 澳门新萄京网址 > page应用实战总结和踩坑

page应用实战总结和踩坑

文章作者:澳门新萄京网址 上传时间:2019-11-25

正文版权归天涯论坛和小编李军本人合作享有 转发和爬虫请表明原来的文章地址 www.cnblogs.com/tdws

意气风发.写在前方

类别上线有生机勃勃段时间了,叁个依据webpack+vue+ES6的手提式有线电话机端多页面使用。其实说是多页面使用,实际上在webpack中归于多个app,  倘诺真是做纯单页面,那应该有二贰贰拾叁个页面吗。所以本人这里的多页面使用,是分为三个SPA。举个例子Wechat最上面,有多个导航,Wechat,通信录,发现,笔者。 那么那多少个导航,正是自己的多少个SPA,配置多少个输入就可以。

在那间就蒙蔽太多代码了,项目组织将会停放github上,地址在末端给出,以供参照他事他说加以考察,上传的大概只是二个索引加上配置情形,其实关键点也就在webpack.config.js了,这里最首要安顿了entry,loader,plugins,output目录啥的。

在此边先附上package.json和webpack.config.js吧:

 

澳门新萄京网址 1澳门新萄京网址 2

 1 {
 2   "name": "my-web",
 3   "version": "1.0.0",
 4   "description": "desc",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo "Error: no test specified" && exit 1",
 8     "start": "webpack-dev-server --inline --hot",
 9     "dev1": "webpack-dev-server --open",
10     "dev": "webpack-dev-server --inline --hot",
11     "build": "set NODE_ENV=production&&webpack"
12   },
13   "author": "ws",
14   "license": "ISC",
15   "devDependencies": {
16     "babel-core": "^6.24.1",
17     "babel-loader": "^7.0.0",
18     "babel-plugin-transform-runtime": "^6.23.0",
19     "babel-preset-es2015": "^6.24.1",
20     "babel-runtime": "^6.23.0",
21     "css-loader": "^0.28.4",
22     "extract-text-webpack-plugin": "^2.1.0",
23     "glob": "^7.1.2",
24     "html-webpack-plugin": "^2.28.0",
25     "jquery": "^3.2.1",
26     "node-sass": "^4.5.3",
27     "sass-loader": "^6.0.5",
28     "slideout": "^1.0.1",
29     "style-loader": "^0.18.2",
30     "url-loader": "^0.5.8",
31     "vue": "^2.3.3",
32     "vue-croppa": "^0.1.0",
33     "vue-hot-reload-api": "^2.1.0",
34     "vue-html-loader": "^1.2.4",
35     "vue-ios-alertview": "^1.1.1",
36     "vue-loader": "^12.2.1",
37     "vue-resource": "^1.3.3",
38     "vue-router": "^2.7.0",
39     "vue-style-loader": "^3.0.1",
40     "vue-template-compiler": "^2.3.3",
41     "vue-touch": "^2.0.0-beta.4",
42     "webpack": "^2.6.1",
43     "webpack-dev-server": "^2.4.5"
44   }
45 }

View Code

 

澳门新萄京网址 3澳门新萄京网址 4

  1 var path = require('path');
  2 var webpack = require('webpack');
  3 // 将样式提取到单独的 css 文件中,而不是打包到 js 文件或使用 style 标签插入在 head 标签中
  4 var ExtractTextPlugin = require('extract-text-webpack-plugin');
  5 // 生成自动引用 js 文件的HTML
  6 var HtmlWebpackPlugin = require('html-webpack-plugin');
  7 var glob = require('glob');
  8 
  9 var entries = getEntry('./source/**/*.js'); // 获得入口 js 文件
 10 var chunks = Object.keys(entries);
 11 console.log('输出chunks', chunks);
 12 module.exports = {
 13     entry: entries,
 14     output: {
 15         path: path.resolve(__dirname, 'public'), // html, css, js 图片等资源文件的输出路径,将所有资源文件放在 Public 目录
 16         publicPath: '/public/',                  // html, css, js 图片等资源文件的 server 上的路径
 17         filename: 'js/[name].js',         // 每个入口 js 文件的生成配置
 18         chunkFilename: 'js/[id].[hash].js'
 19     },
 20     externals: {
 21         jquery: "$",
 22         EXIF: "EXIF",
 23         wx: "wx"
 24     },
 25     resolve: {
 26         extensions: ['.js', '.vue'],
 27         alias: {
 28             'vue': __dirname + '/lib/vue/vue.js',
 29             //'vue-alert': __dirname + '/lib/vue-alert/vue-alert.js'
 30         },
 31     },
 32 
 33     module: {
 34         loaders: [
 35             {
 36                 test: /.css$/,
 37                 // 使用提取 css 文件的插件,能帮我们提取 webpack 中引用的和 vue 组件中使用的样式
 38                 //loader: "style-loader!css-loader",
 39                 loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
 40             },
 41             {
 42                 // vue-loader,加载 vue 组件
 43                 test: /.vue$/,
 44                 loader: 'vue-loader',
 45                 options: {
 46                     //解析.vue文件中样式表
 47                     loaders: {
 48                         // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
 49                         // the "scss" and "sass" values for the lang attribute to the right configs here.
 50                         // other preprocessors should work out of the box, no loader config like this necessary.
 51                         //'scss': 'vue-style-loader!css-loader!sass-loader',
 52                         //'css': 'vue-style-loader!css-loader!sass-loader',
 53                         //'js': 'babel-loader',
 54                         //'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
 55                         css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' }),
 56                         //exclude: [
 57                         //    path.resolve(__dirname, ""),
 58                         //    //path.resolve(__dirname, "app/test")
 59                         //]
 60                         //exclude:'/source/course/course-detail/course-detail.css'
 61                     }
 62                     // other vue-loader options go here
 63                 }
 64             },
 65             {
 66                 test: /.js$/,
 67                 // 使用 es6 开发,这个加载器帮我们处理
 68                 loader: 'babel-loader',
 69                 exclude: /node_modules/
 70             },
 71             {
 72                 test: /.(png|jpg|gif|svg)$/,
 73                 // 图片加载器,较小的图片转成 base64
 74                 loader: 'url-loader',
 75                 query: {
 76                     limit: 10000,
 77                     name: './imgs/[name].[ext]?[hash:7]'
 78                 }
 79             }
 80         ]
 81     },
 82     plugins: [
 83         // 提取公共模块
 84         new webpack.optimize.CommonsChunkPlugin({
 85             name: 'vendors', // 公共模块的名称
 86             chunks: chunks,  // chunks 是需要提取的模块
 87             minChunks: chunks.length
 88         }),
 89         // 配置提取出的样式文件
 90         new ExtractTextPlugin('css/[name].css')
 91     ]
 92 };
 93 
 94 var prod = process.env.NODE_ENV === 'production';
 95 module.exports.plugins = (module.exports.plugins || []);
 96 if (prod) {
 97     module.exports.devtool = 'source-map';
 98     module.exports.plugins = module.exports.plugins.concat([
 99         // 借鉴 vue 官方的生成环境配置
100         new webpack.DefinePlugin({
101             'process.env': {
102                 NODE_ENV: '"production"'
103             }
104         }),
105          new webpack.optimize.UglifyJsPlugin({
106              compress: {
107                  warnings: false
108              }
109          })
110     ]);
111 } else {
112     module.exports.devtool = 'eval-source-map';
113     module.exports.output.publicPath = '/view/';
114 }
115 
116 var pages = getEntry('./source/**/*.html');
117 for (var pathname in pages) {
118     // 配置生成的 html 文件,定义路径等
119     var conf = {
120         filename: prod ? '../views/' + pathname + '.html' : pathname + '.html', // html 文件输出路径
121         template: pages[pathname], // 模板路径
122         inject: true,              // js 插入位置
123         minify: {
124             removeComments: true,
125             collapseWhitespace: false
126         },
127         hash:true
128     };
129     if (pathname in module.exports.entry) {
130         conf.chunks = ['vendors', pathname];
131         //conf.hash = false;
132     }
133     // 需要生成几个 html 文件,就配置几个 HtmlWebpackPlugin 对象
134     module.exports.plugins.push(new HtmlWebpackPlugin(conf));
135 }
136 
137 // 根据项目具体需求,输出正确的 js 和 html 路径
138 function getEntry(globPath) {
139     var entries = {},
140         basename, tmp, pathname;
141 
142     glob.sync(globPath).forEach(function (entry) {
143         basename = path.basename(entry, path.extname(entry));
144         tmp = entry.split('/').splice(-3);
145         pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出 js 和 html 的路径
146         entries[pathname] = entry;
147     });
148     console.log(entries);
149     return entries;
150 }

View Code

 

开垦工具使用的VS2017,本来使用WS,然则用习于旧贯VS的自作者恐怕受不了,终究17如故太强盛了嘛。既然是vue项目,那数据需要确定便是vue-res, 路由就是vue-loader,编写翻译es6贵裔都以babel。 下边是项目结构预览:

澳门新萄京网址 5澳门新萄京网址 6澳门新萄京网址 7他俩分别是图表财富,援引库能源,公布打包后的js和css,src源码和包裹后的html

二.几点主要的获得

1.组件化开辟爽啊, 调用者只须求关切输入和输出,代码明朗,轻易保障

2.vue-res promise异步风格太雅观,太喜欢了。可是有坑,ios8.x,使用基本浏览器运营js, 不扶助promise语法,所以必要在入口中,import多少个npm下载的node module:

 npm i whatwg-fetch core-js es6-promise --save-dev

 澳门新萄京网址 8

3.记念以前做叁个有线电话端项目,完全未有自动化,各种页面间跳转慢的后生可畏比,一点也不流畅,项目组织不轻易管理,重复代码极度多。

 近百个页面js版本得不到调控,管理js,css征引困难。Wechat静态财富缓存如此严重,没有版本调节,每种页面js版本的改动要人命。

4.消除缓安抚题,应禁绝html缓存,由于使用extract-text-webpack-plugin,能够确定保障你html入口中独有轻松的几行代码,等着自动化帮您引进所需js,所以固然禁绝html缓存,也不会影响响应速度,毕竟大家的html文件      也就1-2k左右.html禁绝缓存的原由是谨防,js更新后,js hash版本已转移,但浏览器缓存的html中,依旧是伸手旧版本js文件,那样一来js版本调控变得未有意义。

  1. js调用手提式有线电话机拍片, 调用安卓手提式有线电话机拍照不易于啊,所以生龙活虎旦只想在Wechat上利用网页的话,建议选拔Wechatjs SDK。

6. 苹果手提式有线电话机和个别安卓手提式有线电电话机,使用原生input调用录制后,图片到页面中会现身旋转难题,所以在Wechat上 使用js sdk, 在其他浏览器上,就用EXIF.js  手动将其旋转90度 只怕180度实行改过。

7.推荐意气风发款mobile用的不错的弹窗组件 vue-ios-alert.  ios风格的弹窗。地址以致github:    http://isay.me/vue-ios-alertview/example/![](https://images2017.cnblogs.com/blog/686162/201709/686162-20170904231146210-1849602734.png)

 

8.手提式有线电话机上的 日期 时分秒选拔器,推荐一个有坑的货  https://github.com/k186  有坑哦,使用的话,请看closed的第叁个issue。此外日期选择照旧相比推荐原生。加上时分秒的话原生的恐怕就不好用。澳门新萄京网址 9

9.页面touch切换tag 使用的一个vue-tab  github找豆蔻年华找,ios8不协助flex-shrink,要使用-webkit-flex-shrink。

  1. 上拉加载更加的多用的vue-loadmore,侧方滑动菜单 使用了jquery的slideout

11. 举例路由相当多的话,建议路由独立分叁个js配置,并且一定要按需加载,不然打包文件太大。若是是客户点击率相当高的路由,可以直接require进去。

12.局地js库,就不要通过require了,直接在html引进进来算了,终归这个库基本不会转移,也没要求决定版本

13.前端AOP,  vue-res的拦截器点个赞,笔者得以在拦截器中,为小编每叁个须求都增加authentication header等音信,像用jq的时候,我只可以手动把ajax包装后生可畏层

14.像稍稍数据的加载,文字方面,最棒预先给出加载中这种唤醒,不可能给空白。列表的加载 要多着想加载中,加载成功和暂无数据的管理。见过超多app和网页都以步入到列表页,首先叁个暂时未有数据的背景图给出去         了,结果稍等一下,数据又加载出来了....

澳门新萄京网址,15.固然曾经组件化了,但自己还提议有三个种种页面公用供给require的js,作者日常都叫application.js  在此 能够放一些您的常量,枚举,公共措施,helpers,utils,ajax 等配置,并且在那地能够import footer header vue-res vue-alert 等局地各种组件也许页面都急需的话的零件

16.热轮换是必需的,比原先用gulp livereload方便

17.手提式有线电话机端页面调节和测验,推荐vConsole(去github找卡塔尔。 示例:澳门新萄京网址 10澳门新萄京网址 11

18.因此babel编写翻译es5的都没难题.。  小编有个独立的小功效,没用es6,间接谷歌(Google卡塔 尔(英语:State of Qatar)调节和测量检验开拓,结果到了ios9.x上  不帮助也不报错,今后防止踩进去吧。下边是代码:

澳门新萄京网址 12

19. IOS上测算时间 供给new Date('2017/09/09')的格式,  而无法选取横杠的格式

三.局地瑕疵

 1.脑子抽风啊,分为八个SPA, 整套项目下来,认为依然应当作三个SPA。究竟SPA之间切换,一个SPA切换成另八个SPA 依旧加载东西太多,远远不够通畅。固然Wechat浏览器缓存“严重”

2.门类组织划分还是缺乏合理,但以为也还可以应付用。

3.组件化未有发挥到十二万分,本人vue组件间通讯没办好,md找子组件,笔者以致还应该有通过遍历的法门。

4.有些组件用的jquery的,搭配的不是很通畅,诱致个别操作强行使用dom操作。

5.自己有四个景况,开垦,测量试验,demo, 线上。 每回公布到四个碰到 都急需改了安顿后,重新打包,相当的惨恻啊,关于那一点有怎么样好的艺术吗? 

四.写在终极

 那些类型产物将世袭支付,不过下生龙活虎阶段还恐怕有个体系,作者将使用二个SPA完结,关于vue有怎么样好的种种mobile组件,希望dalao不吝推荐。

 

 

如果,您感到读书那篇博客让你有个别收获,不要紧点击一下右下加【推荐】按钮。
生龙活虎经,您希望更便于地意识自家的新博客,无妨点击下方栗褐【关怀】的。
因为,笔者的共享热情也离不开您的必然支持。

谢谢您的翻阅,笔者将不断输出分享,我是蜗牛, 保持学习,谨记谦善。不端不装,风趣有梦。

本文由澳门新萄京网址发布于澳门新萄京网址,转载请注明出处:page应用实战总结和踩坑

关键词: