ian.liu
ian.liu

Nuxt.js 从搭建到发布

一个基于 Vue.js的服务端渲染应用框架 ，nuxt 解决了SPA的通病（首屏白屏，SEO）

文章目录

        • 1. 搭建Nuxt
          • 1.1 快速入门
          • 1.2 资源目录
          • 1.3 生命周期
        • 2. 配置Nuxt
          • 2.1 引入UI框架
          • 2.2 引入中间件
          • 2.3 引入国际化
          • 2.4 引入第三方插件
          • 2.5 引入axios.js
          • 2.6 加载静态资源
        • 3. 开发Nuxt
        • 4. 调试Nuxt
          • 4.1 界面调试
          • 4.2 JS调试
          • 4.3 代理跨域
        • 5. 性能优化方案
          • 5.1 UI框架按需引入
          • 5.2 服务端渲染数据
          • 5.3 组件异步加载
          • 5.4 JS按需加载
          • 5.5 其它优化方案
          • 5.6 完整的nuxt.config.js
        • 6. 发布Nuxt
          • 6.1 打包
          • 6.2 发布

1. 搭建Nuxt

1.1 快速入门

​ 为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app

​ 确保安装了npx（npx在NPM版本5.2.0默认安装了），详细查询官网教程

$ npx create-nuxt-app <项目名>

​

1.2 资源目录

项目完整资源目录

Nuxt.js 从搭建到发布_第1张图片

​ api：express 目录

​ assets：公共资源目录（.js .css .jpg）

​ components：公共组件目录

​ layouts：页面入口目录（default.vue 类似vue里的App.vue）

​ locales：国际化语言包文件目录

​ middleware：中间件目录

​ pages：页面级目录

​ plugins：公共插件目录

​ static：静态资源目录

​ store：vuex目录

​ .eslintrc.js：ESlint 代码检测工具配置文件

​ .gitignore：git上传规则配置文件

​ nuxt.config.js：nuxt 规则配置文件

​ package.json：npm 依赖包配置文件

​

1.3 生命周期

  • nuxt 生命周期
    Nuxt.js 从搭建到发布_第2张图片

  • nuxt context 思维导图

    Nuxt.js 从搭建到发布_第3张图片

2. 配置Nuxt

2.1 引入UI框架

  1. UI框架使用的是ant-design-vue： 支持自定义主题颜色和组件国际化等

    $ npm install --save ant-design-vue

  2. 创建插件目录plugins，添加antd.js：Vue全局引入ant-design-vue，开发时可直接使用框架组件

    Nuxt.js 从搭建到发布_第4张图片

    // antd.js
import Vue from 'vue'
import antd from 'ant-design-vue'

Vue.use(antd)

  3. 配置nuxt.config.js：引入antd.js，可自定义ant-design-vue框架主题颜色

    // nuxt.configs.js
module.exports = {
    /**
     * 第三方插件
     */
    plugins: [
        {src: '~/plugins/antd.js', ssr: true},
    ],
    /**
     * 编译配置
     */
    build: {
        extend (config, ctx) {
            /**
             * 自定义 ant-design-vue 主题颜色
             */
            config.module.rules.push({
                test: /\.less$/,
                use: [{
                    loader: 'less-loader',
                    options: {
                        modifyVars: {
                            'primary-color': '#2EA9DF',
                            'link-color': '#2EA9DF',
                            'border-radius-base': '4px'
                        },
                        javascriptEnabled: true
                    }
                }]
            })
        }
    }
}
2.2 引入中间件

中间件包含路由守卫、国际化等

  1. 创建中间件目录middleware，添加route.js

    // route.js
export default ({req}) => {
    // 服务端渲染时
    if (process.server) {
       // 业务逻辑
    }
     // 客户端渲染时
    if (process.client) {
        // 添加路由守卫，动态改变路由的跳转
        app.router.beforeEach((to, from, next) => {
			// 业务逻辑
        })
    }
}

  2. 配置nuxt.config.js，引入route.js

    // nuxt.configs.js
module.exports = {
    /**
     * 中间件拦截器
     */
    router: {
        middleware: ['route']
    }
    /**
     * 第三方插件
     */
    plugins: [
        {src: '~/plugins/antd.js', ssr: true},
    ],
    /**
     * 编译配置
     */
    build: {
        extend (config, ctx) {
            /**
             * 自定义 ant-design-vue 主题颜色
             */
            config.module.rules.push({
                test: /\.less$/,
                use: [{
                    loader: 'less-loader',
                    options: {
                        modifyVars: {
                            'primary-color': '#2EA9DF',
                            'link-color': '#2EA9DF',
                            'border-radius-base': '4px'
                        },
                        javascriptEnabled: true
                    }
                }]
            })
        }
    }
}
2.3 引入国际化

