vue
万花丨凋
一天分享自己研究的一部分代码
展开
-
分享:nuxt注入 $root 和 context
注入 $root 和 context有时您希望在整个应用程序中使用某个函数或属性值,此时,你需要将它们注入到Vue实例(客户端),context(服务器端)甚至 store(Vuex)。按照惯例,新增的属性或方法名使用$作为前缀。...原创 2020-06-22 09:21:57 · 1023 阅读 · 0 评论 -
分享:nuxtES6 插件
ES6 插件如果插件位于node_modules并导出模块,需要将其添加到transpile构建选项:module.exports = { build: { transpile: ['vue-notifications'] }}您可以参考 构建配置 文档来获取更多构建选项。——————————————————————————————————————————链接:https://zh.nuxtjs.org/api/configuration-build/#transpile..原创 2020-06-17 12:46:47 · 219 阅读 · 0 评论 -
分享:nuxt使用第三方模块
使用第三方模块我们可以在应用中使用第三方模块,一个典型的例子是在客户端和服务端使用 axios 做 HTTP 请求。首先我们需要安装 npm 包:npm install --save axios然后,在页面内这样使用:<template> <h1>{{ title }}</h1></template><script>import axios from 'axios'export default { async asyn原创 2020-06-16 09:33:39 · 949 阅读 · 0 评论 -
分享:nuxt插件
插件Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。需要注意的是,在任何 Vue 组件的生命周期内, 只有 beforeCreate 和 created 这两个方法会在 客户端和服务端被调用。其他生命周期函数仅在客户端被调用...原创 2020-06-15 11:01:46 · 278 阅读 · 0 评论 -
分享:nuxt静态文件
静态文件如果你的静态资源文件需要 Webpack 做构建编译处理,可以放到 assets 目录,否则可以放到 static 目录中去。Nuxt 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下,像 robots.txt 或 sitemap.xml 这种类型的文件就很适合放到 static 目录中。你可以在代码中使用根路径 / 结合资源相对路径来引用静态资源:<!-- 引用 static 目录下的图片 --><img src="/my-image.png"/>原创 2020-06-14 08:21:09 · 1590 阅读 · 0 评论 -
分享:nuxtWebpack 构建
Webpack 构建默认情况下, vue-loader自动使用 css-loader 和Vue模板编译器来编译处理vue文件中的样式和模板。在此编译过程中,所有的资源URL例如 、 background: url(…) 和 CSS中的 @import 均会被解析成模块通过 require 引用。举个例子, 假设我们有以下文件目录结构:-| assets/----| image.png-| pages/----| index.vue如果我们在CSS代码中使用 url(’~assets/image原创 2020-06-13 10:51:43 · 961 阅读 · 5 评论 -
分享:nuxt资源文件
资源文件默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件,可以放置在 static 目录中。原创 2020-06-12 08:08:52 · 207 阅读 · 0 评论 -
分享:nuxt错误处理
错误处理Nuxt.js 在上下文对象context中提供了一个 error(params) 方法,你可以通过调用该方法来显示错误信息页面。params.statusCode 可用于指定服务端返回的请求状态码。以返回 Promise 的方式举个例子:export default { asyncData ({ params, error }) { return axios.get(`https://my-api/posts/${params.id}`) .then((res) =&g原创 2020-06-11 08:14:29 · 3217 阅读 · 0 评论 -
分享:nuxt监听 query 参数改变
监听 query 参数改变默认情况下,query的改变不会调用asyncData方法。如果要监听这个行为,例如,在构建分页组件时,您可以设置应通过页面组件的watchQuery属性监听参数。了解更多有关API watchQuery的信息。——————————————————————————————————————————————链接:https://zh.nuxtjs.org/api/pages-watchquery...原创 2020-06-10 08:29:52 · 2689 阅读 · 0 评论 -
分享:nuxt访问动态路由数据
访问动态路由数据您可以使用注入asyncData属性的context对象来访问动态路由数据。例如,可以使用配置它的文件或文件夹的名称访问动态路径参数。所以,如果你定义一个名为_slug.vue的文件,您可以通过context.params.slug来访问它。export default { async asyncData ({ params }) { const slug = params.slug // When calling /abc the slug will be "abc"原创 2020-06-09 09:07:21 · 546 阅读 · 0 评论 -
分享:nuxt使用 req/res(request/response) 对象
使用 req/res(request/response) 对象在服务器端调用asyncData时,您可以访问用户请求的req和res对象。export default { async asyncData ({ req, res }) { // 请检查您是否在服务器端 // 使用 req 和 res if (process.server) { return { host: req.headers.host } } return {} }}原创 2020-06-08 12:00:25 · 1729 阅读 · 0 评论 -
分享:nuxt上下文对象
上下文对象可通过 API context 来了解该对象的所有属性和方法。——————————————————————————————————————————————链接:https://zh.nuxtjs.org/api/context...原创 2020-06-07 14:04:30 · 1210 阅读 · 0 评论 -
分享:nuxt数据的展示
数据的展示asyncData 方法返回的数据在融合 data 方法返回的数据后,一并返回给模板进行展示,如:<template> <h1>{{ title }}</h1></template>原创 2020-06-06 12:19:21 · 241 阅读 · 0 评论 -
分享:nuxt返回 对象
返回 对象如果组件的数据不需要异步获取或处理,可以直接返回指定的字面对象作为组件的数据。export default { data () { return { foo: 'bar' } }}原创 2020-06-05 09:25:36 · 237 阅读 · 0 评论 -
分享:nuxt使用 async或await
使用 async或awaitexport default { async asyncData ({ params }) { const { data } = await axios.get(`https://my-api/posts/${params.id}`) return { title: data.title } }}原创 2020-06-04 09:36:47 · 706 阅读 · 0 评论 -
分享:nuxt使用 回调函数
使用 回调函数export default { asyncData ({ params }, callback) { axios.get(`https://my-api/posts/${params.id}`) .then((res) => { callback(null, { title: res.data.title }) }) }}原创 2020-06-03 09:58:02 · 328 阅读 · 0 评论 -
分享:nuxt返回 Promise
返回 Promiseexport default { asyncData ({ params }) { return axios.get(`https://my-api/posts/${params.id}`) .then((res) => { return { title: res.data.title } }) }}原创 2020-06-02 08:43:11 · 523 阅读 · 1 评论 -
分享:nuxtasyncData 方法
asyncData 方法asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候,第一个参数被设定为当前页面的上下文对象,你可以利用 asyncData方法来获取数据,Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。注意:由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。Nuxt.js 提供了几种不同的方法来使原创 2020-06-01 08:30:52 · 1430 阅读 · 0 评论 -
分享:nuxt异步数据
异步数据Nuxt.js 扩展了 Vue.js,增加了一个叫 asyncData 的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。————————————————————————————————————————————链接:https://vueschool.io/?friend=nuxt...原创 2020-05-31 12:42:47 · 281 阅读 · 0 评论 -
分享:nuxt个性化特定页面的 Meta 标签
个性化特定页面的 Meta 标签关于个性化特定页面的 Meta 标签,请参考 页面头部配置API。注意: 为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用 hid 键为meta标签配一个唯一的标识编号。请阅读关于 vue-meta 的更多信息。——————————————————————————————————————————————链接:https://zh.nuxtjs.org/api/pages-head...原创 2020-05-30 10:37:08 · 671 阅读 · 0 评论 -
分享:nuxt默认 Meta 标签
默认 Meta 标签Nuxt.js 允许你在 nuxt.config.js 里定义应用所需的所有默认 meta 标签,在 head 字段里配置就可以了:注意: Nuxt.js 使用 hid 而不是默认值 vmid 识别元素key一个使用自定义 viewport 和 谷歌字体 的配置示例:head: { meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-sc原创 2020-05-29 13:02:02 · 810 阅读 · 0 评论 -
分享:nuxtHTML 头部
HTML 头部Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) and html 属性。Nuxt.js 使用以下参数配置 vue-meta:{ keyName: 'head', // 设置 meta 信息的组件对象的字段,vue-meta 会根据这 key 值获取 meta 信息 attribute: 'n-head', // vue-meta 在监听标签时所添加的属性名 ssrAttribute: 'n-head-ssr', // 让 vue-meta 获知 m原创 2020-05-28 09:30:13 · 384 阅读 · 1 评论 -
分享:nuxt页面
页面页面组件实际上是 Vue 组件,只不过 Nuxt.js 为这些组件添加了一些特殊的配置项(对应 Nuxt.js 提供的功能特性)以便你能快速开发通用应用。观看Vue School出品的 Nuxt.js 页面组件 的免费课程<template> <h1 class="red">Hello {{ name }}!</h1></template><script>export default { asyncData (contex原创 2020-05-27 09:53:20 · 330 阅读 · 0 评论 -
分享:nuxt错误页面
错误页面你可以通过编辑 layouts/error.vue 文件来定制化错误页面.警告: 虽然此文件放在 layouts 文件夹中, 但应该将它看作是一个 页面(page).这个布局文件不需要包含 标签。你可以把这个布局文件当成是显示应用错误(404,500等)的组件。默认的错误页面源码在 这里.举一个个性化错误页面的例子 layouts/error.vue:<template> <div class="container"> <h1 v-if="er原创 2020-05-26 09:01:35 · 309 阅读 · 0 评论 -
分享:nuxt自定义布局
layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。假设我们要创建一个博客布局 并将其保存到layouts/blog.vue:<template> <div> <div>我的博客导航栏在这里</div> <nuxt/> </div></template>然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局:原创 2020-05-25 09:26:46 · 944 阅读 · 0 评论 -
分享:nuxt默认布局
默认布局可通过添加 layouts/default.vue 文件来扩展应用的默认布局。提示: 别忘了在布局文件中添加 组件用于显示页面的主体内容。默认布局的源码如下:<template> <nuxt/></template>...原创 2020-05-23 08:38:29 · 266 阅读 · 1 评论 -
分享:nuxt布局
布局Nuxt.js 允许你扩展默认的布局,或在 layout 目录下创建自定义的布局。原创 2020-05-23 08:37:07 · 377 阅读 · 0 评论 -
分享:nuxt模板
模板你可以定制化 Nuxt.js 默认的应用模板。定制化默认的 html 模板,只需要在src文件夹下(默认是应用根目录)创建一个 app.html 的文件。默认模板为:<!DOCTYPE html><html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} <原创 2020-05-22 08:38:34 · 665 阅读 · 0 评论 -
分享:nuxt视图
视图本章节的内容阐述了如何在 Nuxt.js 应用中为指定的路由配置数据和视图,包括应用模板、页面、布局和HTML头部等内容。原创 2020-05-21 09:01:08 · 245 阅读 · 0 评论 -
分享:nuxt中间件
中间件中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。一个中间件接收 context 作为第一个参数:export default function (context) { context.userAgent = process.server ? context.req.headers['user-agent'] : navigator原创 2020-05-20 08:45:20 · 2570 阅读 · 0 评论 -
分享:nuxt页面过渡动效设置
页面过渡动效设置如果想给某个页面自定义过渡特效的话,只要在该页面组件中配置 transition 字段即可:在全局样式 assets/main.css 中添加一下内容:.test-enter-active, .test-leave-active { transition: opacity .5s;}.test-enter, .test-leave-active { opacity: 0;}然后我们将页面组件中的 transition 属性的值设置为 test 即可:export de原创 2020-05-19 08:09:36 · 799 阅读 · 0 评论 -
分享:nuxt全局过渡动效设置
全局过渡动效设置提示 :Nuxt.js 默认使用的过渡效果名称为 page如果想让每一个页面的切换都有淡出 (fade) 效果,我们需要创建一个所有路由共用的 CSS 文件。所以我们可以在 assets/ 目录下创建这个文件:在全局样式文件 assets/main.css 里添加一下样式:.page-enter-active, .page-leave-active { transition: opacity .5s;}.page-enter, .page-leave-active { o原创 2020-05-18 09:59:00 · 873 阅读 · 0 评论 -
分享:nuxt过渡动效
过渡动效Nuxt.js 使用 Vue.js 的组件来实现路由切换时的过渡动效。原创 2020-05-17 09:32:46 · 313 阅读 · 0 评论 -
BUG:安装seata遇到的问题和解决方法
安装seata遇到的问题和解决方法点击闪退问题,返回上级目录查看有没有logs日志文件夹如果有logs日志文件还是闪退,那就返回到bin文件中找到seata-server.bat文件找到之后,右键点击选择一个方式,打开后找到80-85行,有2024,2024,1024三个数字,改成——1024,1024,512即可...原创 2020-05-16 09:46:09 · 823 阅读 · 0 评论 -
BUG:订单号sn精度问题
订单号sn精度问题问题描述:创建订单成功后,数据传递给前端过程中,Long类型的sn,数据出现部分丢失情况。问题解决方案:将sn存放到BaseResult前,转换成字符串问题原因?js获得后端返回long类型时,会存在数据丢失的问题搜索参考,修改FastJSON响应结果...原创 2020-05-15 09:22:58 · 274 阅读 · 0 评论 -
分享:nuxt-SPA fallback
SPA fallback您也可以为动态路由启用SPA fallback。在使用mode:'spa’模式下,Nuxt.js将输出一个与index.html相同的额外文件。如果没有文件匹配,大多数静态托管服务可以配置为使用SPA模板。生成文件不包含头信息或任何HTML,但它仍将解析并加载API中的数据。我们在nuxt.config.js文件中启用它:export default { generate: { fallback: true, // if you want to use '404.h原创 2020-05-14 09:18:17 · 623 阅读 · 0 评论 -
分享:nuxt命名视图
命名视图要渲染命名视图,您可以在布局(layout) / 页面(page)中使用 或 组件。要指定页面的命名视图,我们需要在nuxt.config.js文件中扩展路由器配置:export default { router: { extendRoutes (routes, resolve) { const index = routes.findIndex(route => route.name === 'main') routes[index] = {原创 2020-05-13 08:22:11 · 912 阅读 · 1 评论 -
分享:nuxt搭建环境后的目录介绍
nuxt搭建环境后的目录介绍1:.nuxt // Nuxt自动生成,临时的用于编辑的文件,build2:assets // 用于组织未编译的静态资源如LESS、SASS或JavaScript3:components // 用于自己编写的Vue组件,比如波动组件、日历组件、分页组件4:layouts // 布局目录,用于组织应用的布局组件,不可更改5:middleware // ...原创 2020-05-06 08:40:56 · 305 阅读 · 1 评论 -
分享:audio和video的css一些样式
audio和video的css一些样式以下是audio和video的标签内容/*video默认全屏按钮*/::-webkit-media-controls-fullscreen-button{ display: none !important; }/*video默认aduio音量按钮*/::-webkit-media-controls-mute-button { display: non...原创 2020-05-05 08:19:54 · 1328 阅读 · 0 评论