菜单

Vue+Webpack开发可复用的单页面富应用学科(组件篇)

2019年3月21日 - 金沙前端

挑战二:路由去中央化

依照大家所说的前提,中心化的路由维护起来很坑爹(即便做一八个页面 DEMO
的就没须求出来现眼了)。MV*
框架结构即是存在那样个坑爹的标题,须求证明中央化 route(angular 和 react
等都亟待先注明页面路由组织),针对不相同的路由加载哪些组件模块。一旦页面多起来,甚至一旦有人偷懒直接在有个别路由写了有些业务耦合的逻辑,这一个route 的可维护性就变得多少倒霉了。而且用户访问的率先个页面,都亟需加载
route,尽管其余路由的代码跟当前页面非亲非故。

咱俩再回过头来思考静态页面简单的加载格局。大家要是把 nginx 搭起来,把
html 页面放在对应的静态能源目录下,运转 nginx 服务后,在浏览器地址栏输入
127.0.0.1:8888/index.html
就足以访问到这一个页面。再复杂一点,咱们把目录整成下边包车型客车样式:

/post/201509151800.html /post/201509151905.html /post/201509152001.html
/category/js_base_knowledge.html /category/css_junior_use.html
/category/life_is_beautiful.html

1
2
3
4
5
6
/post/201509151800.html
/post/201509151905.html
/post/201509152001.html
/category/js_base_knowledge.html
/category/css_junior_use.html
/category/life_is_beautiful.html

那种目录结构很熟吧,对 SEO
很团结吧,当然这是后话了,跟我们今日说的不是二回事。那种目录结果,不用大家去给
Web Server 定义一堆路由规则,页面存在即重临,不然再次来到404,完全不供给多余的宣示逻辑。

基于那种目录结构,大家能够抽象成那规范:

/{page_type}/{page_name}.html

1
/{page_type}/{page_name}.html

实际上还足以更简便:

/p/{name}.html

1
/p/{name}.html

从组件化的角度出发,还足以那样子:

/p/{name}/name.js /p/{name}/name.tpl /p/{name}/name.css

1
2
3
/p/{name}/name.js
/p/{name}/name.tpl
/p/{name}/name.css

故此,根据大家简化后的逻辑,我们只供给3个 page.js
那样3个路由加载器,根据大家约定的能源目录结构去加载相应的页面,大家就不供给去干注解路由并且中央化路由那种蠢事了。具体来看代码。咱也无意去分析了,里面有注释。

此地来回顾讲一下src文件