界面静态文字根据国际化动态切换语言，附上官网教程

  1. 创建目录 locales，添加index.js和需要的国际化 *.json

    Nuxt.js 从搭建到发布_第5张图片

    // index.js
export default () => ['zh_TW', 'zh_CN', 'en_US']

  2. 创建目录store，添加index.js：nuxt默认集成vuex，会自动检测store是否存在

    在这里插入图片描述

    // index.js
import Locale from '~/locales'

/**
 * 全局变量
 * @returns {{locales, locale: *}}
 */
export const state = () => ({
    locales: Locale(),
    locale: Locale()[0],
})

export const mutations = {
    /**
     * @param locale 当前选中的国际化标识
     * @constructor
     */
    SET_LANG (state, locale) {
        if (state.locales.indexOf(locale) !== -1) {
            state.locale = locale
        }
    }
}

export const actions = {
    /**
     * @param commit 国际化修改
     * @param val 国际化标识
     */
    updateLang ({commit}, val) {
        commit('SET_LANG', val)
    },
}

  3. 添加中间件 i18n.js：校验客服端传递的国际化标识，动态渲染界面文字

    在这里插入图片描述

    // i18n.js
import Tool from '~/assets/utils/tool'  // 服务端从request获取Cookie的工具
export default function ({ isHMR, app, store, route, params, error, redirect, req }) {
    let cookies = Tool.getcookiesInServer(req)
    let languageCookie = cookies.language ? cookies.language : null
    const defaultLocale = app.i18n.fallbackLocale
    // If middleware is called from hot module replacement, ignore it
    if (isHMR) return
    // Get locale from params
    const locale = params.lang || defaultLocale
    if (store.state.locales.indexOf(locale) === -1) {
        return error({ message: 'This page could not be found.', statusCode: 404 })
    }
    // Set locale
    store.commit('SET_LANG', store.state.locale)
    app.i18n.locale = languageCookie || store.state.locale
    // If route is //... -> redirect to /...
    if (locale === defaultLocale && route.fullPath.indexOf('/' + defaultLocale) === 0) {
        const toReplace = '^/' + defaultLocale + (route.fullPath.indexOf('/' + defaultLocale + '/') === 0 ? '/' : '')
        const re = new RegExp(toReplace)
        return redirect(
            route.fullPath.replace(re, '/')
        )
    }
}

  4. 添加插件 i18n.js：Vue全局引入i18n，可以在DOM中使用{{$t(...)}}，JS中使用this.$t(...)获取国际化文字

    Nuxt.js 从搭建到发布_第6张图片

    // i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookie from 'js-cookie'

Vue.use(VueI18n)

export default ({ app, store }) => {
    let data = {}
    let Locale = store.state.locales
    for (let i = 0; i < Locale.length; i++) {
        data[Locale[i]] = require(`~/locales/${Locale[i]}.json`)
    }
    // Set i18n instance on app
    // This way we can use it in middleware and pages asyncData/fetch
    app.i18n = new VueI18n({
        locale: Cookie.get('language') || store.state.locale,
        fallbackLocale: Cookie.get('language') || store.state.locale,
        messages: data
    })
    // 自定义页面跳转方法
    app.i18n.path = (link) => {
        return `/${app.i18n.locale}/${link}`
    }
}

  5. 配置Nuxt.config.js：引入插件i18n.js

    // nuxt.configs.js
module.exports = {
    /**
     * 中间件拦截器
     */
    router: {
        middleware: ['route','i18n']
    }
    /**
     * 第三方插件
     */
    plugins: [
        {src: '~/plugins/antd.js', ssr: true},
     	{src: '~/plugins/i18n.js', ssr: true}
    ],
    /**
     * 编译配置
     */
    build: {
        extend (config, ctx) {
            /**
             * 自定义 ant-design-vue 主题颜色
             */
            config.module.rules.push({
                test: /\.less$/,
                use: [{
                    loader: 'less-loader',
                    options: {
                        modifyVars: {
                            'primary-color': '#2EA9DF',
                            'link-color': '#2EA9DF',
                            'border-radius-base': '4px'
                        },
                        javascriptEnabled: true
                    }
                }]
            })
        }
    }
}
2.4 引入第三方插件

  • 全局引入：配置nuxt.config.js，添加资源文件的路径

    // nuxt.config.js
