nuxt 开发优缺点

JavaScript012

nuxt 开发优缺点,第1张

用vue开发单页用得比较顺手,所以想在最近的项目中使用vue来做。但是鉴于单页应用对seo优化不好,用jquery + bootstrap + thymeleaf 

开发又不顺手。发现还有一个方案是使用nuxt做ssr也就是最近说得比较多的服务端渲染。

于是花了一会儿写了个nuxt的demo。

1.vue开发确实能够提高我的开发效率。

2.nuxt应用开发还是不如直接用vue,偶尔会出现莫名的错误,只能重新npm install

3.部署好麻烦啊,我还得在服务器装一个node.js, 需要把源码pull 到服务器,需要在服务器上install 以及build ,还要装一个pm来管理node进程

挣扎了一下,还是选择用jquery来开发,毕竟运维部署简单得多,一个小网站,部署在tomcat里就行了。

vue单页面应用渲染是从服务器获取所需js,在客户端将其解析生成html挂载于

id为app的DOM元素上,这样会存在两大问题。

除此之外,nuxt与vue还有一些其他方面的区别。

下图为关于nuxt的简单概述

vue文件中可直接使用

sass文件如需解析,nuxt.config.js中配置css属性

封装axios,解决每个请求前加baseURL

plugins/axios.js

index.vue

为避免每个页面都引入moment,执行 moment.locale('zh-cn') ,可将其定义为全局方法

icon.png文件存放在static文件夹下,nuxt.config.js中配置head属性

中间件存放于middleware文件夹下,按使用场景可分为全局中间件和单页面中间件

中间件执行流程顺序:

nuxt.config.js ->匹配布局 ->匹配页面

按照index.vue通过 require('mini-toastr') 引入miniToastr,运行程序报错如下

打印miniToastr发现为一Module对象,init挂载在其default属性上

所以修改引入方法为

为什么需要require().default

关于如上介绍,测试关于两种模块的导出方法

方式一:export default

新建test.js文件

vue页面导入

此时 require('~/plugins/con.js') 打印为

方式二:module.exports

此时 require('~/plugins/con.js') 打印为