nuxt
我的小英短
Q版前端开发攻城狮
展开
-
nuxt 目录结构及配置文件详解
nuxt 目录结构详解首先我们来看下使用 create-nuxt-app脚手架工具所创建的nuxt项目目录的结构,windows cmd 命令行输入,tree /f /a ,打印如下项目目录结构:C:.| .editorconfig| .gitignore| nuxt.config.js| package.json| README.md|+---assets...原创 2019-07-31 14:57:43 · 6681 阅读 · 0 评论 -
nuxt 项目 配置对 less、sass、stylus 预处理器的支持
nuxt 配置对less、sass、stylus的支持导读在项目开发的过程中呢,在编写项目样式的时候,很多童鞋喜欢使用css预处理器进行方便快捷的开发,所以说,让我们的项目支持预处理器是非常有必要的;这章节呢,我们项目新增对 stylus、less、sass 这三款比较常用的css预处理器工具的支持;我们可以去到官网查看文档:https://zh.nuxtjs.org/api/conf...原创 2019-08-12 10:55:25 · 5347 阅读 · 1 评论 -
nuxt 每个页面head标签内容设置
nuxt 每个页面head标签内容设置导读在前面几节课程中,我们已经完成对首页,jokes查询页,About页面的开发,接下来,我们来看一下每个页面的head标签内容,我们会发现这三个页面的标签一致,而且和nuxt.config.js配置文件的head配置保持一致;所以我们需要对这三个页面单独做一个head,更加方便于SEO优化,搜索引擎的爬取;好,我们打开index.vue,编辑如...原创 2019-08-09 13:54:49 · 8676 阅读 · 1 评论 -
nuxt about页面功能分析和页面模块开发
nuxt about 页面功能分析和开发导读我们在上一个章节中,我们完成了jokes页面UI和接口功能模块的开发,我们紧接着来继续开发剩下的整个About Page页面,这个页面呢,属于一个纯静态的一个页面,里面主要存放着一些关于jokes相关的一些源网站接口信息,方便大家查看阅读;好,我们来简单分析下页面的结构:顶部 banner顶部标题 About Jokes API内容 ...原创 2019-08-09 11:54:29 · 869 阅读 · 0 评论 -
nuxt 项目开发之jokes接口联调开发
nuxt 项目开发之jokes接口联调开发导读在上章节中,我们开发完成jokes页面的基本UI骨架,这节课我们来实现实现表单接口交互功能;在编写请求之前呢,我们需要在data中定义好我们需要的属性;首先我们需要当前页的页码page,默认显示第1页,然后总的joke数量用rows字段来代替,再接着呢,我们需要每页显示的jokes条数,默认10条;最后我们需要搜索内容searchWord,...原创 2019-08-09 11:17:21 · 1052 阅读 · 1 评论 -
nuxt jokes页面UI模块结构开发
nuxt jokes 页面结构开发在这章节内容呢,我将带着大家使用bootstarpVue来开发这个jokes查询页面,这章内容呢,主要是编写我们的静态UI结构,渲染上静态数据;好我们现在来使用<Banner>编写这个顶部banner信息栏;编写如下:<Banner title="Jokes Page" para="this is a jokes search page....原创 2019-08-08 20:55:28 · 831 阅读 · 0 评论 -
nuxt 页面路由配置,主页轮播组件开发
nuxt pages目录页面配置,主页轮播组件开发在上一个章节内容中,我们开发了AppHeader公共顶部菜单导航栏组件,本章节呢,我们根据菜单导航的路由导航,来配置我们的 page页面,去到pages目录,我们需要创建3个[nuxt_link_name].vue页面文件,用来匹配路由导航需要加载的页面;好,我们进入命令行,来创建页面文件,windows 系统下可以使用如下命令: ...原创 2019-08-06 17:32:42 · 1815 阅读 · 0 评论 -
nuxt jokes 页面模块功能分析
nuxt jokes 页面功能分析在上章节中,我们开发完成整个首页基本的页面展示,而且完成了 SSR 列表数据的服务端渲染,而且渲染输出到浏览器,在这章节呢,我们紧接着来开发这个jokes查询条件搜索页面;首先呢,我们需要来分析这个jokes页面的所展示UI模块,我们从上到下进行分析;整个jokes查询页面,我们可以分为4个部分,从上到下依次是,banner,筛选表单,jokes列表(包括...原创 2019-08-08 19:56:57 · 968 阅读 · 0 评论 -
nuxt 项目开发之子页 jokes 查询页面UI模块分析
nuxt 项目开发 - 首页 “笑话” jokes 列表组件开发导读我们接下来继续开发首页的列表的内容,我们首先来分析下首页的jokes列表,这个jokes列表项是异步请求我们的json-server api 接口服务渲染出来数据,且使用card组件包裹起来的,而且我们可以看一下当前页面的源码,我们往下拉,会发现整个列表数据都会被渲染响应到浏览器页面中;好,我们现在来进行开发,首页我们来...原创 2019-08-08 17:55:52 · 886 阅读 · 0 评论 -
nuxt 项目开发之 json-server API 服务搭建
nuxt 项目开发 - json-server 服务搭建导读我们在项目开发过程中,是需要第三方接口渲染jokes列表的,jokes页面也是需要分页,以及搜索查询的,所以呢,我们需要搭建一个小型服务器,来满足数据的分页,搜索查询;所以呢,我们可以选择json-server这样的一款本地服务的工具,它可以指定某个json文件为api接口的数据源;详细介绍好,我们来看一下这个json-s...原创 2019-08-08 11:27:35 · 1346 阅读 · 0 评论 -
nuxt 项目实战之顶部导航菜单组件开发
nuxt.js 项目开发 - 顶部导航菜单组件开发导读首先我们来分析下,最终案例的导航栏,这是一个移动端展示形式的顶部导航栏,这个导航菜单,采用的是bootstrapVue css ui 组件库里面的navbar组件我们需要单独创建一个菜单组件,并且把这个菜单组件放置在,公共的 layout 组件内部,接下来我们来制作菜单导航我们需要在components目录中新建目录App...原创 2019-08-04 13:11:42 · 4178 阅读 · 0 评论