javascript - vue.js开发单页面应用?
PHP中文网
PHP中文网 2017-04-10 17:09:31
0
11
899
  1. 我有一个前端项目,需要自己从头开始搭建一个单页面应用

  2. 我想采用vue.js框架来实现我的前端项目。但是有些配置我还是不清楚。
    我所构想的技术应用有:

webpack + es6 +vue.js + vue-router来构建我的项目。

难点:组件模块我想实现按需加载,而不是全部打包出一个文件里,这样首页加载会很慢。但是我不知道怎么配置怎么写,麻烦知道的告知一下,谢谢!
PHP中文网
PHP中文网

认证高级PHP讲师

reply all(11)
小葫芦

务必用单向数据流,比如Vuex就是个很棒的选择。

务必单向数据流
务必单向数据流
务必单向数据流

重要的事情说三遍

至于组件加载,webpack有code split的功能,这个还是自己查文档吧。

刘奇

可参考 https://github.com/eteplus/vue-sui-demo

小葫芦

看下我的文章 手机回复不太好放链接

Peter_Zhu

参考下这个例子吧:https://github.com/vuejs/vue-hackernews

左手右手慢动作

我也没写过,只是在尝试。。g一下 webpack代码分割,看哈这个http://cn.vuejs.org/guide/components.html#u5F02_u6B65_u7EC4_u4EF6

小葫芦

不建议一开始就这么搞,你可以就只用vuejs写。 循序渐进

洪涛

应用的场景

对浏览器兼容要求不高,vuejs是到IE9

对MVVM有一定的经验

加载速度要求高

对性能要求比较高

需要组件化开发

喜欢对原生js对象操作

SPA

参考

伊谢尔伦

组件按需加载,和webpack配置无关,和代码如何写有关。

webpack文档里,有一节是说代码分隔的[1]。

比如使用 CommonJS 风格:

require.ensure(["module-a", "module-b"], function(require) {
    var a = require("module-a");
});

这里require.ensure的第二个参数,也就是那个回调函数,会在模块全部下载完成后调用。但是,你需要显式地执行模块,也就是var a = require("module-a");,不然模块不会执行。

还有其他分隔的异步加载方式,具体请看文档。

1 Webpack - Code Splitting

巴扎黑

可以参考这个开源项目easy-vue,一个超级简单初级的vue前端实现,适合新手

洪涛

用vue-cli 啊,里面有作者写的es6 的template,再npm install vue-router --save 再把github上vue-router里的例子粘过来,很简单啊

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template