nuxt踩过的坑

nuxt.js 简单介绍

nuxt 官网:https://zh.nuxtjs.org/

1、nuxt.js 的原理图:

具体的原理介绍官网有详细的解释,欢迎移步官网,这里不再复述。

2、nuxt.js 的优势

1)就是我们无需为了路由划分而烦恼,你只需要按照对应的文件夹层级创建 .vue 文件就行

2)无需考虑数据传输问题,nuxt 会在模板输出之前异步请求数据(需要引入 axios 库),而且对 vuex 有进一步的封装

3)内置了 webpack,省去了配置 webpack 的步骤,nuxt 会根据配置打包对应的文件

技术栈选型

“axios”: “^0.17.1”,

“css-loader”: “^0.28.7”,

“element-ui”: “^2.0.7”,

“moment”: “^2.20.0”,

“nuxt”: “^1.0.0-rc11”,

“postcss-loader”: “^2.0.9”,

“sass-resources-loader”: “^1.3.1”,

“scss”: “^0.2.4”,

“style-loader”: “^0.19.0”,

“vue”: “2.5.9”,

“vue-server-renderer”: “2.5.9”,

“vue-template-compiler”: “2.5.9”

实施方案

使用 vue 插件 - elementUI

  1. 首先我们需要在 plugins 文件夹中添加插件文件,element-ui.js

  2. 在 nuxt.config.js 中配置 plugins 字段

  3. 由于 elementUI 是第三方库,我们需要把它打包到库文件里面以获得更好的缓存效果。在 nuxt.config.js 中配置 element-ui 即可。

  4. 同时 nuxt 还支持区分只在浏览器中运行和只在服务端运行的插件。

1) 只在浏览器运行:配置 nuxt.config.js 中 plugins 字段,将引入的插件属性设置为 ssr: false

2) 只在服务端运行:直接在 webpack 打包 server.bundle.js 文件中,将 process.SERVER_BUILD 设置为 true 即可 layout 布局

layout 布局

nuxt.js 实现了一个新的概念,layout 布局,我们可以通过 layout 布局方便的实现页面的多个布局之间方便的切换。本项目中实现了三种常用的布局,即:1)两栏布局,左栏固定,右栏动态宽度;2、错误页提示,页面中间一个提示框的布局方案;3、纯白页面布局。

结合 elementUI 可以进行快速布局

页面路由

nuxt 框架的页面路由使用了 vue-router,但是我们不需要对页面的路由进行过多的操心,因为我们只要按照 nuxt 规范的页面文件目录结构进行设计,就可以自动生成 vue-router 文件。或者说我们存放页面的目录结构会直接影响最终生成的路由配置。

总结

也是正因为这点导致小白上手快,开发难度降低了一个等级,而这对需求大的功能构成 l 挑战,因为此框架面世比较早,早期从而导致奇妙的错误,官方文档已经警告过你了,线下试试还可以,如果运用生产环境就惨很多。要填各种坑。路由跳转问题,路由传参,

滚动条问题,vue-router 存在各种问题而且没有一个统一的 main 入口,只能在配置里面运用,总之是不大推荐生产的。


文章作者: xkloveme
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 xkloveme !
评论
 上一篇
小程序开发wepy框架类vue的开发方式 小程序开发wepy框架类vue的开发方式
1.node 的安装节点网官下载 推荐左边的安装方式,因为右边的最新版本在有些电脑上运行不稳定。 下载到本地一直继续就好。 安装好后就可以直接在命令行运行查看结果 2.快速入门 WePY 是一款让小程序支持组件化开发的框架,通过预编译的手
2018-01-18
下一篇 
Linux 运维人员最常用 150 个命令汇总 Linux 运维人员最常用 150 个命令汇总
linux 命令是对 Linux 系统进行管理的命令。对于 Linux 系统来说,无论是中央处理器、内存、磁盘驱动器、键盘、鼠标,还是用户等都是文件, Linux 系统管理的命令是它正常运行的核心,与之前的 DOS 命令类似。linux 命
2017-11-22
  目录