前端路由,即由前端来爱护三个路由规则。完结有三种,一种是采用url的hash,就是常说的锚点(#),JS通过hashChange事件来监听url的改观,IE7及以下需求用轮询;另一种正是HTML5的History格局,它使url看起来像普通网站那样,以”/”分割,没有#澳门金沙国际 ,,但页面并没有跳转,可是使用这种情势供给服务端支持,服务端在接到到全体的央浼后,都指向同叁个html文件,不然会现出404。所以,SPA唯有2个html,整个网站有着的剧情都在那三个html里,通过js来处理。

本文版权归天涯论坛和小编杨刚自己共同持有 转发和爬虫请证明最初的作品地址
www.cnblogs.com/tdws

挑衅三:领域数据大旨化

对此单向数据流循环和多少双向绑定什么人优何人劣是恒久也探究没结果的标题,要看是哪些业务场景什么事情逻辑,假使这么些前提没统一好说吗都以一成不变。当然,那些挑战的前提是非后台的单页面应用,后台的前端根本就不必要考虑前端内部存款和储蓄器缓存多少的拍卖,间接跟接口数据库交互就行了。明显了那一个前提,大家跟着斟酌哪些叫世界数据大旨化。

前面议论到三种多少绑定的法门,不过假设频仍跟接口交互:

  • 内部存款和储蓄器数据销毁了,重新请求数据耗费时间浪费流量
  • 假设多个接口字段部分区别只是使用境况一样
  • 三个页面一直有一些的数额一致,然而先来后到导致一些计数字段不均等
  • 三个页面的数量一致,在那之中一些数据爆发用户操作行为造成数据发生转移

由此,我们必要在工作视图逻辑层和数量接口层中间扩大三个store(领域模型),而以此 store 需求有二个集合的 内部存款和储蓄器缓存 cache,那几个cache 就是中央化的数码缓存。那那个 store 毕竟是用来弄啥勒?

澳门金沙国际 1

Store 具有多形态,每一种 store
好比某一类物品的贮存(领域,换个词简单精晓),如蔬果店 fruit-store,
服装店
clothes-store,蔬菜水果店能够放苹果香蕉黑木耳,衣裳店能够放西服平底裤人字拖。要是品种过于繁多,大家能够把蔬菜水果店精细化运维变成香蕉专卖店,苹果专卖店(!==
appstore),甚至是木耳专卖店…( _
_)ノ|,蔬菜水果连串分化,可是也都以称重按斤卖嘛。

var bannerStore = new fruitStore();

var appleStore = new fruitStore();

有了那一个囤积之后,我们能够放心的把数量丢给视图逻辑层大胆去用。想修改数据?直接让
store 去改就行了,其余页面包车型地铁 DOM
文本内容也得修改吧?那是别的页面包车型客车事体逻辑做的事,大家把事件抛出去就好了,他们处不处理那是她们的事,咱别瞎操心(业务隔开)。

那么 store 具体弄啥勒?

澳门金沙国际 2

  • 三1一个赞地方可点赞或然撤回,八个页面包车型地铁赞数供给共同,按钮点赞与裁撤的意况也要联合。
  • 条目是或不是已收藏,裁撤收藏后 Page B 须求删除数据,Page A+C
    须要联合状态,假诺在 Page C 又有窖藏操作,Page B
    需要相应增减数据,Page A 状态必要共同。
  • 发评论,Page C 要求立异评论列表和评论数,Page A+B
    须求更新评论数。假若 Page B 没有被加载过,那时候 Page B
    获得的数目应该是流行的,要求共同给 A+C 页面对应的数额开始展览翻新。

据此,store
干的活正是数据状态读写和一起,借使把多少状态的操作放到各类页面本人去处理,页面一旦多了照旧复杂起来,就会发出各样页面数据和气象可能不平等,页面从前双向引用(业务耦合严重)。store
还有另1个作用正是数据的输入输出格式化,不难举个栗子:澳门金沙国际 3

  • 其余接口 API 重临的数据,都急需经过 input format
    进行统一格式化,然后再写入
    cache,因为读取的数目已依据大家约定的行业内部开始展览的处理,所以大家运用的时候也不要求理会接口是回到怎么样的数据类型。
  • 一些零部件供给的数目字段格式大概两样,就算把多少处理放在模板举办拍卖,会招致模板不可能越发从简通用(业务耦合),所以需求output format 举办拍卖。

所以,store
就是扮演着那样的剧中人物——是数码状态读写和一块,以及数据输入输出的格式化处理。

api 和 views

咱俩公司后台项目近来差不离有21个api模块。随着业务的迭代,模块会更加多。所以那边依据业务模块来划分pages,并且将pages
和 api 八个模块一一对应,方便维护,如下图

澳门金沙国际 4

aip和pages.png

诸如此类无论项目怎么累加,api和pages相比较好维护。

SPA的中坚便是前端路由。何为路由呢?说的通俗点便是网址,比如www.talkingcoder.com/article/list;专业点正是历次GET大概POST等请求,在服务端有1个专程的正则配置列表,然后匹配到现实的一条路线后,分发到差异的Controller,然后举行各样操作后,最终将html或数额再次来到给前端,那就完结了壹次IO。当然,近期大部分的网站都以那种后端路由,也正是多页面包车型客车,那样的裨益有好多,比如页面能够在服务端渲染好直接回到给浏览器,不用等待前端加载任何js和css就能够间接突显网页内容,再比如对SEO的融洽等。那SPA的毛病也是很精通的,正是模板是由后端来维护或改写。前端开发者须要设置任何的后端服务,供给还得上学像PHP或Java那几个非前端语言来改写html结构,所以html和多少、逻辑混为一谈,维护起来即臃肿也麻烦。然后就有了前后端分离的开发形式,后端只提供API来回到数据,前端通过Ajax获取到多少后,再用自然的法子渲染到页面里,这么做的独到之处就是左右端做的业务分的很理解,后端专注在多少上,前端专注在交互和可视化上,从在此以前后搭配,干活不累,即使之后再支付移动App,那就恰恰能动用一套API了,当然缺点也很掌握,就是首屏渲染要求时日来加载css和js。那种支付形式被许多商店肯定,也应运而生了千千万万前端技术栈,比如以jQuery+artTemplate+Seajs(requirejs)+gulp为主的付出格局所谓是万金油了。在Node.js现身后,这种情状有了创新,就是所谓的大前端,得益于Node.js和JavaScript的语言特征,html模板能够完全由前端来控制,同步或异步渲染完全由前端自由支配,并且由前端维护一套模板,那正是为啥在服务端使用artTemplate、React以及即将生产的Vue2.0缘由了。那说了这么多,到底怎么着算是SPA呢,其实正是在左右端分离的功底上,加一层前端路由。

一.写在日前

品类上线有一段时间了,三个基于webpack+vue+ES6的手提式无线电话机端多页面使用。其实说是多页面使用,实际上在webpack中属于八个app,
 假如真是做纯单页面,那应该有二26个页面吗。所以小编那边的多页面使用,是分为八个SPA。比如微信最下边,有多个导航,微信,通信录,发现,小编。
那么那多个导航,便是自个儿的多少个SPA,配置五个入口即可。

在此地就隐瞒太多代码了,项目组织将会停放github上,地址在背后给出,以供参考,上传的光景只是2个索引加上配置境况,其实关键点也就在webpack.config.js了,那里最首要安排了entry,loader,plugins,output目录啥的。

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

 

澳门金沙国际 5澳门金沙国际 6

 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

 

澳门金沙国际 7澳门金沙国际 8

  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。 下边是项目布局预览:

澳门金沙国际 9澳门金沙国际 10澳门金沙国际 11她俩各自是图表能源,引用库财富,发布打包后的js和css,src源码和包裹后的html

挑战一:前端组件化

基于大家所说的前提,第四个面对的挑战是组件化。那里照旧要强调的是组件化根本指标不是为了复用,很多个人根本没想掌握这一点,总是认为造的轮子其他事情能够用,说不定以后也足以用。

其实前端发展迭代这么快,交互变化也快,各样适配更新屡见不鲜。今日造的车轮,过阵子外人造了个高级轮子,咱们都会选更尖端的轮子,所以现在前端界有多个光景正是为着让旁人用本人的车轮,本人拼命不停地造。

在前端工业化生产趋势下,假使要进步生产作用,就非得让组件规范化标准化,达到怎么着的档次呢?一辆车除了底盘和车身框架必要自个儿安顿创建之外,别的标准零件都能够购买组装(专业学得差,有吗谬误请指正)。约等于说,除了
UI
和前端架构供给自个儿消除之外,其余的机件都以能够普及拿来主义的,要是打算让车子跑得更稳更安全,能够对组件进行打磨优化完善。

说了这么说,倒不如看看徐飞的小说《二〇一四前端组件化框架之路》 里面写的始末都是由此一定实践得出的想法,所以抢先1/2内容本人是同情而且深有体会的。

Router

路由那么些概念初始是在后台出现的,浏览器发出请求,服务器依据请求,解析url路径,依照服务器的路由配置,再次回到相应
html 字串。我们前端路由的兑现精神上正是检查和测试 url 的变迁,截获 url
地址,然后解析来匹配路由规则,每回 hash 值的扭转,会触发 hashchange
那几个事件,通过轮换 DOM
的措施来促成页面包车型地铁切换,还有通过HTML5的两个api,pushState 和
replaceState完成记住路由。

template是以此组件使用的html片段,能够直接是字符串,也能够像’#child’那样标识一个dom节点。

二.几点首要的拿走

1.组件化开发爽啊,
调用者只需求关心输入和输出,代码明朗,简单保证

2.vue-res promise异步风格太赏心悦目,太喜欢了。不过有坑,ios8.x,使用基础浏览器运营js,
不协助promise语法,所以要求在入口中,import多少个npm下载的node
module:

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

 澳门金沙国际 12

3.记念从前做三个部手提式有线电话机端项目,完全没有自动化,各种页面间跳转慢的一比,一点也不通畅,项目结构不易于管理,重复代码更多。

 近百个页面js版本得不到控制,管理js,css引用困难。微信静态财富缓存如此惨重,没有版本控制,每一种页面js版本的修改要人命。

4.消除缓存难点,应禁止html缓存,由于使用extract-text-webpack-plugin,能够确定保证你html入口中惟有大约的几行代码,等着自动化帮你引入所需js,所以尽管禁止html缓存,也不会潜移默化响应速度,究竟大家的html文件
     也就1-2k左右.html禁止缓存的由来是提防,js更新后,js
hash版本已变更,但浏览器缓存的html中,依旧是呼吁旧版本js文件,那样一来js版本控制变得没有意思。

  1. js调用手机摄像,
    调用安卓手提式有线电话机拍照不不难啊,所以假若只想在微信上行使网页的话,建议利用
    微信js SDK。

6.
苹果手提式有线电话机和各自安卓手提式有线电电话机,使用原生input调用拍录后,图片到页面中会出现旋转难题,所以在微信上
使用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。其余日期选拔依然相比较推荐原生。加上时分秒的话原生的恐怕就糟糕用。澳门金沙国际 13

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找)。
示例:澳门金沙国际 14澳门金沙国际 15