module.exports = {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ],
      // 不对

你可能感兴趣的:(nuxt)

  • Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录 二倍速播放 前端vue.js
    1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
  • Tailwind CSS与服务器端渲染：SSR项目样式处理 AI实战架构笔记 AI架构开发实战css前端ai
    TailwindCSS与服务器端渲染：SSR项目样式处理关键词：TailwindCSS、服务器端渲染、SSR、样式处理、性能优化、Next.js、Nuxt.js摘要：本文将深入探讨如何在服务器端渲染(SSR)项目中高效使用TailwindCSS。我们将从基本原理出发，分析Tailwind在SSR环境下的独特挑战，提供完整的解决方案，并通过实际案例展示最佳实践。文章涵盖性能优化策略、常见问题解决以及
  • nuxt更改页面渲染的html，去除自定义属性、 Amodoro nuxthtml前端nuxt2nuxt3nuxtjs
    nuxt2nuxt.config.jsmodule.exports={//...hooks:{'render:route':(url,result)=>{//去除nuxt自定义属性result.html=result.html.replace(/\sdata-n-head=".*?"/gi,'').replace(/\sdata-hid=".*?"/gi,'').replace(/{nitroAp
  • 前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比
    前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指南为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指
  • 如何解决window.__nuxt__太大的问题
    原文链接我自己的网站-----如何解决window.__nuxt__太大的问题提前预告在解决了window.__nuxt__之后，我渲染出来的首页(仅html)缩小了40%问题由于使用了nuxt做ssr，所以会在服务端进行渲染，但是前不久在做seo的时候发现一个问题,如下图:可以看到红色方框里面的脚本，里面包含了服务端渲染所需要的数据(或者说开发者需要用到的数据)，但是这部分数据只是服务端需要的，
  • 去除 nuxt.js 框架下的 window.__NUXT__
    问题描述：nuxt.js框架建设网站，在网站页面点击查看查看网页源代码，就会发现源代码里面有一串这样的代码window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,.....后续代码太
  • 2024三掌柜赠书活动第十二期：Nuxt.js Web开发实战
    目录前言Nuxt.js的特性Nuxt.js的实战应用关于《Nuxt.jsWeb开发实战》编辑推荐内容简介作者简介图书目录书中前言/序言《Nuxt.jsWeb开发实战》全书速览结束语前言作为前端开发的小伙伴想必对Nuxt.js并不陌生，Nuxt.js是基于Vue.js的一款用于构建服务端渲染的应用程序的框架。它能够帮助开发者快速搭建高性能的单页面应用（SPA）和多页面应用（MPA）。Nuxt.js在
  • Nuxt.js 静态生成中的跨域问题解决方案 m0_73882020 javascript开发语言ecmascript
    当您运行npmrungenerate生成静态页面时，Vite的代理服务器确实无法使用，因为生成阶段是在Node.js环境中执行的构建过程。但别担心，我将为您提供一套完整的解决方案来处理构建阶段的跨域问题。核心解决方案1.构建阶段：使用服务端中转API（推荐）在构建阶段通过Nuxt的server路由中转请求，避开跨域限制：//server/api/products.tsexportdefaultde
  • Nuxt.js 数据获取全面指南：从基础到高级实践 vvilkin的学习备忘 Nuxtjavascript开发语言ecmascript
    在现代Web应用开发中，高效、可靠的数据获取是构建优秀用户体验的关键。Nuxt.js作为一个基于Vue.js的元框架，为开发者提供了一套完整的数据获取解决方案，既支持客户端渲染(CSR)，也支持服务器端渲染(SSR)和静态站点生成(SSG)。本文将深入探讨Nuxt.js的各种数据获取方法，分析它们的适用场景，并通过实际示例展示如何在实际项目中应用这些技术。一、Nuxt.js数据获取概述1.1为什么
  • nuxt2 项目构建发布流程（运维版）
    nuxt2项目构建发布流程（运维版）目录环境准备代码获取本地构建服务端部署1.环境准备1.1安装Node.js下载地址https://nodejs.org/zh-cn/blog/release/v14.15.3查看是否安装成功node-v查看npm版本npm-v2.代码获取git地址http://xxxxxxx3.本地构建3.1依赖安装cd./ezca-mall-web-portal#使用淘宝镜像
  • Nuxt 2万字全面解析：从基础概念到高级部署与版本演进 睡不着的可乐 nuxt前端
    一、Nuxt框架概述1.1Nuxt简介与核心价值Nuxt是一个免费的开源框架，它以直观且可扩展的方式，基于Vue.js创建类型安全、高性能且适用于生产环境的全栈Web应用程序和网站(1)。作为Vue生态系统中最受欢迎的元框架之一，Nuxt提供了开箱即用的解决方案，简化了现代Web应用的开发流程，同时保持了Vue.js的灵活性和表现力。Nuxt的核心价值在于将Vue.js从一个视图层库扩展为完整的应
  • Nginx 运维实战与 HTML 静态网页开发全攻略
    一、技术背景：静态站点的黄金时代1.静态网页的复兴浪潮性能优势：对比动态站点，静态资源响应速度提升60%+，首屏加载时间平均缩短1.2秒（基于WebPageTest实测数据）技术演进：Jamstack架构普及（2024年市场占有率达37%），Hugo、Nuxt.js等静态站点生成器（SSG）推动企业级应用典型场景：企业官网（占比78%）、产品着陆页（转化率提升23%）、博客系统（WordPress
  • vue-33（实践练习：使用 Nuxt.js 和 SSR 构建一个简单的博客） 清幽竹客 VUEjavascriptvue.js前端
    实践练习：使用Nuxt.js和SSR构建一个简单的博客使用Nuxt.js和SSR构建一个简单的博客是巩固你对服务器端渲染理解以及Nuxt.js如何简化这一过程的好方法。这个练习将带你完成设置基本博客结构、获取数据并以用户友好的格式展示，同时利用SSR的优势来提升SEO和性能。我们将专注于与构建博客相关的Nuxt.js核心概念，例如目录结构、asyncData和fetch方法，以及动态路由。设置Nu
  • Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递... 庭前云落 前端---Nuxt.JSvuejavajavascriptreactjs
    [TOC]1、Nuxt目录结构详解Nuxt项目文件目录结构|--.nuxt//Nuxt自动生成，临时的用于编辑的文件，build|--assets//用于组织未编译的静态资源入LESS、SASS或JavaScript|--components//用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件|--layouts//布局目录，用于组织应用的布局组件，不可更改。|--middleware/
  • vue-31（Nuxt.js 中的数据获取：asyncData和fetch） 清幽竹客 VUEjavascriptvue.js前端
    Nuxt.js中的数据获取：asyncData和fetchNuxt.js为您的应用程序提供了强大而便捷的数据获取方式，尤其是在处理服务器端渲染（SSR）时。数据获取的两个主要方法是asyncData和fetch。了解每种方法的细微差别以及何时使用它们，对于构建高效和性能卓越的Nuxt.js应用程序至关重要。本课将深入探讨这些方法的细节，探索它们的功能、用例和差异。理解asyncDataasyncD
  • vue-32（部署一个 Nuxt.js 应用程序） 清幽竹客 VUEjavascriptvue.js前端
    部署一个Nuxt.js应用程序部署Nuxt.js应用程序是使您的创作向世界开放的最后一步。它包括为生产环境准备应用程序、选择合适的托管平台以及配置部署流程。本课程将指导您完成部署Nuxt.js应用程序的关键方面，确保顺利高效的发布。准备部署在部署您的Nuxt.js应用之前，优化它以适应生产环境至关重要。这涉及几个关键步骤：构建应用第一步是为生产环境构建您的Nuxt.js应用。这个过程会编译您的代码
  • Nuxt.js页面目录结构详解：从入门到精通 柏廷章Berta
    Nuxt.js页面目录结构详解：从入门到精通nuxtTheIntuitiveVueFramework.项目地址:https://gitcode.com/gh_mirrors/nu/nuxt什么是Nuxt.js的pages目录Nuxt.js采用基于文件系统的路由机制，pages目录是Nuxt项目中最核心的目录之一。该目录下的每个Vue组件文件都会自动映射为一个应用路由，这种设计极大地简化了路由配置工
  • 解决在Nuxt3+naiveUi中打包出现vueuc导入方式问题报错 张苹果博客 前端
    在nuxt3+naiveui项目中打包出现vueuc导入方式问题报错，导致页面访问500。错误描述[nuxt][requesterror][unhandled][500]Namedexport'VBinder'notfound.Therequestedmodule'vueuc'isaCommonJSmodule,whichmaynotsupportallmodule.exportsasnamede
  • vue-28（服务器端渲染（SSR）简介及其优势） 清幽竹客 VUEvue.jsjavascript
    服务器端渲染（SSR）简介及其优势服务器端渲染（SSR）是现代网络应用的关键技术，特别是使用Vue.js等框架构建的应用。它通过在服务器上渲染初始应用状态来弥补传统单页应用（SPA）的局限性，从而提升性能、SEO和用户体验。本课程将全面介绍SSR，包括其优势以及与客户端渲染的对比。我们将为后续课程中使用Nuxt.js奠定基础，这是一个强大的框架，简化了Vue.js的SSR实现。理解服务器端渲染（S
  • Linux tcp_info：监控TCP连接的秘密武器 CodeWithMe 网络linuxtcp/ip
    深入解析Linuxtcp_info：TCP状态的实时监控利器在开发和运维网络服务时，我们常常遇到这些问题：我的TCP连接为什么速度慢？是发生了重传，还是窗口太小？拥塞控制到底有没有生效？这些问题的答案，其实隐藏在内核的tcp_info结构中。本文将详细介绍：tcp_info是什么，怎么用？各字段含义和实际用途在调优TCP服务中的应用实践一、什么是tcp_info？tcp_info是Linux内核中
  • nuxt3 + vue3 分片上传组件全解析（大文件分片上传） 给钱，谢谢！ nuxtjavascript开发语言ecmascriptnuxt3vue3typescript
    本文将详细介绍一个基于Vue.js的分片上传组件的设计与实现，该组件支持大文件分片上传进度显示等功能。组件概述这个上传组件主要包含以下功能：支持大文件分片上传（默认5MB一个分片）支持文件哈希计算，用于文件唯一标识显示上传进度（整体和单个文件）支持自定义UI样式提供完整的文件管理功能（添加、删除）后端支持分片合并和临时存储组件结构组件由三个主要文件组成：Uploader.vue-主组件fileCh
  • 一文了解React、Next.js、Vue、Nuxt和Svelte等框架的最新动态和趋势 前端达人 javascriptreact.jsvue.js前端前端框架
    一起来看看谷歌I/O大会的一篇演讲：关于JavaScript框架生态系统的概述，内容涵盖Angular、Astro、React、Remix、Next.js、Vue、Nuxt、Solid和Svelte等多个框架的最新动态和趋势。在过去的一年左右的时间里，JavaScript框架生态圈发生了许多变化。这份文档简要概述了近期的一些亮点。想要更深入讨论这些话题，可以查看今年GoogleI/O大会上的Jav
  • 一文读懂 Nuxt.js：下一代 Vue 全栈框架的核心魅力 吴启维 前端前端vue.js
    在前端技术迭代加速的当下，如何高效构建高性能、易维护的Web应用，成为开发者面临的核心课题。Nuxt.js作为基于Vue.js的全栈元框架，凭借对服务端渲染（SSR）、静态站点生成（SSG）等前沿技术的深度整合，以及开箱即用的开发体验，正在重塑Vue生态的开发范式。接下来，我们将从技术原理到实践应用，全方位拆解Nuxt.js的核心竞争力。一、Nuxt.js是什么？Nuxt.js本质是为Vue.js
  • LVS+keepalived负载均衡 weixin_34032827 网络后端
    文档参考http://bbs.linuxtone.org/thread-1077-1-1.html（netseek）lvs说明:目前有三种IP负载均衡技术（VS/NAT、VS/TUN和VS/DR）；八种调度算法（rr,wrr,lc,wlc,lblc,lblcr,dh,sh）。在调度器的实现技术中，IP负载均衡技术是效率最高的。在已有的IP负载均衡技术中有通过网络地址转换（NetworkAddres
  • nuxtJs配置 一个专注写代码的程序媛 nuxtJstypescriptvue.js
    在Nuxt.js项目中，即使官方文档没有明确列出i18n配置，你仍然可以直接在nuxt.config.ts中配置i18n，这是因为Nuxt.js的模块系统支持动态扩展配置项。以下是具体原因和机制：1.Nuxt.js模块系统的动态扩展Nuxt.js采用模块化架构，允许第三方模块（如@nuxtjs/i18n）向nuxt.config.ts注入自定义配置。当你在modules数组中添加@nuxtjs/i
  • Install failed for `@nuxtjs/[email protected]`. Do you want to continue adding the module to nuxt.config? 学途路漫漫 前端工具链前端
    解决办法是：用cnpm安装admin@DESKTOP-4B9537RMINGW64/d/WorkSpace/My/Nuxt/learn(master)$npxnuxi@latestmoduleadd@nuxtjs/i18natasyncEngine.executePackageManagerRequest(D:\nvm\v20.14.0\node_modules\corepack\dist\lib
  • 万字长文解析：深入理解服务端渲染(SSR)架构与全栈实践指南 前端御书房 JavaScript架构javascript前端
    一、SSR核心原理深度剖析1.1技术定义与演进历程服务端渲染（Server-SideRendering）指在服务器端完成页面DOM构建的技术方案。其发展历程可分为三个阶段：阶段时期典型技术传统SSR2000-2010JSP/PHP现代SSR2015-2020Next.js/Nuxt.js混合渲染2020-至今Qwik/Astro1.2核心工作流程解析ClientServerDBHTTPReques
  • 构建nuxt3项目完美开发环境 住在河边的程序猿 nuxt3prettiereslinitelement-plustailwindcss
    Nuxt一个基于vue的是一个开源框架，可使Web开发变得直观且功能强大。自信地创建高性能、生产级的全栈Web应用和网站，支持客户端和服务端渲染，利于SEO。目前，已经更新迭代到第三代版本。本文教程将以目前nuxt的最新版本3.12.4为核心展开。一、安装nuxt3项目打开一个终端(如果你使用的是VisualStudioCode，你可以打开一个集成终端)，使用下面的命令创建一个新的启动项目:pnp
  • vue video(视频)禁止用户拖动进度条，自定义组件实现，包含视频音量、暂停、播放、全屏、退出全屏 、播放进度，话不多说直接上代码。 行云流水626 vue.js音视频前端javascript
    注意项目中本组件使用到了elementUI所以要确保项目中安装了videoFree.vue{{curJd}}{{allTime}}js部分：因此为nuxtjs开发的项目，代码中this.$fmtS是一个格式化时间的工具类代码后面有exportdefault{props:{src:{type:String,default:''}},data(){return{video:null,isPlay:fa
  • linux thermal framework(1)_概述
    原文来源：蜗窝科技linuxthermalframework(1)_概述1.介绍热能是电子器件在通电工作后散发能量的主要方式之一，电子器件（cpu、电源适配器等）中的电阻、晶体管、集成电路等元件在工作中，电流通过导体，电子与原子碰撞，导致能量以热能形式散发。在手持移动设备（手机、手表等）中，由于接触人体皮肤，保证设备的温度在人体可接受范围内是重要的一个研发方向，硬件上可以通过选择更低功耗的电子器件
  • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
     这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
  • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
      1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
  • [航天与宇宙]为什么发射和回收航天器有档期 comsci
           地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
  • linux下批量替换文件内容 商人shang linux替换
    1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
  • 网页在线天气预报 oloz 天气预报
    网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
  • SpringMVC和Struts2比较 杨白白 springMVC
    1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
  • refuse copy, lazy girl! 小桔子 copy
           妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
  • apache与php整合 aichenglong php apache web
    一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
  • Maven常用内置变量 AILIKES maven
    Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
  • java的类和对象 百合不是茶 JAVA面向对象 类 对象
    java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
  • JS控制页面输入框为只读 bijian1013 JavaScript
    在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
  • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
            对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
  • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
    常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
  • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
    1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
  • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
    nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
  • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
  • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
    参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
  • 数据库连接池的工作原理 chicony 数据库连接池
           随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
  • java 关键字 CrazyMizzz java
    关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
  • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
    Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
  • 单态设计模式 dcj3sjt126com 设计模式
      单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
  • svn locked dcj3sjt126com Lock
    post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
  • ARM寄存器学习 e200702084 数据结构C++cC#F#
    无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
  • 常用编码资料 gengzg 编码
    List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
  • 进程 vs. 线程 hongtoushizi 线程linux进程
    我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
  • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
    一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
  • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
         字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
  • 枚举类型的单例模式 zhb8015 单例模式
    E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
  • Kafka+Storm+HDFS ssydxa219 storm
    cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
  • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
    System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo