我有一个前端项目,需要自己从头开始搭建一个单页面应用
我想采用vue.js框架来实现我的前端项目。但是有些配置我还是不清楚。 我所构想的技术应用有:
webpack + es6 +vue.js + vue-router来构建我的项目。 难点:组件模块我想实现按需加载,而不是全部打包出一个文件里,这样首页加载会很慢。但是我不知道怎么配置怎么写,麻烦知道的告知一下,谢谢!
认证高级PHP讲师
务必用单向数据流,比如Vuex就是个很棒的选择。
务必单向数据流务必单向数据流务必单向数据流
重要的事情说三遍
至于组件加载,webpack有code split的功能,这个还是自己查文档吧。
可参考 https://github.com/eteplus/vue-sui-demo
看下我的文章 手机回复不太好放链接
参考下这个例子吧: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
webpack文档里,有一节是说代码分隔的[1]。
比如使用 CommonJS 风格:
require.ensure(["module-a", "module-b"], function(require) { var a = require("module-a"); });
这里require.ensure的第二个参数,也就是那个回调函数,会在模块全部下载完成后调用。但是,你需要显式地执行模块,也就是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里的例子粘过来,很简单啊
npm install vue-router --save
务必用单向数据流,比如Vuex就是个很棒的选择。
务必单向数据流
务必单向数据流
务必单向数据流
重要的事情说三遍
至于组件加载,webpack有code split的功能,这个还是自己查文档吧。
可参考 https://github.com/eteplus/vue-sui-demo
看下我的文章 手机回复不太好放链接
参考下这个例子吧: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
的第二个参数,也就是那个回调函数,会在模块全部下载完成后调用。但是,你需要显式地执行模块,也就是var a = require("module-a");
,不然模块不会执行。还有其他分隔的异步加载方式,具体请看文档。
1 Webpack - Code Splitting
可以参考这个开源项目easy-vue,一个超级简单初级的vue前端实现,适合新手
用vue-cli 啊,里面有作者写的es6 的template,再
npm install vue-router --save
再把github上vue-router里的例子粘过来,很简单啊