Nuxt.js
muzidigbig
凡事第一反应,找方法,而不是找借口;发现问题,反思,而不是急着辩解。
展开
-
Nuxt的路由动画效果
路由的动画效果,也叫作页面的更换效果。Nuxt.js提动两种方法为路由提动动画效果,一种是全局的,一种是针对单独页面制作。全局路由动画全局动画默认使用page进行设置,例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个main.css文件。/assets/css/main.css.page-enter-active,....原创 2018-12-07 17:18:43 · 1271 阅读 · 0 评论 -
nuxt.config.js 的配置
nuxt.config.js 是 Nuxt.js 的配置文件,可以通过针对一系列参数的设置来完成 Nuxt.js 项目的配置,可以在Nuxt.js 官网 找到针对这个文件的说明,下面举例一些常用的配置:head: 可以在这个配置项中配置全局的 head ,如定义网站的标题、 meta ,引入第三方的 CSS、JavaScript 文件等: head: { title: '百姓店铺',...原创 2018-12-11 15:15:50 · 19595 阅读 · 1 评论 -
Nuxt 路由---03
Nuxt嵌套路由官网上的API详解:点击链接看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容,要想默认的在<nuxt-child>区域显示一个页面内容怎么办?自己案例代码:pages/parent.vue<template> <div> <h2>父组件的页面的内容<...原创 2018-12-11 12:22:29 · 17319 阅读 · 0 评论 -
Nuxt 的 nuxt-link 有个坑
如果你跟着nuxt的案例走,记住 ,所以目录 比如 PAGES 目录 你最好小写 pages 所有目录都小写因为 当你敲下面哪行代码 时 <nuxt-link :to="{name: 'posts-id',params:{ id: post.id }}">{{ post.title }}</nuxt-link>name其实指向的是路由,而路由死活...原创 2018-12-10 10:50:44 · 4347 阅读 · 0 评论 -
Nuxt引入第三方插件的方法 比如jQuery
使用npm安装npm install --save jquery1. nuxt.config.js 中进行配置const webpack = require('webpack')module.exports = { build: { plugins: [ new webpack.ProvidePlugin({ ...原创 2018-12-10 10:47:36 · 2116 阅读 · 0 评论 -
Nuxt常用配置项
更改地址栏中的ico图标2.在创建nuxt项目是使用了esline,在编辑代码的时候受到影响,怎么注销掉esline3.端口被占用配置端口"config":{ "nuxt":{ "host":"127.0.0.1", "port":"1818" }}配置好后,我们在终端中输入: npm run dev原创 2018-12-07 16:20:25 · 5496 阅读 · 4 评论 -
Nuxt 目录结构(nuxt渲染流程)---02
assets: 资源文件。用于组织未编译的静态资源如 LESS、SASS或 JavaScript。放置不需要经过 webpack 打包处理的资源文件,如 scss,图片,字体等。 components: 组件。可以复用的组件。存放项目中的各种组件;注意,只有在这个目录下的文件才能被称为 组件 。 layouts: page: 创建自定义的页面布局。页面都需要有一个布局,默认为 defau...原创 2018-12-07 16:08:19 · 2825 阅读 · 0 评论 -
Nuxt项目环境搭建和Hello World---01
前提:在使用npm前你需要安装node到系统中 全局安装了vue-cli脚手架 安装了淘宝镜像(可选)以上安装方法:https://blog.csdn.net/muzidigbig/article/details/80490884安装nuxt一、官网提供的安装方式:(安装时就可安装的框架)搭建步骤1.打开命令提示符,进入到相关文件夹下;2.使用如下命令一步搭建项目...原创 2018-12-07 16:07:49 · 698 阅读 · 0 评论 -
Nuxt.js理解 开启SSR渲染(介绍)---00
Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器渲染)。再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及。很多人想用Vue开发多页应用,并在服务端完成渲染。这时候就出现了Nuxt.js这个框架,它简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。那服务端渲染到底有什么好处哪?最主要的原因是SPA单...原创 2020-10-30 17:10:24 · 2250 阅读 · 0 评论 -
浅谈SPA、SEO、SSR
文献链接:https://www.jianshu.com/p/fcb98533bc18转载 2018-12-07 15:26:38 · 1619 阅读 · 0 评论 -
vue验证码组件
代码如下:<template> <div class="join_formitem"> <label class="enquiry">验证码<span>:</span></label> <div class="captcha&q原创 2018-12-08 12:04:03 · 1072 阅读 · 0 评论 -
Nuxt 静态资源和打包
直接引入图片我们在网上任意下载一个图片,放到项目中的static文件夹下面,然后可以使用下面的引入方法进行引用。<div> <img src="~static/logo.png"></div>这时候在npm run dev 下是完全正常的,那我们看一下打包。打包静态HTML并运行用Nuxt.js制作完成后,你可以打包成静态文件并放在服务器上,...原创 2018-12-08 10:54:00 · 5259 阅读 · 0 评论 -
Nuxt.js asyncData()获取数据、nuxt反向代理跨域---05
在项目中需要在初始化页面前先得到数据,也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法,增加了asyncData(){……}。从名字上就很好理解,这是一个异步的方法。创建远程数据在这里制作一些假的远程数据,我选择的网站是myjson.com,它是一个json的简单仓库,学习使用是非常适合的。我们打开网站,在对话框中输入JSON代码,这个代码可以自己随意输入哦。...原创 2018-12-08 10:47:22 · 42341 阅读 · 5 评论 -
Nuxt的错误页面和个性meta设置
当用户输入路由错误的时候,我们需要给他一个明确的指引,所以说在 应用程序开发中404页面时必不可少的。Nuxt.js支持直接再默认布局文件夹里建立错误页面。建立错误页面在根目录下的layouts文件夹下建立一个error.vue文件,它相当于一个显示应用错误的组件。<template> <div class="error"> <h...原创 2018-12-07 18:32:43 · 1500 阅读 · 0 评论 -
Nuxt的默认模板和默认布局(视图layout)---04
在开发应用时,经常会用到一些公用的元素/在每个页面中都有的元素,比如网页的标题是一样的,每个页面都是一模一样的标题。这时候我们有两种方法,第一种方法是作一个公用的组件出来,第二种方法是修改默认模板。这两种方法各有利弊,比如公用组件更加灵活,但是每次都需要自己手动引入;模板比较方便,但是只能每个页面都引入。默认模板Nuxt为我们提供了超简单的默认模板定制方法,只要在根目录下创建一个app.h...原创 2018-12-07 18:12:41 · 4729 阅读 · 0 评论 -
Nuxt vuex状态树bug
nxut 的 状态树 官方网站有个BUG。竟然说不用 引入 vuex,比较坑的 ,其实是他那套nuxt-community/starter-template 不用引入而已,如果你从头开始搭建 是要引用的,npm install vuex --save ...原创 2018-12-11 15:28:57 · 510 阅读 · 0 评论