参考了nuxt的项目模版改了了下,可以省点事情~
主要集成了iview,@nuxtjs/axios,eslint(airbnb),一些兼容的polyfill,pm2配置文件
element-ui用法没什么两样,都可以由一些方式按需加载,之前试过iview,这里懒得弄了,每次使用都要import,偷懒了
=> github
顺便个人推广下nuxt~
nuxt
nuxt体验上相对spa,优势就不用说了,同构框架类似next,性质基本一样,主要说下缺点
- 首评渲染快?那也要看你的接口有多快,不然可不能像spa那样加个loading,等数据拿到在渲染,只会白屏或者停留在上个页面,知道接口返回后,页面才会跳转,但是跳转后页面立马呈现,这也让人舒服很多
- 由于服务器端没有浏览器相关对象,所有经常有很多插件代码用到了window,location等之类的对象,那就会直接报错,只能放在服务器端执行,小插件还好说,但像iview这样大的组件库,当初版本还很老不支持ssr的时候,那就很痛苦
- cookie,storage的坑,开发一定要区分开服务器端和客户端,因为服务器端可获取不到storage,cookie能从req中获取到,但无法set。
- 调试,首次打开页面是由服务器端先处理,所以客户端,chrome network中是看不到接口请求的,只能看到返回已经填充完数据的页面,但是如果报错了,就不能像spa那样立马定位到问题
其他方面遇到的问题应该也不多,和spa区别不会太大。
目前我也在公司好几个项目中重构用了这个框架,更新迭代中踩了不少坑,现在已经发布到了1.1.1,(好像上上周官方才升级1.0,还因为以前用的node版本是7.8.0,而它尽然要求要8.0.0以上,最后还是决定升级,和运维升级了所有开发和生产所有的node版本,以前升级几次都多少有一些老项目报错,然后回退了,这次由于很多项目都重构过了,过程还算问题不大,但也花了一天时间了,毕竟十个左右项目,dev,uat,prod各两台服务器。。。)
使用
先安装 vue-cli.
$ vue init bwcmall/nuxt my-project
$ cd my-project
# install dependencies
$ npm install # Or yarn install