18.经过babel编写翻译es5的都没难题.。
 作者有个独立的小效用,没用es6,直接谷歌(谷歌)调节和测试开发,结果到了ios9.x上
 不辅助也不报错,以后幸免踩进去吧。下边是代码:

澳门金沙国际 16

19. IOS上总括时间 要求new Date(‘2017/09/09’)的格式,
 而不能够利用横杠的格式

挑战四:Hybrid App 化

今昔 Hybrid App 架构应用非常的红啊 _
(:3」∠)_,不搞一下都倒霉意思说自个儿是做 H5的。这里所说的 Hybrid App
可不是那种内置打包的 html 源码那种,而是间接去服务端请求 html
文书档案那种,只怕会选择离线缓存。有的人认为只要要接纳 Hybrid
架构,就不能够使用 SPA 的章程,其实 Hybrid 架构更应当运用 SPA。

碰着的多少个难点,作者大致列举一下:

components

此地的components放置的都以全局公用的有个别组件,如上传组件,富文本等等。

澳门金沙国际 17

components.png

本段主要介绍部分前端的底蕴概念,老车手可以一向跳过。

三.片段败笔

 1.脑子抽风啊,分为七个SPA,
整套项目下来,感觉依然应该做一个SPA。究竟SPA之间切换,二个SPA切换成另二个SPA
如故加载东西太多,不够流畅。固然微信浏览器缓存“严重”

2.连串布局划分依旧不够合理,但感到也还能够应付用。

3.组件化没有表明到极致,本身vue组件间通讯没做好,md找子组件,笔者依然还有通过遍历的点子。

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

5.本身有多个条件,开发,测试,demo, 线上。
每便发布到1个条件
 都亟需改了陈设后,重新包装,很难过啊,关于这点有啥好的主意啊? 

巨型单页面应用的进阶挑衅

2015/09/30 · HTML5,
JavaScript ·
单页应用

原稿出处: 林子杰(@Zack__lin)   

开卷须知:此处的特大型单页面应用(SPA Web
App)是指页面和功用组件在3个某部量级以上,举个栗子,比如
30+个页面100+个零件,同时伴随着大量的多少交互操作和多个页面包车型大巴多少同步操作。并且这里涉及的页面,均属于
hash 页面,而多页面概念的页面,是三个独自的 html
文档。基于这些前提,我们再来研讨,不然本身怕大家 Get 不到同叁个 G 点上去。

store

vex要根据供给去接纳,我们后台项目来说,尽管工作模块相比较多,还有权力,但工作之间的耦合度是非常低的,所以根本没有供给选择vuex来存款和储蓄data,每一种页面里存放自个儿的data就行。当然有个别数据恐怕供给用vuex来统管的,如登录,用户新闻,依旧用vuex管理有利于。

props是从父级通过html特性传递来的数据,它能够是字符串、数字、布尔、数组、对象,暗中认可是单向的,也得以安装为双向绑定的。props里的参数能够一贯通过像this.msg这种方式调用,那与data的里的数额是同等的。

四.写在结尾

 这么些项目产品将一而再支付,可是下一阶段还有个门类,笔者将选取一个SPA达成,关于vue有哪些好的各样mobile组件,希望dalao不吝推荐。

 

 

只要,您觉得读书那篇博客让你有个别收获,不妨点击一下右下加【推荐】按钮。
设若,您愿意更便于地窥见自家的新博客,不妨点击下方血红【关怀】的。
因为,笔者的享用热情也离不开您的必定帮助。

多谢您的读书,我将不止输出分享,小编是蜗牛,
保持学习,谨记谦虚。不端不装,有趣有梦。

挑战五:品质优化

@前端农民工 在 别处 已经说得很驾驭了,直接传送门过去看呢,这里不罗嗦了。

 

1 赞 2 收藏
评论

澳门金沙国际 18

Vue简单介绍

① 、Vue.js是3个营造数据驱动的web框架
② 、Vue.js达成了多少的双向绑定和组件化
叁 、Vue.js只要求关周密据的变迁,无需繁琐的拿走和操作dom
比如给叁个成分绑定事件并赋值,jQuery的做法是:

<input class="ipt" type="text">
<button class="btn"></button>
<script type="text/javascript">
$.ready(function () {
        $('.ipt').value();
        $('.btn').click(function() {    
        })
 })
</script>

vue的写法是:

<input class="ipt" v-model="value" type="text">
<button class="btn" @click="click"></button>

.vue文件的写法

<template>
    这里写HTML
</template>
<script type="text/ecmascript-6">
    这里写数据和方法
</script>
<style lang="stylus" rel="stylesheet/stylus">
    这里写css
</style>

基础知识扫盲

类型布局

├── build // 构建相关
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── comm// 打包后生成的目录
│ ├── favicon.ico
│ ├── index.html
│ └── static
├── config // 配置相关
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── package.json //开发生产正视
├── server //服务及mock数据
│ ├── controller
│ └── mock
├── src //源代码
│ ├── App.vue // 入口页面
│ ├── api // 全体请求
│ ├── assets // 字体等静态能源
│ ├── common // 全局公用方法
│ ├── components // 全局公用组件
│ ├── favicon.ico
│ ├── index.html // html模板
│ ├── main.js // 入口js 加载组件 起初化等
│ ├── pages // 全体页面
│ ├── plugins // 全局工具
│ ├── router // 路由
│ └── store // 全局store管理
└── static // 第1方不打包能源
├── async.js
├── css
├── img
├── jquery-1.8.3.min.js
├── jquery.ztree.js
├── md5.js
├── paopao.js
├── spark-md5.js
├── tinymce
├── upload.js
├── upyun-mu.js
└── vue-style-loader

单页面富应用(SPA)和前端路由

router-view

<router-view> 是用来渲染路径匹配到的零件。<router-view>
还足以内嵌<router-view>,达成路由嵌套。

 <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>

三个零部件基本跟一个vue实例是接近的,也有和好的methods和data,只可是data是由此多个function来回到了多少个对象,具体原因能够查阅vue的文书档案。

最后

明天自身只是给大家简单来说了眨眼间间后台管理的组织和vue的简短知识,大家即使有趣味能够去明白一下,也能够每213日交换~

newVue({    data:
{        msg1:’Hello,TalkingCoder’,        msg2:’你好,TalkingCoder’}})

前端发展与现状

世家都掌握前端是由HTML、CSS、Js组成的,一开始这么写出来的页面,无法有的加载,复用性比较差,重复工作相比多。微软就出产了ifram标签,就是一定于在网页中嵌套二个网页,切换目录只是切换ifram中的网页,照旧一直加载某些完整的html界面。接着ajax的出现,完毕了一些刷新,优化了用户体验。后来跻身了jQuery时期,jQuery封装了不少原生方法,减弱了代码量。将来我们前端进入了上下端分离时代,流行
MV* 框架(MVC、MVP、MVVM),MVVM框架有Angular、Vue、React。

澳门金沙国际 19

MVVM框架

当今大家后台管理种类是基于Vue开发的单页面应用(SPA)。

Vue的路由和它的组件化

《Vue+Webpack开发可复用的单页面富应用学科(配置篇)》

怎么行使组件

相关文章

发表评论

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

网站地图xml地图